11 ms·

I've just done a small project using web components. I didn't use the shadow dom at all (please note I have no idea what I'm doing). This was after reading a s

by fatboy 4y ago

I've just done a small project using web components. I didn't use the shadow dom at all (please note I have no idea what I'm doing). This was after reading a single hacker news comment saying not to bother with it, after days of research where everything I read spoke about web components and the shadow dom as if they were inextricably linked. I didn't want the styles to be encapsulated. I wanted the css to cascade in like it does everywhere else. I don't really see many use cases where you would actually want to style a component from the inside and not have the user of the component be able to style it themselves. All the blogs I read spoke about exposing a styling api using css variables. But by doing that, are you not going to great lengths to recreate what already exists in the normal dom? Am I missing the point?

sureglymop 4y ago
I completely agree with you and I felt the same way when using Angular and styling Angular components.
runarberg 4y ago
Not really, the shadow DOM is an opt in choice for that reason. Only a subset of cases do you actually want the styles to be encapsulated. The shadow DOM is actually harmful for form components as interactive relations are voided if there is a shadow barrier between them (which has implications on both UX and accessibility; I think there is an effort in WHATWG to fix this). But when there is a usecase, the shadow DOM can be really nice. As you get nice things like component scoped styles and unique idref, among others. > All the blogs I read spoke about exposing a styling api using css variables. This might be an outdated advice. You are supposed to use a mix of CSS variables and ::part()[1]. CSS variables should cover the most basic styling while you are supposed to expose style-able elements of your components with the part attribute. 1: https://developer.mozilla.org/en-US/docs/Web/CSS/::part https://developer.mozilla.org/en-US/docs/Web/CSS/::part
arcanemachiner 4y ago
I had good results doing the exact same thing.

by fatboy 4y ago

sureglymop 4y ago

I completely agree with you and I felt the same way when using Angular and styling Angular components.

runarberg 4y ago

Not really, the shadow DOM is an opt in choice for that reason. Only a subset of cases do you actually want the styles to be encapsulated. The shadow DOM is actually harmful for form components as interactive relations are voided if there is a shadow barrier between them (which has implications on both UX and accessibility; I think there is an effort in WHATWG to fix this). But when there is a usecase, the shadow DOM can be really nice. As you get nice things like component scoped styles and unique idref, among others. > All the blogs I read spoke about exposing a styling api using css variables. This might be an outdated advice. You are supposed to use a mix of CSS variables and ::part()[1]. CSS variables should cover the most basic styling while you are supposed to expose style-able elements of your components with the part attribute. 1: https://developer.mozilla.org/en-US/docs/Web/CSS/::part https://developer.mozilla.org/en-US/docs/Web/CSS/::part

arcanemachiner 4y ago

I had good results doing the exact same thing.