我正在构建一个使用<textarea>元素的 Web 组件，但我无法弄清楚如何让它接受像本机<textarea>元素这样的内部文本。
<body>
<textarea>this works</textarea>
<expanding-textarea>this doesn't</expanding-textarea>
<script type="module">
const template = document.createElement("template");
template.innerHTML = `<textarea></textarea>`;
class ExpandingTextarea extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define("expanding-textarea", ExpandingTextarea);
</script>
</body>
您需要在构造函数中设置新创建的文本区域的 textContent 属性。 我为你做了一个简化的版本。
class ExpandingTextarea extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
var textarea = document.createElement("textarea");
textarea.textContent = this.textContent;
this.shadowRoot.appendChild(textarea);
}
}
customElements.define("expanding-textarea", ExpandingTextarea);
有两种类型的自定义元素
- 自治自定义元素(从(根(HTML扩展，就像第一个答案一样(
- 自定义内置元素(从现有元素扩展(
因此，您可以从HTMLTextAreaElement扩展并免费获得所有功能：
class MyTextArea extends HTMLTextAreaElement {
constructor() {
super();
this.placeholder = 'Type some text';
this.cols = 60;
this.rows = 10;
}
}
customElements.define('my-textarea', MyTextArea, { extends: 'textarea' });<textarea is=my-textarea></textarea>重要提示：
- Opera和Safari还不支持自定义内置元素，有一个polyfill。
- 自定义内置文本区域(由于其内部工作原理(不能有 shadowDOM 大多数其他自定义内置元素可以有 shadowDOM
- 您可以使用以下内容动态创建自定义内置元素：
document.createElement( "textarea", {is:"my-textarea"} ) - 火狐错误！！允许
<my-textarea></my-textarea>符号，当定义元素时