Я создал собственный веб-компонент под названием {amp}lt;expanding-textarea{amp}gt; который расширяет функциональность {amp}lt;textarea{amp}gt; . Я могу установить текстовое содержимое компонента, например, {amp}lt;expanding-textarea{amp}gt;content goes here{amp}lt;/expanding-textarea{amp}gt; но не тогда, когда я пытаюсь установить содержимое динамически с помощью компонента внутри LitElement. Ниже приведен минимальный пример, который правильно заполняет текст для {amp}lt;textarea{amp}gt;${item.text}{amp}lt;/textarea{amp}gt; внутри директивы repeat, но не так, как есть.

 {amp}lt;body{amp}gt; {amp}lt;my-element{amp}gt;{amp}lt;/my-element{amp}gt; {amp}lt;script type="module"{amp}gt; const template = document.createElement("template"); template.innerHTML = `{amp}lt;textarea{amp}gt;{amp}lt;/textarea{amp}gt;`; 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 ={amp}gt; item.id, item ={amp}gt; html`{amp}lt;expanding-textarea{amp}gt;${item.text}{amp}lt;/expanding-textarea{amp}gt;` )} `; } } customElements.define("my-element", MyElement); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; 

Проблема в том, что this.textContent не имеет значения в constructor() потому что {amp}lt;expanding-textarea{amp}gt; еще не находится в DOM. this.textContent будет иметь значение только после того, как {amp}lt;expanding-textarea{amp}gt; будет подключено к 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 )