是否可以使用插槽与attachShadow文本区域?

Question

在创建自定义shadowDom元素时是否有一些使用<slot>与<textarea>的方法?

根据标准(&我猜是预期的)文本区行为，它的内容是转义<slot></slot>到<slot></slot>

如果我运行下面的

<script>
window.customElements.define('my-textarea',
class MyButton extends HTMLElement {
constructor() {
super();
const template = document.createElement('textarea');
template.innerHTML = `<slot></slot>`;
this.attachShadow({mode: 'open'}).appendChild(template);
console.log(this.shadowRoot.innerHTML);
}
}
)
</script>
<my-textarea>i'm not used in the slot</my-textarea>

…然后您可以看到，文本区域的内容显示为<slot></slot>，控制台日志显示innerHTML为<slot></slot>

有什么技术可以解决这个问题吗?

—Edit—

刚刚发现这个有点类似:允许textarea web组件接受内部文本

Answer 1

以防有人偶然发现这个问题，由于我不完全理解的原因(特别是为什么setTimeout是必要的)以下工作:

<script>
window.customElements.define('my-textarea',
class MyTextarea extends HTMLElement {
textarea;
constructor() {
super();
this.textarea  = document.createElement('textarea');
this.textarea.setAttribute('contentEditable','true');
this.attachShadow({mode: 'open'}).appendChild(this.textarea);
}
connectedCallback() {
setTimeout(() => {
this.textarea.textContent = this.textContent;
})
}
}
)
</script>
<my-textarea>for some reason this works just fine</my-textarea>

Answer 2

注意可以缩写为:

<script>
customElements.define('my-textarea',
class extends HTMLElement {
constructor() {
super()        
.attachShadow({mode:'open'})
.append(this.textarea = document.createElement('textarea'));
}
connectedCallback() {
setTimeout(() => {
this.textarea.textContent = this.textContent;
})
}
})
</script>
<my-textarea>for some reason this works just fine</my-textarea>