Search code examples
htmlshadow-domcustom-elementslotnative-web-component

What element is slotable?


Can I use a tr (table row) for a named slot? And what happend when I use a tr as a slot's fallback content?

like this:

<x-table>
    <tr slot="x-row">
        <td>data</td>
        <td>data</td>
    </tr>
</x-table>

sample code in codepen https://codepen.io/JJia/pen/odXrWJ


Solution

  • A <tr> element must have a parent among <thead>, <tbody>, <tfoot> or <table> elements.

    Unfortunately, these elements cannot support a Shadow DOM. See the list of elements with the attachShadow() method.

    As a consequence, their first-level childs (i.e. <tr>) cannot be used with a slot attribute.