title: Use :root in Shadow DOM
body: <ul>
  <li>I have been working on <code>Shadow DOM</code> and then I meet a problem.</li>
  <li>I use the <code>:root {}</code> syntax to declare some <code>CSS variables</code> . But unfortunately, it does not work.</li>
  <li>Here is my code</li>
  </ul>
  <ul>
  <li><p>On <code>1.html</code></p>
  <pre><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;Shadow DOM&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;square-element&gt;&lt;/square-element&gt;
    &lt;script src=&quot;./1.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
    
  </li>
  <li><p>On <code>1.js</code>:</p>
  <pre><code>const htmlCode = `
  &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;HTML Shadow DOM&lt;/title&gt;
    &lt;style&gt;
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 24px;
      }
  
      :root {
        --bg-color: cornflowerblue;
      }
  
      body {
        width: 100%;
        height: 100vh;
        background-color: antiquewhite;
      }
  
      .square {
        width: 500px;
        height: 500px;
        border: 5px solid #000;
        background-color: var(--bg-color);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;square&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;`;
  
  customElements.define(
  &quot;square-element&quot;,
  class extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({ mode: &quot;open&quot; });
  
      shadow.innerHTML = htmlCode;
    }
  });
  </code></pre>
  </li>
  </ul>
  <ul>
  <li>Can I use <code>CSS :root {}</code> to decalre some varibales in <code>Shadow DOM</code>?</li>
  </ul>