4 ms·

I think, entangling slots with Shadow DOM was a mistake. My guess is, most devs just want to use web components with global styles in their page, to make the r

by k__ 3y ago

I think, entangling slots with Shadow DOM was a mistake. My guess is, most devs just want to use web components with global styles in their page, to make the reusable between frameworks. However, the moment you want nestable components, you need slots, which are part of the Shadow DOM, which prevents you from using global styles.

mejutoco 3y ago
From components I expect some level of style independence, but I agree it could have been done better. You can pass css variables, or full link urls to the stylesheets to the inside of the components. If all your components support that, then effectively you can override any style.
mdhb 3y ago
I feel like maybe this isn’t well known because it’s the top voted comment and I hear people say this all the time but you absolutely can have global styles with ShadowDOM I do it all the time. You have two options: 1. you can insert a <link rel=“stylesheet”> tag the same way you might in the <head> 2. Native CSS modules Example 1: https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#server-rendering_with_style https://developer.chrome.com/docs/css-ui/declarative-shadow-... Example 2: https://web.dev/articles/css-module-scripts https://web.dev/articles/css-module-scripts
- socketcluster 3y ago
  This information is hard to find. I also used to think it wasn't possible until I did a deep dive into Web Components. Another way to style elements that are inside the Shadow DOM (from the outside) is to use the `::part(partname)` pseudo-selector, but you need to set the `part="partname"` attribute on elements inside the shadow DOM in order to allow them to be styled from outside with the pseudo-selector. Another approach I found which is useful when building components which work with slotted template tags is to project the slotted template's content into another slotted element (e.g. a div) provided by the user the from outside. The second slotted element acts as a viewport which holds the component's rendered HTML output. So the component requires the user to provide both a <template slot="item"></template> element and also a <div slot="viewport"></div> element to project the rendered output into. I wrote a post about it: https://dev.to/jondubois/web-components-the-template-viewport-pattern-for-the-shadow-dom-2gm4 https://dev.to/jondubois/web-components-the-template-viewpor...
- JimDabell 3y ago
  CSS Module Scripts is only available in Blink-based browsers. It has been accepted by Mozilla and Apple and progressed as a web standard, but it isn’t something you can use today. Part of the problem with web components is that the component can only style the slotted element and not its descendants. There’s all kinds of weird edge cases that make styling web components painful. What web developers were asking for was scoped CSS and HTML templates. How it became what it is today I don’t know, but it’s been massively overcomplicated while at the same time having really awkward limitations.
  - mdhb 3y ago
    CSS Module scripts are only currently natively supported in blink based browsers because would you believe it Apple is years behind everyone else on web technology yet again for the millionth time. There is a simple polyfill however in the meantime which means you can actually use it today. https://github.com/guybedford/es-module-shims https://github.com/guybedford/es-module-shims
    - JimDabell 3y ago
      Neither Mozilla nor Apple have implemented it; the only rendering engine to do so thus far is Blink. Why are you assigning 100% of the blame to Apple?
      - mdhb 3y ago
        Because one of them is a team that is primarily funded by grants but generally tries to do the right thing and the other is the richest company in the world who have a track record over a decade long of actively trying to cripple the web and force everyone into their walled garden. It shouldn’t be a shock that people might feel very differently about those two organisations based on their previous actions and all.
        JimDabell 3y ago
        Mozilla has half a billion in revenue and a billion in cash reserves they seem to want to spend on anything but their browser. Mozilla is no pauper. When 1/3 rendering engines implement something, that engine is ahead. When 2/3 engines implement something, the other engine is behind. But you are so keen on dunking on Apple, you’re perceiving 1/3 engines implementing something means that just one of the other two engines is behind. That’s an incredibly lopsided way of viewing things.
- foldr 3y ago
  With regard to inserting a <link>, IIRC you can clone the DOM node corresponding to the <link> in the root document to ensure that the CSS isn’t loaded or parsed twice (though no doubt the browser might be smart enough not to do this anyway).
