4 ms·
One of the biggest problems I run into with Web Components is how to share common CSS styles between them. I understand that goes against the idea that each we
by c_s_guy 2y ago
One of the biggest problems I run into with Web Components is how to share common CSS styles between them. I understand that goes against the idea that each web component should be encapsulated, but sometimes this is desirable.
Say you have a component library where each component depends on a base set of styles and you don't want to load duplicate styles for each component.
Is there a best practice around this yet?
- virtualbluesky 2y agoImporting a common https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleShe... CSSStyleSheet and adding it inside the web component constructor might help?
- gitaarik 2y agoWith Lit it's easy: https://lit.dev/docs/components/styles/#inheriting-styles-from-a-superclass https://lit.dev/docs/components/styles/#inheriting-styles-fr... https://lit.dev/docs/components/styles/#sharing-styles https://lit.dev/docs/components/styles/#sharing-styles Already quite some time ago I made a little library which makes this easy: https://github.com/gitaarik/lit-style https://github.com/gitaarik/lit-style