4 ms·

The name of the template tag is misleading, I agree: It separates the shadow DOM elements, the "template", from the light ones, the children slots. Different s

The name of the template tag is misleading, I agree: It separates the shadow DOM elements, the "template", from the light ones, the children slots. Different server-side instances of the same components won't necessarily render the same shadow tree, so client-side reuse was out of the question for declarative shadow DOM. But unlike client-side template, you get to paint components much sooner, during the parser, or even without JS enabled. As for why a shadow root instead of the markup directly, well, that's kinda like asking why use web components at all, which I thought was part of the premise of this reply chain. Even without JS, the shadow DOM gives you scoped CSS and isolates the shadow elements from outer DOM and CSS selectors. And custom elements, the other half of web components, can be used in HTML before defining them in JS, at which point you get to enhance the entire page at once, so now you can progressively enhance properly isolated components possibly written with different frameworks.

nsonha 2y ago
> why a shadow root instead of the markup directly, well, that's kinda like asking why use web components at all that's way off. Web component is about encapsulation/reuse of code & markup. I am willing to entertain the idea that at some point, some people with authority did think the shadow dom was a key part of web components. However, as of now, if you just scan comments in this entire thread, everyone think it's an annoying abstraction that unfortunately people have to deal with in order to enjoy other benefits of web components.
- debugnik 2y ago
  > I am willing to entertain the idea that You better do, literally every authoritative description of web components lists shadow DOM, custom elements, and template. And the last one is kind of a remnant of the push for HTML imports, which went nowhere, and is currently insufficient for anything you'd use React for, so its main value now is how it's being repurposed for declarative shadow DOM. So, personally, I'd say they're about shadow DOMs and custom elements, whether that's useful or not; I'm not convinced either!

nsonha 2y ago

> why a shadow root instead of the markup directly, well, that's kinda like asking why use web components at all that's way off. Web component is about encapsulation/reuse of code & markup. I am willing to entertain the idea that at some point, some people with authority did think the shadow dom was a key part of web components. However, as of now, if you just scan comments in this entire thread, everyone think it's an annoying abstraction that unfortunately people have to deal with in order to enjoy other benefits of web components.

debugnik 2y ago
> I am willing to entertain the idea that You better do, literally every authoritative description of web components lists shadow DOM, custom elements, and template. And the last one is kind of a remnant of the push for HTML imports, which went nowhere, and is currently insufficient for anything you'd use React for, so its main value now is how it's being repurposed for declarative shadow DOM. So, personally, I'd say they're about shadow DOMs and custom elements, whether that's useful or not; I'm not convinced either!