- k__ 3y ago
  Interesting! So, I could include Tailwind in all my components and simply use the classes as I do without components?

by k__ 3y ago

mejutoco 3y ago

From components I expect some level of style independence, but I agree it could have been done better. You can pass css variables, or full link urls to the stylesheets to the inside of the components. If all your components support that, then effectively you can override any style.

mdhb 3y ago

I feel like maybe this isn’t well known because it’s the top voted comment and I hear people say this all the time but you absolutely can have global styles with ShadowDOM I do it all the time. You have two options: 1. you can insert a <link rel=“stylesheet”> tag the same way you might in the <head> 2. Native CSS modules Example 1: https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#server-rendering_with_style https://developer.chrome.com/docs/css-ui/declarative-shadow-... Example 2: https://web.dev/articles/css-module-scripts https://web.dev/articles/css-module-scripts

socketcluster 3y ago
This information is hard to find. I also used to think it wasn't possible until I did a deep dive into Web Components. Another way to style elements that are inside the Shadow DOM (from the outside) is to use the `::part(partname)` pseudo-selector, but you need to set the `part="partname"` attribute on elements inside the shadow DOM in order to allow them to be styled from outside with the pseudo-selector. Another approach I found which is useful when building components which work with slotted template tags is to project the slotted template's content into another slotted element (e.g. a div) provided by the user the from outside. The second slotted element acts as a viewport which holds the component's rendered HTML output. So the component requires the user to provide both a <template slot="item"></template> element and also a <div slot="viewport"></div> element to project the rendered output into. I wrote a post about it: https://dev.to/jondubois/web-components-the-template-viewport-pattern-for-the-shadow-dom-2gm4 https://dev.to/jondubois/web-components-the-template-viewpor...
JimDabell 3y ago
CSS Module Scripts is only available in Blink-based browsers. It has been accepted by Mozilla and Apple and progressed as a web standard, but it isn’t something you can use today. Part of the problem with web components is that the component can only style the slotted element and not its descendants. There’s all kinds of weird edge cases that make styling web components painful. What web developers were asking for was scoped CSS and HTML templates. How it became what it is today I don’t know, but it’s been massively overcomplicated while at the same time having really awkward limitations.
- mdhb 3y ago
  CSS Module scripts are only currently natively supported in blink based browsers because would you believe it Apple is years behind everyone else on web technology yet again for the millionth time. There is a simple polyfill however in the meantime which means you can actually use it today. https://github.com/guybedford/es-module-shims https://github.com/guybedford/es-module-shims
  - JimDabell 3y ago
    Neither Mozilla nor Apple have implemented it; the only rendering engine to do so thus far is Blink. Why are you assigning 100% of the blame to Apple?
    - mdhb 3y ago
      Because one of them is a team that is primarily funded by grants but generally tries to do the right thing and the other is the richest company in the world who have a track record over a decade long of actively trying to cripple the web and force everyone into their walled garden. It shouldn’t be a shock that people might feel very differently about those two organisations based on their previous actions and all.
      - JimDabell 3y ago
        Mozilla has half a billion in revenue and a billion in cash reserves they seem to want to spend on anything but their browser. Mozilla is no pauper. When 1/3 rendering engines implement something, that engine is ahead. When 2/3 engines implement something, the other engine is behind. But you are so keen on dunking on Apple, you’re perceiving 1/3 engines implementing something means that just one of the other two engines is behind. That’s an incredibly lopsided way of viewing things.
foldr 3y ago
With regard to inserting a <link>, IIRC you can clone the DOM node corresponding to the <link> in the root document to ensure that the CSS isn’t loaded or parsed twice (though no doubt the browser might be smart enough not to do this anyway).
k__ 3y ago
Interesting! So, I could include Tailwind in all my components and simply use the classes as I do without components?