title: How to change <body> tag style from child component?
body: <p>I have this in index.html: </p>
  
  <pre><code>&lt;body class="light-gray"&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
      &lt;div id="preloader"&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In app-root i have this:</p>
  
  <pre><code>&lt;laylout&gt;&lt;/laylout&gt;
  </code></pre>
  
  <p>Inside layout i have one component where in <code>scss</code> i want to change body on index. Any suggestion how can i do that?</p>
  
  <pre><code>.light-gray{
      background: red!important;
  }
  </code></pre>
  
  <p>I tried <code>:host</code> but this is not main parent i need something like: <code>:host :host :host</code>. Host of host of host :)</p>