Javascript 允许textarea web组件接受内部文本_Javascript_Html_Web Component_Native Web Component

Javascript 允许textarea web组件接受内部文本

javascript html

Javascript 允许textarea web组件接受内部文本,javascript,html,web-component,native-web-component,Javascript,Html,Web Component,Native Web Component,我正在构建一个web组件，它使用元素，但我无法确定如何使它像原生元素那样接受内部文本 <body> <textarea>this works</textarea> <expanding-textarea>this doesn't</expanding-textarea> <script type="module"> const template = document.createElement("temp

我正在构建一个web组件，它使用

元素，但我无法确定如何使它像原生

元素那样接受内部文本

<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>


这很有效
这并不重要
const template=document.createElement（“模板”）；
template.innerHTML=`；
类ExpandingTextarea扩展HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:“open”}）；
this.shadowRoot.appendChild（template.content.cloneNode（true））；
}
}
customElements.define（“ExpandingTextarea”，ExpandingTextarea）；

您需要在构造函数中设置新创建的textarea的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);

您需要在构造函数中设置新创建的textarea的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);

有两种类型的自定义元素

自治自定义元素（从（根）HtmleElement扩展，如第一个答案）
自定义内置元素（从现有元素扩展）

因此，您可以从HTMLTextAreaElement扩展并免费获得所有功能：

类MyTextArea扩展了HtmlTextArea元素{
构造函数（）{
超级（）；
this.placeholder='键入一些文本'；
这个.cols=60；
这一行=10；
}
}
define（'my-textarea'，MyTextArea，{extends:'textarea'}）
有两种类型的自定义元素

自治自定义元素（从（根）HtmleElement扩展，如第一个答案）
自定义内置元素（从现有元素扩展）

因此，您可以从HTMLTextAreaElement扩展并免费获得所有功能：

类MyTextArea扩展了HtmlTextArea元素{
构造函数（）{
超级（）；
this.placeholder='键入一些文本'；
这个.cols=60；
这一行=10；
}
}
define（'my-textarea'，MyTextArea，{extends:'textarea'}）
您是否尝试在元素上使用contentEditable
属性？虽然这并不能回答问题，但我以前从未遇到过contentEditable-这非常有趣，谢谢。但是，请注意，规范预计不会超过其当前的草稿阶段。您是否尝试在元素上使用contentEditable
属性？虽然这并不能回答问题，但我以前从未遇到过contentEditable-这非常有趣，谢谢。但是，请注意，规范预计不会超过当前的起草阶段