Using third party libraries in Svelte custom component

user_6883002 0
Viewed 1076

I want to create a web component using svelte. To create a web component it's necessary to include the svelte tag option

<svelte:options tag="{"my-custom-component}"></svelte:options>

It creates a custom component with that name but doesn't work properly because we have to provide this tag for all the child components as well! I added it to all the child components but it still doesn't work, turns out I use third-party libraries and I don't know any way to have that option there!

Is there a way to create the custom components with svelte which includes third-party libraries?

custom-component svelte-component web-component svelte
1 Answers

You can use regular svelte components (including third party) ones inside your component.
But you'll need to compile those with different compiler settings in your rollup/webpack config.
And due to the nature of scoped styling in web components (Shadow DOM) the css won't work in these components. So it depends on the library if it still works.

You might be able to turn off scoped styling in the future:
Issue #1748: Custom element without shadow DOM

But scoped styling could have been the reason why you wanted/needed webcomponents in the first place.

user_191650
Related