Need help understanding slots

[mjawn]

I'd like to be able to use the slot feature to pass content into a component when it's called but am struggling a bit. Here's what I have, stripped down, as an example:

<!-- heading-block.webc -->
<div class="tailwind classes">
    <div class="classes">
        <h2 class="classes" name="heading"></h2>
        <p class="classes" name="subheading"></p>
    </div>
</div>

<!-- page.webc -->
<heading-block>
    <slot slot="heading">Heading</slot>
    <slot slot="subheading"Subheading goes here, and maybe there's a <a href="">link</a> in it too.</slot>
</heading-block>

It isn't working obviously, because I don't think this is how it's meant to be. I'm pretty sure I would be able to do this using props, but as a personal preference I don't really like passing long content strings like this through attributes. I hope I'm able to properly describe my issue here.

[ComedyTomedy]

You've mixed up slot= and name= attributes. Try slot name="x" then provide content with h2 slot="x" (or another element).

Also GitHub issues aren't a help forum, they're for reporting bugs (and sometimes requesting features). There might be a slack or something for getting help, but I'd recommend checking the docs & attempting to get someone else's example working if you're struggling with your own

[mjawn]

Thank you for the insight. I suppose you're right that this isn't the correct place. Looking around before asking, there was a label named "question" so I figured it would be OK. I'm going to continue here if that's OK with you since you're offering help.

It appears to be working if I update it like so:

<!-- heading-block.webc -->
<div class="tailwind classes">
    <div class="classes">
        <h2 class="classes">
            <slot name="heading"></slot>
        </h2>
        <p class="classes">
            <slot name="subheading"></slot>
        </p>
    </div>
</div>

<!-- page.webc -->
<heading-block>
    <div slot="heading" webc:nokeep>Heading</div>
    <div slot="subheading" webc:nokeep>Subheading goes here, and maybe there's a <a href="">link</a> in it too.</div>
</heading-block>

It feels kinda clunky with the wrapping elements that we then need to strip away with nokeep, but I guess outside of props this is the only other way to do it.