Support custom element with nested components without errors

I have only 1 customElement and inside it there are several internal components of the Svelte. These internal/nested components cannot be 1 web component.

By setting the customElement option in the rollup, he forced me to put <svelte:options tag={null} /> on all internal components, but that seems to be wrong, as they should not be 1 customElement.

After setting up, I’m getting the following errors for internal components marked as tag={null}:

[pbastowski]

Same problem here. It seems that tag={null} does not work as documented in Svelte components imported into a parent component that has a tag="parent-component".

The below does not work

ParentComponent.svelte

<svelte:options tag="parent-component" />
<h1>Parent Component</h1>
<ImportedComponent />

ImportedComponent.svelte

<svelte:options tag={null} />
<h1>Imported Component</h1>
<slot />

However, if I give the imported component a tag name tag="imported-component" and then use the new custom element inside the parent component <imported-component></imported-component> then everything works.

This works, but it’s not what I want

ParentComponent.svelte

<svelte:options tag="parent-component" />
<h1>Parent</h1>
<imported-component></imported-component>

ImportedComponent.svelte

<svelte:options tag="imported-component" />
<h1>Important Component</h1>
<slot />

But, I don’t want to generate all my components as custom elements. I just want the top level element to be generated as a custom element and the rest of my Svelte components to be used within the app as normal Svelte components (not custom elements).

[jawish]

I solved this by using a combination of Rollup and file extensions.

Custom Element components get the extension .wc.svelte. Rollup then sets the customElement config depending on the file extension.

svelte({ customElement: true, include: /\.wc\.svelte$/ }),
svelte({ customElement: false, exclude: /\.wc\.svelte$/ }),

This works smoothly with local and NPM imported components.

Demo: https://jawish.github.io/svelte-customelement-rollup/