table component in stencil js

Question

i am trying to create a custom component for Table Element using stencil js.But when i create a component the output is not what i expected .

import { Component, h,  } from "@stencil/core";

@Component({
  tag: "table-head",

})
export class table{
  render() {
    return (
        <table class="table">
            <thead>
                <tr>
                        <slot/>
                </tr>
            </thead>
        </table>
    );
  }
}

i am using above component in html file as follows.

<table-head>
      <th>Frist</th>
      <th>second</th>
 </table-head>

now when i when inspect the html file. <th> element is not showing up.

I see something like this when i inspect the custom component. The <th> is not wrapping the content.

        <thead>
            <tr> Frist
                 second </tr>
        </thead>

what am i missing here?

Answer 1

When the Browser initially verifies the dom, he checks for invalid tags. He removes the <th> tags because they are not inside a valid <table> in the inital dom.

This here:

<table-head>
  <th>Frist</th>
  <th>second</th>
</table-head>

is an invalid dom for a table so the <th> tags are removed. When the webcomponent renders the <table> at runtime and the dom would be valid, the <th> tags are already removed. I don't think you can do much about this, as you cannot control how the browser checks the dom.

You could try to use display: table as a workaround.