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

Question

我正在构建一个使用 <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>

Answer 1

您需要在构造函数中设置新创建的文本区域的文本内容属性。我给你做了一个简化版。

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

Answer 2

有 2 种自定义元素

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

因此您可以从 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"} )
Firefox 不正确！！ 允许 <my-textarea></my-textarea> 符号，

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

Allow textarea web component to accept inner text

javascript

html

web-component

native-web-component