Question

我有一个可以有孩子的网络组件。并且在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">&times;</span>
         <p> Lorem impsum </p>
    </dialog> 
</modal-component>

我尝试在connectedCallback内编写此代码，但是即使有孩子，this.innerHTML的值也是''

this.innerHTML = `<dialog><span class="close">&times;</span>${this.innerHTML}</dialog>`;

我尝试使用插槽，但是当我的Modal组件必须将多个子对象放入一个插槽时，该功能似乎只能覆盖一对一的注射。

做到这一点的最佳方法是什么？

Answer 1

带有插槽，您可以插入多个子代：

connectedCallback() {
     this.attachShadow( { mode: 'open' } )
         .innerHTML = `<span class="close">&times;</span>
                 <slot></slot>`
}

或者，如果您不想使用<slot>，则需要确保在访问innerHTML属性时已解析定制元素的内容。

这可以通过setTimeout or requestAnimationFrame来实现，也可以通过在解析HTML代码之后定义Custom元素来实现（如果可能）：

<custom-element>...</custome-element>
<script>
  customElements.define( 'custom-element', ... )
</script>

Web组件-包装子元素

1 个答案: