Javascript LitElement不会为本机Web组件设置textContent_Javascript_Web Component_Lit Element_Lit Html_Native Web Component

Javascript LitElement不会为本机Web组件设置textContent

javascript

Javascript LitElement不会为本机Web组件设置textContent,javascript,web-component,lit-element,lit-html,native-web-component,Javascript,Web Component,Lit Element,Lit Html,Native Web Component,我构建了一个名为的本地web组件，它扩展了的功能。我可以设置组件的文本内容，如此处的内容，但当我尝试通过在LitElement中使用组件来动态设置内容时，则无法设置。下面是在repeat指令中正确填充${item.text}文本的一个简单示例，但不是原样 <body> <my-element></my-element> <script type="module"> const template = document.createEl

我构建了一个名为

的本地web组件，它扩展了

的功能。我可以设置组件的文本内容，如

此处的内容

，但当我尝试通过在LitElement中使用组件来动态设置内容时，则无法设置。下面是在repeat指令中正确填充

${item.text}

文本的一个简单示例，但不是原样

<body>
  <my-element></my-element>
  <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));
        const textarea = this.shadowRoot.querySelector("textarea");
        textarea.textContent = this.textContent;
      }
    }
    customElements.define("expanding-textarea", ExpandingTextarea);

    import { LitElement, html } from "lit-element";
    import { repeat } from "lit-html/directives/repeat.js";
    class MyElement extends LitElement {
      static get properties() {
        return {
          list: { type: Array },
        };
      }
      constructor() {
        super();
        this.list = [
          { id: "1", text: "hello" },
          { id: "2", text: "hi" },
          { id: "3", text: "cool" },
        ];
      }
      render() {
        return html`
          ${repeat(
            this.list,
            item => item.id,
            item => html`<expanding-textarea>${item.text}</expanding-textarea>`
          )}
        `;
      }
    }
    customElements.define("my-element", MyElement);
  </script>
</body>


const template=document.createElement（“模板”）；
template.innerHTML=`；
类ExpandingTextarea扩展HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:“open”}）；
this.shadowRoot.appendChild（template.content.cloneNode（true））；
const textarea=this.shadowRoot.querySelector（“textarea”）；
textarea.textContent=this.textContent；
}
}
customElements.define（“ExpandingTextarea”，ExpandingTextarea）；
从“lit元素”导入{LitElement，html}；
从“lit html/directions/repeat.js”导入{repeat}；
类MyElement扩展了LitElement{
静态获取属性（）{
返回{
列表：{type:Array}，
};
}
构造函数（）{
超级（）；
此列表=[
{id:“1”，文本：“hello”}，
{id:“2”，文本：“hi”}，
{id:“3”，文本：“酷”}，
];
}
render（）{
返回html`
${重复(
这个列表，
item=>item.id，
item=>html`${item.text}`
)}
`;
}
}
自定义元素。定义（“我的元素”，MyElement）；

问题在于

this.textContent

在

构造函数（）中没有值，因为
还不在DOM中this.textContent
只有在
连接到DOM后才有值。因此，将ExpandingTextarea更改为
class ExpandingTextarea extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  connectedCallback() {
    const textarea = this.shadowRoot.querySelector("textarea");
    textarea.textContent = this.textContent;
  }
}

你可以在Stackblitz（）上看到这一点