我构建了一个名为 <expanding-textarea> 的原生 Web 组件扩展了 <textarea> 的功能.我可以设置组件的文本内容，如 <expanding-textarea>content goes here</expanding-textarea>但当我尝试使用 LitElement 中的组件动态设置内容时却没有。以下是为 <textarea>${item.text}</textarea> 正确填充文本的最小示例在 repeat 指令中，但不是原样。
<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 中。 this.textContent只有在 <expanding-textarea> 之后才有值(value)连接到 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 ( https://stackblitz.com/edit/expanding-textarea?file=my-element.js ) 上看到这个
关于javascript - LitElement 不会为原生 Web 组件设置 textContent，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59461561/