javascript - Web Components - Multiple elements per slot - Stack Overflow

I'm working on new web-ponents and ran into some issues concerning slots.

I have an outer container-ponent with a "main-slot" inside, in which multiple elements should be inserted (into the same slot). However, it is only possible to add one element per named slot.

My question: is there a way to add multiple elements to one named slot? Like shown here:

<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>

I'm working on new web-ponents and ran into some issues concerning slots.

I have an outer container-ponent with a "main-slot" inside, in which multiple elements should be inserted (into the same slot). However, it is only possible to add one element per named slot.

My question: is there a way to add multiple elements to one named slot? Like shown here:

<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>

• javascript
• html
• web-ponent
• slots

Share Improve this question Follow asked Jun 7, 2022 at 11:46 Fabio DüllFabio Düll 9711 silver badge1010 bronze badges 1

• see addendum to my answer; you can have multiple elements in one slot; so there must be something else wrong with your code. Use the [<>] button in the StackOverflow editor and show us running (but failing) code – Danny '365CSI' Engelman Commented Jun 9, 2022 at 19:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

There is also imperative <slot>

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

But! you get Named slots OR Imperative slots, on one Web Component

To mimic named <slot>, assigning content to the same named <slot>
you probably need the Mutation Observer API

addendum

You can have multiple elements per slot:

<ponent-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>
</ponent-with-slots>

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

Nope. It is not possible for named slot. The trick is to have a wrapper div element to wrap your 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>

If the presence of additional div causes styling problem, then you can use new contents type of display box.

div {
  display: contents;
}

The display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. However, note that it can cause accessibility issues.