title: How to create and style svelte 3 custom elements with nested components?
body: <p>I'm trying to create <a href="https://svelte.dev/docs#Custom_element_API" rel="noreferrer">custom-element</a> (web component) in svelte 3. I can't find any way to style nested components from css. Svelte removes styles before injecting them to <code>&lt;style&gt;</code> inside of ShadowDOM.</p>
  
  <p>The problem is that I want to have nested components in my root element.
  For example:</p>
  
  <ul>
  <li>RootComponent (svelte custom-element)
  
  <ul>
  <li>(imports) FooComponent</li>
  <li>(imports) BarComponent</li>
  </ul></li>
  </ul>
  
  <p>As stated here: <a href="https://github.com/gojutin/svelte-custom-element/blob/master/README.md#gotchas" rel="noreferrer">svelte-custom-element</a></p>
  
  <p>All the components imported to custom-element must have compiler option set to <code>&lt;svelte:options tag="component-name" /&gt;</code>.</p>
  
  <p>With this option set nested components works as expected and are injected into root's element ShadowDOM. The problem is that <code>styles</code> defined in nested components are not being injected. 
  The workaround for this problem would be to inject them into root's element <code>&lt;style&gt;</code> as global styles within ShadowDom. 
  (Un)fortunately svelte automatically removes all unused styles during compilation when custom elements not yet exist. </p>
  
  <p>My goal is to create web component with svelte and then use it outside of svelte as native web-component.</p>
  
  <p>Here is <a href="https://svelte.dev/repl/ff94ad9fbb18495099f2e6e31b86bc9e?version=3.9.2" rel="noreferrer">REPL</a></p>
  
  <p>Custom elements do not really work on REPL as <a href="https://github.com/Conduitry" rel="noreferrer">Conduitry</a> wrote:</p>
  
  <blockquote>
    <p>The compiler options in the REPL don't actually affect the code that >is run, just the code that is displayed. So enabling customElement >doesn't mean you are building and running a web component</p>
  </blockquote>
  
  <p>So it's more like a code example than working one.</p>
  
  <ol>
  <li>I would like to know if there is another way to create svelte custom-element with nested component and proper styling.</li>
  <li>Is there a way to disable removing of unused css?</li>
  </ol>
  
  <p><a href="https://imgur.com/a/zZia566" rel="noreferrer">https://imgur.com/a/zZia566</a></p>
  
  <p>from <code>&lt;div class="nested"&gt;</code> starts Nested component imported from Nested.svelte.</p>
  
  <p><code>&lt;style&gt;</code> element should have <code>.nested</code> class injected but it is removed by svelte compiler.</p>