0

I have two Web Components made with Stencil.js. A Dropdown and a Card. Inside my Dropdown, I have this:

 <div class='dropdown'>
      <slot name="button" />
      <slot />
</div>

I nest the two child elements like this:

  <ifx-dropdown>
    <ifx-button color="primary">normal button</ifx-button>
    <ifx-dropdown-menu>
      <ifx-dropdown-item>item1</ifx-dropdown-item>
    </ifx-dropdown-menu>
  </ifx-dropdown>

As you can see, I am not specifying the slot name for the button. I am not doing slot='button'. I am just nesting it, and it works.

But on my second component, the Card, it doesn't!

<div class="card">
     <div class="card-img">
       <slot name="img" />
     </div>
     <div class="card-body">
     <div class="card-subtitle">{this.subtitle}</div>
     <div class="card-title">{this.headline}</div>
     <p class="card-text">{this.text}</p>
     <slot name="btn" />
    </div>
</div>

I am nesting it like this:

  <ifx-card skyline="true" subtitle="Overline text" headline="Card Title" text="Card Text">
    <img src="myImage" alt="" slot="img">
    <ifx-button color="primary" slot="btn">Button</ifx-button>
  </ifx-card>

If I don't specify slot=img, the image is not inserted. Same with the below button. So, my question is why? Why does it work without specifying the slot name in the case of the Dropdown, but it doesn't in the case of the Card?

happy_story
  • 1
  • 1
  • 7
  • 17
  • **Both!!!** childelements in ```` get _slotted_ (in other words _reflected_ not _moved_!) **to the default slot** ```` That is what SLOTs do; they can _reflect_ multiple **lightDOM** elements – Danny '365CSI' Engelman Mar 03 '23 at 15:39
  • That's not really answering my question at all. I don't care if they're reflected or whatever. My question is why if I insert an element without naming the slot for it, it works with the Dropdown, but it doesn't for the Card? This is what I want to know. I know there's a default slot in the Dropdown, but above it, there's a named one, and yet, when I insert an element or component without naming that slot, it still works, but it doesn't for the Card. Why? – happy_story Mar 08 '23 at 09:14

1 Answers1

0

It works in the dropdown because it contains a default slot (<slot /> without a name attribute). According to MDN:

An unnamed will be filled with all of the custom element's top-level child nodes that do not have the slot attribute. This includes text nodes.

So if you add <slot /> to the card component the components without [slot] will slotted.

Thomas
  • 8,426
  • 1
  • 25
  • 49
  • But in the Dropdown, I have two `slots`. One is default, but the first one is named, and yet, I don't have to name it when I insert the element, where as for the Card, if I don't name it, it's not inserted. Why is that? – happy_story Mar 08 '23 at 09:12
  • Listen to what Thomas and I both write; Your button is reflected in the default unnamed slot. So that unnamed slot shows TWO elements – Danny '365CSI' Engelman Mar 08 '23 at 10:06