在嵌套的shadow DOM中重新分配重复的槽元素

时间:2017-07-12 19:26:23

标签: html5 google-chrome-extension web-component shadow-dom custom-element

背景:此问题涉及为最近版本的Chrome开发扩展程序。它依赖于javascript功能,例如HTML导入和自定义元素,这些功能并非在所有浏览器上都可用,但对于这种情况就可以了。

我正在尝试实现简化的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组件的理解可能存在缺陷?

1 个答案:

答案 0 :(得分:1)

如果可能,最简单的方法是在轻量级DOM中添加<li>标记的项目。

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

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