title: How to css styling inside the slot in custom element?
body: <p>I am applying table styles inside the shadowDOM custom element template, inside the slot, it's not accepting the table th and td CSS.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Table extends HTMLElement {
  
    constructor() {
      super();
      // console.log("this accordion -&gt; ", this)
      setTimeout(() =&gt; {
  
        const template = document.createElement('template');
        template.innerHTML = `
          &lt;style&gt;
            ::slotted(table) {
                color: red;
                width: 100%;
            }
  
            ::slotted(table tr th),
            ::slotted(table tr td) {
                text-align: left;
                padding: 10px 0;
            }
  
          &lt;/style&gt;
          &lt;slot&gt;&lt;/slot&gt;
        `;
        const shadowDOM = this.attachShadow({
          mode: 'open'
        });
        shadowDOM.appendChild(template.content.cloneNode(true));
  
      }, 0);
  
    }
    
  }
  
  customElements.define('t-table', Table);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;t-table&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Sl No.&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;Name&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/t-table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>how to apply CSS for the above scenario?</p>