How to css styling inside the slot in custom element?

Question

I am applying table styles inside the shadowDOM custom element template, inside the slot, it's not accepting the table th and td CSS.

class Table extends HTMLElement {

  constructor() {
    super();
    // console.log("this accordion -> ", this)
    setTimeout(() => {

      const template = document.createElement('template');
      template.innerHTML = `
        <style>
          ::slotted(table) {
              color: red;
              width: 100%;
          }

          ::slotted(table tr th),
          ::slotted(table tr td) {
              text-align: left;
              padding: 10px 0;
          }

        </style>
        <slot></slot>
      `;
      const shadowDOM = this.attachShadow({
        mode: 'open'
      });
      shadowDOM.appendChild(template.content.cloneNode(true));

    }, 0);

  }
  
}

customElements.define('t-table', Table);

<t-table>
  <table>
    <tr>
      <th>Sl No.</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Name</td>
    </tr>
  </table>
</t-table>

how to apply CSS for the above scenario?

Answer 1

You can't select children from the ::slotted pseudo element selector.
This is by design; the component should not concern itself about the styling of the slotted elements. The exception is the element that is being slotted, but not its descendants.

Instead style your elements from the Light DOM the old fashioned way.

class Table extends HTMLElement {

  constructor() {
    super();

    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        ::slotted(table) {
            color: red;
            width: 100%;
        }
      </style>
      <slot></slot>
    `;
    const shadowDOM = this.attachShadow({
      mode: 'open'
    });
    shadowDOM.appendChild(template.content.cloneNode(true));

  }
  
}

customElements.define('t-table', Table);

.my-table tr th,
.my-table tr td {
    text-align: left;
    padding: 10px 0;
}

<t-table>
  <table class="my-table">
    <tr>
      <th>Sl No.</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Name</td>
    </tr>
  </table>
</t-table>

But your shadow template doesn't really do anything other than just apply styles to a slotted element, and not create a different layout or anything, so why even use the Shadow DOM? Just apply styles on the t-table element from the Light DOM and you've got the same effect.

class Table extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('t-table', Table);

t-table table {
    color: red;
    width: 100%;
}

t-table tr th,
t-table tr td {
    text-align: left;
    padding: 10px 0;
}

<t-table>
  <table>
    <tr>
      <th>Sl No.</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Name</td>
    </tr>
  </table>
</t-table>

Answer 2

See StackOverflow answer :::slotted CSS selector for nested children in shadowDOM slot