1

I know that if I have a <slot /> inside my component, I can then insert content from the HTML, but I don't understand how this works.

For example:

      render() {
        return(
          <div>
            <slot />
          </div>
        )
      }

Now, inside my HTML, I can do this:

<my-card>test</my-card>

and "test" will be inserted as a content.

However, if the <slot /> is nested inside other child-elements inside my component, the "test" text is still inserted even if it's not inside those particular elements. How does that work?

For example:

      render() {
        return(
          <div>
            <button><slot /></button>
            <select>
              <option value="one"><slot /></option>
            </select>
            <p><slot /></p>
          </div>
        )
      }

Now, in my HTML, if I do this:

<my-card>test</my-card>

The text "test" is inserted inside the <slot /> inside the button. But what if I want to add text inside the <option> <slot />? How do I do that?

If I only have one <slot /> inside <option> for example, how do I insert text inside of it from my HTML?

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
happy_story
  • 1
  • 1
  • 7
  • 17
  • You have two **unnamed** ```` in your example; there can only be one. – Danny '365CSI' Engelman Jan 11 '23 at 13:42
  • @Danny'365CSI'Engelman If I give my slots a name, how do I then reference them in my HTML? – happy_story Jan 11 '23 at 13:44
  • Maybe the Fine Manual helps: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot – Danny '365CSI' Engelman Jan 11 '23 at 14:18
  • @Danny'365CSI'Engelman I tried it, but it's not working!! In my component tsx, I have a button whose innerHTML is a slot, and then I also have a ` – happy_story Jan 11 '23 at 14:34
  • Just to be clear, in my component tsx, all slots have a unique name, and yet, in my HTML, `fsfs is again inserted inside the first with a name "one", and not the second with a name "two". Why? – happy_story Jan 11 '23 at 14:36

1 Answers1

1

As mentioned in the comments, you can only have a single unnamed slot. Any additional slots have to have a name:

<slot name="outside" />

To add an element inside a named slot you can use the slot attribute:

<my-card>
  <span slot="outside">test</span>
</my-card>

See also Stencil's documentation on slots.

Thomas
  • 8,426
  • 1
  • 25
  • 49
  • Why is it not working for me?? Just to be clear, the `` component is in normal HTML, not inside any JS framework! – happy_story Jan 13 '23 at 12:57
  • It's hard to say without more code. Can you try to create a minimal reproduction of the issue on [webcomponents.dev](https://webcomponents.dev/)? – Thomas Jan 16 '23 at 09:02
  • I already figured it out. It was because I was using ` – happy_story Jan 16 '23 at 09:03
  • But now I have another issue with the classes. Can you try answering this question: https://stackoverflow.com/questions/75131443/how-do-i-add-a-class-to-a-slotted-element – happy_story Jan 16 '23 at 09:03