html - 重新分配嵌套影子 DOM 中的重复插槽元素

Question

背景:这个问题与为最新版本的 Chrome 开发扩展有关。它依赖于 HTML 导入和自定义元素等 javascript 功能，这些功能并非在所有浏览器上都可用，但对于这种情况来说没问题。

我正在尝试实现一个简化如下的 HTML 自定义元素:

<custom-el>
    <span slot="head">Great</span>

    <span slot="item">Item one</span>
    <span slot="item">Item two</span>

    <span slot="foot">done</span>
</custom-el>

我注册了 <custom-el> .每次创建元素时，我的代码的自定义元素类都会附加影子根并从以下模板附加到影子根内容:

<template id="main">
    <h1><slot name="head"></slot></h1>
    <ul>
        <slot name="item"></slot>
    </ul>
    <i><slot name="foot"></slot></i>
</template>

我想重新分配每个 <span>具有属性 slot="item"到负责呈现单个项目的辅助模板:

<template id="sub">
    <li><slot name="item"></slot></li>
</template>

具有属性 name="item" 的插槽数不是固定的。它从数据库生成并定期更改。

我知道可以通过将 shadowRoot 附加到插槽的父元素并设置插槽的插槽属性来重新分配插槽，例如<slot name="item" slot="newItem"> .但我认为这对我来说行不通，因为子模板需要包装每个项目实例，而不是项目列表。

我可以将影子根和子模板附加到主文档中的每个项目。这可行，但我更喜欢主模板导入并应用任何嵌套的 shadowRoots 和模板。这样，主文档只需要导入包含主模板的文件。组件细节的实现封装在主模板 html 文件中。

我也可以使用 slotchange事件和 HTMLSlotElement.assignedNodes拼凑脚本解决方案的方法。但我不想那样做。

还有其他方法吗？我的实际用例涉及更复杂的 HTML 结构。或者我的架构或对 Web 组件的理解存在缺陷？

Answer 1

如果可能的话，最简单的方法是使用 <li> 添加项目light DOM 中的标记。

<span slot=item><li>Item 1</li></span>
<span slot=item><li>Item 2</li></span>

这样你就不需要使用 Javascript 来生成 <li>标签。