3 ms·

I was really excited about web components until I discovered that slots and CSS isolation are a package deal. Absolutely great for the developer that wants to

I was really excited about web components until I discovered that slots and CSS isolation are a package deal. Absolutely great for the developer that wants to ship pre-built components that cannot be affected by the CSS of the site they're used in; absolutely useless when you want to make re-usable components for your own app, where you very much want slot content to be styled using the CSS you already have.

patates 5y ago
You can link to your main css from within the component. Browsers are smart enough to use the cached css file.
- deergomoo 5y ago
  Interesting! I had not considered that. I don't suppose you know if there's any performance impact there—e.g. even if it's not downloading it, is there overhead from processing the file once per component?
  - patates 5y ago
    I'm not sure, but I haven't had any performance problems (including some performance score tests), even in larger projects.
runarberg 5y ago
Take a look at CSS shadow parts. It allows you to mark which part of the shadow dom are stylable which you can then access using the ::part() pseudo element. Another handy thing to know is that exportparts reexports parts from a nested web component, and CSS --custom-properties will cascade down into the shadow dom https://developer.mozilla.org/en-US/docs/Web/CSS/::part https://developer.mozilla.org/en-US/docs/Web/CSS/::part
- deergomoo 5y ago
  I didn't know about that and it is certainly interesting, however for my particular use case it wouldn't have worked unfortunately. I was using Tailwind, so rather than targeting specific components from a global style sheet, I was trying to use the utility classes from the global sheet inside a web component.
  - runarberg 5y ago
    Ahh yes. I believe the tailwind workflow is incompatible with the component scoped styles which web component forces. I believe however that when you use components scoped styles (whether through the shadow dom, React’s styled components, Vue’s single file components, etc) tailwind becomes obsolete (or rather the wrong tool for the job).
jjcm 5y ago
CSS variables help somewhat with this. Variable values penetrate the shadowroot, so you can effectively build an "api" for styles your component. I've done that a few times, and it's been enough for me to get by in most cases. An example is here: https://github.com/jjcm/soci-frontend/blob/master/components/soci-user.js#L15-L19 https://github.com/jjcm/soci-frontend/blob/master/components...

patates 5y ago

You can link to your main css from within the component. Browsers are smart enough to use the cached css file.

deergomoo 5y ago
Interesting! I had not considered that. I don't suppose you know if there's any performance impact there—e.g. even if it's not downloading it, is there overhead from processing the file once per component?
- patates 5y ago
  I'm not sure, but I haven't had any performance problems (including some performance score tests), even in larger projects.

runarberg 5y ago

Take a look at CSS shadow parts. It allows you to mark which part of the shadow dom are stylable which you can then access using the ::part() pseudo element. Another handy thing to know is that exportparts reexports parts from a nested web component, and CSS --custom-properties will cascade down into the shadow dom https://developer.mozilla.org/en-US/docs/Web/CSS/::part https://developer.mozilla.org/en-US/docs/Web/CSS/::part

deergomoo 5y ago
I didn't know about that and it is certainly interesting, however for my particular use case it wouldn't have worked unfortunately. I was using Tailwind, so rather than targeting specific components from a global style sheet, I was trying to use the utility classes from the global sheet inside a web component.
- runarberg 5y ago
  Ahh yes. I believe the tailwind workflow is incompatible with the component scoped styles which web component forces. I believe however that when you use components scoped styles (whether through the shadow dom, React’s styled components, Vue’s single file components, etc) tailwind becomes obsolete (or rather the wrong tool for the job).

jjcm 5y ago

CSS variables help somewhat with this. Variable values penetrate the shadowroot, so you can effectively build an "api" for styles your component. I've done that a few times, and it's been enough for me to get by in most cases. An example is here: https://github.com/jjcm/soci-frontend/blob/master/components/soci-user.js#L15-L19 https://github.com/jjcm/soci-frontend/blob/master/components...