[HELP] Filter out children of a Web Component before rendering.

[LePichu]

Let's say I have a Web Component which I use in HTML like this:

<material3-button>
    <h1>Test</h1>
</material3-button>

However, the final result which is rendered is this:

<material3-button>
    <button></button>
</material3-button>

Is there a way to get the children of the web component before it resets them and append said children to the inner content of the web component?

[LePichu]

@edoardocavazza should have mentioned you here, you probably didn't see this.

[edoardocavazza]

What you are asking is called "slotting". You can use the <slot /> element in the template to render children:

render() {
  return <button>
    <slot />
  </button>;
}

You can read more here.

You can name slots and, maybe, you may be interested to the "extending native elements" section. I strongly advice you to extend the button element instead of wrapping it.

[LePichu]

I wasn't trying to get button element into the children implicitly, but rather other elements too. Slots are what I was looking for, thanks!

[LePichu]

@edoardocavazza Any way to filter certain kinds of elements using Slot? What if I want only divs which have the same slot?