Support nested custom elements

Is your feature request related to a problem? Please describe. If I have multiple levels of nested components, the components “disappear” when compiled to custom elements. I need to use custom elements for CSS encapsulation in a component that has multiple layers of svelte components.

Describe the solution you’d like

<!--Calendar.svelte-->
<div>
     <ButtonComponent/>
</div>

<!--ButtonComponent.svelte-->
<div class='button'>
     <LinkComponent/>
</div>

when exported should output

<my-calendar>
     <my-button>
          <my-link></my-link>
     </my-button>
</my-calendar>

instead of

<my-calendar>
     <div class='button'>
          <slot></slot>
     </div>
</my-calendar>

If all the nested Svelte components in the tree have the <svelte:option tag="my-component"> set.

Describe alternatives you’ve considered The only alternative I’ve come up with is to export each component individually and then nest them elsewhere. Doing it this way beats the purpose of using Svelte and the conveniences it brings. I have tried creating a custom element and then embedding a Svelte component inside it, but Svelte javascript inlines styles into the main document’s head, and not into the shadow dom of the parent custom component, so styles are not applied to the Svelte component (This is unexpected, and I think this should be a separate issue on its own).

How important is this feature to you? This is a very important feature. I’m working on a Chrome extension that injects a Svelte component into a range of pages, so the shadow dom is needed for CSS encapsulation. My component has other Svelte components such as Buttons etc. nested deeply inside.

This might be related to #2605

[Rich-Harris]

It’s possible that Svelte’s behaviour should change here, but in the meantime what about doing it like this?

<!--Calendar.svelte-->
<svelte:options tag="my-calendar"/>

<script>
  import './ButtonComponent.svelte';
</script>

<div>
  <my-button/>
</div>

[MonkeyAndres]

I just created a template for using Svelte and web components interchangeably in a codebase. And also comes with Storybook and i18n configured. More info: https://github.com/redradix/svelte-custom-element-template