在嵌套的shadow DOM中重新分配重复的槽元素-Java 学习之路

背景：此问题涉及为最近版本的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>

我想将属性 slot="item" 的每个  重新分发到负责呈现单个项目的辅助模板：

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

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

我知道可以通过将shadowRoot附加到插槽's parent element and setting the slot'的插槽属性来重新分配插槽，例如， <slot name="item" slot="newItem"> . 但我认为这不会对我的情况有效，因为子模板需要包装每个项目实例，而不是项目列表 .

我可以将阴影根和子模板附加到主文档中的每个项目 . 这可行，但我的首选是主模板导入并应用任何嵌套的shadowRoots和模板 . 这样，主文档只需要导入包含主模板的文件 . 组件详细信息的实现封装在主模板html文件中 .

我也可以使用 slotchange 事件和 HTMLSlotElement.assignedNodes 方法来拼凑脚本解决方案 . 但我宁愿不这样做 .

还有另一种方法吗？我的实际用例涉及更复杂的HTML结构 . 或者我的架构或对Web组件的理解可能存在缺陷？

1 回答

1
如果可能，最简单的方法是在light DOM中添加带有 <li> 标记的项目 .
```
<li>Item 1</li>
<li>Item 2</li>
```
这样您就不需要使用Javascript来生成 <li> 标记 .
回复于 2024-05-05T06:52:06+08:00

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

1 回答

相关问题