Web组件 - 每个插槽的多个元素

Question

我正在研究新的网络组件，并遇到了有关插槽的一些问题。

我的外部容器组件内部有一个“主槽”，其中多个元素应插入（中）。但是，只能添加每个命名插槽的一个元素。

我的问题：有没有办法将多个元素添加到一个名称插槽中？如下所示：

<own-container>
   <own-element slot="main"></own-element>
   <own-element slot="main"></own-element>
   <own-element slot="main"></own-element>
   <own-element slot="main"></own-element>
</own-container>

Answer 1

还有 comestative＆lt; slot＆gt;

super().attachShadow({
        mode: 'open',
        slotAssignment: 'manual' // imperative assign only
      })

您可以在一个Web组件上获得命名 lots或命令插槽，

以模拟名为 ＆lt; slot＆lt; slot＆gt;，将内容分配给同一命名＆lt; slot＆gt;
可能需要“ nofollow noreferrer”> mutation obserer observer api api

附加

您 每个插槽元素：

<component-with-slots>
    <H1 slot="title">Web Components are great!</H1>
    <h2 slot="title">A bit hard to master</h2>
    <b slot="title">But Great!</b>
</component-with-slots>

<script>
  customElements.define('component-with-slots', class extends HTMLElement {
    constructor() { 
        super()
          .attachShadow({mode:'open'})
          .innerHTML = `<slot name="title"></slot>`; 
    }
  });
</script>

Answer 2

没有。命名插槽不可能。诀窍是要有包装器div元素来包装您的Lightdom。

<own-container>
  <div slot="main">
    <own-element></own-element>
    <own-element></own-element>
    <own-element></own-element>
    <own-element></own-element>
  </div>
</own-container>

如果存在其他div导致样式问题，则可以使用新的内容显示框的类型。

div {
  display: contents;
}

一个元素的孩子看起来像是元素父母的直接子女，而忽略了元素本身。但是，请注意，它可能导致可访问性问题。