我构建了一个名为<expanding-textarea>的本机Web组件，它扩展了<textarea>的功能。我可以像<expanding-textarea>content goes here</expanding-textarea>一样设置组件的文本内容，但当我尝试使用 LitElement 中的组件动态设置内容时，则无法设置。下面是一个最小示例，它为重复指令中的<textarea>${item.text}</textarea>正确填充文本，但不是按原样填充。
<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>
问题是this.textContent在constructor()中没有价值，因为<expanding-textarea>还没有在DOM中。 只有在<expanding-textarea>连接到 DOM 后，this.textContent才会有价值。所以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(https://stackblitz.com/edit/expanding-textarea?file=my-element.js(上看到这一点。