3 ms·

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 wit

by 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.
        mdhb 3y ago
        For what it’s worth it’s actually at 72% support according to Can I Use data and nothing at all like your 1/3 claim and as I mentioned has a polyfill. I don’t know why it is but almost every time I see your username pop up on HN it’s always bending over backwards to protect Apple from some perceived criticism. People are allowed to talk shit about them, they are going to be ok I promise.
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 mdhb 3y ago

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.
      - mdhb 3y ago
        For what it’s worth it’s actually at 72% support according to Can I Use data and nothing at all like your 1/3 claim and as I mentioned has a polyfill. I don’t know why it is but almost every time I see your username pop up on HN it’s always bending over backwards to protect Apple from some perceived criticism. People are allowed to talk shit about them, they are going to be ok I promise.

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?