title: CSS not working properly on Custom HTML Elements
body: <p>I've been trying to make a custom HTML Element by extending the <code>HTMLElement</code> class. I try adding some style to it by linking a CSS file that is in the same directory as my other two files - <code>index.html</code> and <code>custom.css</code>.</p>
  <p>Main folder</p>
  <ul>
  <li>index.html</li>
  <li>custom.css</li>
  <li>custom.js</li>
  </ul>
  <p><code>index.html</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
   
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel=&quot;nofollow&quot; type=&quot;text/css&quot; href=''&gt;
  &lt;/head&gt;
   
      &lt;body&gt;
          &lt;script src=&quot;./custom.js&quot;&gt;&lt;/script&gt;
          &lt;smooth-button text=&quot;Smooth button&quot; no-1 = 1 no-2 = 2&gt;&lt;/smooth-button&gt;
      &lt;/body&gt;
   
  &lt;/html&gt;
  </code></pre>
  <p><code>custom.css</code>:</p>
  <pre class="lang-css prettyprint-override"><code>smooth-button{
      display: block;
      color: blue;
      background-color: orange;
  }
  </code></pre>
  <p><code>custom.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>class SmoothButton extends HTMLElement{
   
      constructor(){
          super();
          this.shadow = this.attachShadow({mode: &quot;open&quot;})
      }
   
      connectedCallback(){
          this.render();
      }
   
      render(){
          this.SumOfNo1AndNo2 = null;
          if(this.getAttribute(&quot;no-1&quot;)!=null &amp;&amp; this.getAttribute(&quot;no-2&quot;)!=null){
              this.SumOfNo1AndNo2 = parseInt(this.getAttribute(&quot;no-1&quot;)) + 
              parseInt(this.getAttribute(&quot;no-2&quot;));
          }
          else{
              console.log(&quot;Invalid attribute.&quot;)
          }
          this.shadow.innerHTML = `&lt;button&gt;` + this.getAttribute(&quot;text&quot;) + &quot; &quot; + this.SumOfNo1AndNo2   
          + &quot;&lt;/button&gt;&quot;
      }
   
  }
   
  customElements.define(&quot;smooth-button&quot;, SmoothButton);  
  </code></pre>
  <p>With this, I get a button as expected, with the text, but the style is applied to the element as a whole and not to the elements it's made of. How can I apply the styles separately to each of its elements (just a <code>&lt;button&gt;</code> for now) with an external CSS file? I'm using external CSS because it's somehow better as I read it <a href="https://stackoverflow.com/a/68487642/16136190">here</a>.</p>