Javascript 如何单独包装开槽元素

是否有一种方法可以将每个开槽的元素包装到阴影dom中，以获得特定的开槽名称

假设标记与此类似

项目1
项目2

当前，渲染类似于：

项目1
项目2

我将如何包装开槽元素以输出类似于：

项目1
项目2

我目前的（有缺陷的）方法：

customElements.define（'custom-element'，类MyCustomElement扩展了HtmleElement{
构造函数（…参数）{
超级（…args）；
设shadow=this.attachShadow（{mode:open}）；
shadow.innerHTML=`
`;
}
});

我建议您改变包装孩子的方法。最简单的方法是只添加缺少的HTML作为slotteddiv的子项，如下面的示例所示。您仍然可以使用

：：slotted

伪选择器设置slotted元素的样式

customElements.define（'custom-element'，类MyCustomElement扩展了HtmleElement{
构造函数（…参数）{
超级（…args）；
设shadow=this.attachShadow（{mode:'open'}）；
shadow.innerHTML=`
：：开槽（[slot=“item”]）{
边框：1px纯黑；
填充：15px；
}
`;
}
});

项目1
项目2
不，您需要编写几行Javascript来分发元素。slotchange事件正是我想要的。