我有一个可以有孩子的网络组件。并且在JS上看到它希望将其当前子级包装在模式标记（已经有一个子级）内。
我目前有：
class Modal extends HTMLElement {
connectedCallback() {
// Wrap current children inside of dialog element
}
}
customElements.define("modal-component", Modal);
<modal-component>
<p> Lorem impsum </p>
</modal-component>
<!-- I want the logic in connectedCallback() to produce this with the p tag now being wrapped inside dialog -->
<modal-component>
<dialog>
<span class="close">×</span>
<p> Lorem impsum </p>
</dialog>
</modal-component>
我尝试在里面写这个，connectedCallback但是即使有孩子，它的价值this.innerHTML也是''
this.innerHTML = `<dialog><span class="close">×</span>${this.innerHTML}</dialog>`;
我尝试使用插槽，但是当我的Modal组件必须将多个子代放入一个插槽中时，该功能似乎只能覆盖一对一的注入。
最好的方法是什么？
使用插槽，您可以插入多个子代：
connectedCallback() {
this.attachShadow( { mode: 'open' } )
.innerHTML = `<span class="close">×</span>
<slot></slot>`
}
或者，如果不想使用<slot>，则需要确保在访问innerHTML属性时解析了custom元素的内容。
可以使用setTimeout或requestAnimationFrame，也可以通过解析HTML代码后定义Custom Element来实现（如果可能）：
<custom-element>...</custome-element>
<script>
customElements.define( 'custom-element', ... )
</script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句