允许 textarea Web 组件接受内部文本答案

【问题标题】：Allow textarea web component to accept inner text允许 textarea Web 组件接受内部文本
【发布时间】：2019-12-23 12:58:05
【问题描述】：

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

【问题讨论】：

你试过在元素上使用contentEditable属性吗？
虽然这不能回答问题，但我之前没有遇到过 contentEditable - 这很有趣，谢谢。但是，请注意，该规范预计不会超过目前的草案阶段w3c.github.io/editing/contentEditableTrue.html

标签： javascript html web-component native-web-component

【解决方案1】：

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

【讨论】：

【解决方案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' });

&lt;textarea is=my-textarea&gt;&lt;/textarea&gt;

重要提示：

Opera 和 Safari 不不支持自定义内置元素，有一个 polyfill
自定义的内置 Textarea（由于其内部工作原理）可以没有具有 shadowDOM
大多数其他自定义的内置元素都可以有一个 shadowDOM
您可以通过以下方式动态创建自定义内置元素：
document.createElement( "textarea", {is:"my-textarea"} )
Firefox 不正确！！ 允许 <my-textarea></my-textarea> 表示法，when defining elements late

【讨论】：