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

admin管理员组

文章数量:1026989

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.

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.

本文标签： javascriptWeb ComponentsMultiple elements per slotStack Overflow