search

sinedied / svelte-web-components-template

A base template for building a shareable web components library with Vite, Svelte and TypeScript.
84 stars 10 forks source link

Styles in svelte components are missing #5

Open bekos opened 1 year ago

bekos commented 1 year ago

First of all thanks for the template, it is very helpful!

All the styles that are applied into the Svelte components that are imported from the web component one, are ignored. I tried to check what is the issue but couldn't figure it out. Do you have any idea how this can be solved?

sinedied commented 1 year ago

I'm not sure I understand what your issue is, do you have an example repo? The style for each component is scoped by default, you need to use something like https://github.com/sveltejs/svelte-preprocess#global-style to allow writing global styles, though I'm not even sure if that would work in web components, because of the shadow dom encapsulation.

bekos commented 1 year ago

Sure, I will try to create a repro, but probably as you said it doesn't work well because of the web components 👍

bekos commented 1 year ago

@sinedied here is the repo: https://github.com/bekos/-svelte-web-components-styles

I just added one more component, https://github.com/bekos/-svelte-web-components-styles/blob/master/packages/lib/src/AnotherComponent.svelte, that is being imported by the main component. The styles of that component are not whipped out.