Why does slotting work in this component without specifying the slot name?

Question

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?

Answer 1

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.