How to create and style svelte 3 custom elements with nested components?

Question

I'm trying to create custom-element (web component) in svelte 3. I can't find any way to style nested components from css. Svelte removes styles before injecting them to <style> inside of ShadowDOM.

The problem is that I want to have nested components in my root element. For example:

• RootComponent (svelte custom-element)
  • (imports) FooComponent
  • (imports) BarComponent

As stated here: svelte-custom-element

All the components imported to custom-element must have compiler option set to <svelte:options tag="component-name" />.

With this option set nested components works as expected and are injected into root's element ShadowDOM. The problem is that styles defined in nested components are not being injected. The workaround for this problem would be to inject them into root's element <style> as global styles within ShadowDom. (Un)fortunately svelte automatically removes all unused styles during compilation when custom elements not yet exist.

My goal is to create web component with svelte and then use it outside of svelte as native web-component.

Here is REPL

Custom elements do not really work on REPL as Conduitry wrote:

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

So it's more like a code example than working one.

1. I would like to know if there is another way to create svelte custom-element with nested component and proper styling.
2. Is there a way to disable removing of unused css?

https://i.sstatic.net/FEeEC.jpg

from <div class="nested"> starts Nested component imported from Nested.svelte.

<style> element should have .nested class injected but it is removed by svelte compiler.

Answer 1

Thanks to brunoalano for sending me this: svelte-custom-element-template. It solves the styling problem with custom build script.