Broadly I agree with Nolan, though. Web components have enough rough edges that they're not going to take over the world in the current state. But, they are pretty nice for certain use cases.
I'm not sure what he means by not playing well with server side rendering though. I've been doing that without issues.
I wonder what makes you say that. All that I've seen seems to indicate[1] that Javascript is needed in order to register the template with a specific tag.
[1] https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...
> This won't appear in your page until you grab a reference to it with JavaScript and then append it to the DOM
https://web.dev/articles/declarative-shadow-dom#how_to_build...
And the example below that one shows how to hydrate declarative shadow roots with JS custom elements, so the path to progressive enhancement should be clear.
I say alleged because I haven't had the chance to try it beyond a toy example.
This is a declarative shadow root [1]. The template goes next to its slot contents, so you can render both separately on the server and let the HTML parser attach the shadow root, without JS, then use JS custom elements to progressively hydrate it.
[1]: https://web.dev/articles/declarative-shadow-dom#how_to_build...
Now you are right about that you can use template without js. But I have to ask: what is the point of declarative shadow root?
The point of template is to be reused instead of being used once at the same place that it's declared. This seems like adding more markup and introducing shadom dom for absolutely no reason. You may as well just write the markup directly .
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.
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.
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!
Most people who think turning off JavaScript is an important use case are only inflicting it upon themselves (and aggressively evangelizing that other people do it too) as performative luddites, to feed their martyr complex, so they have something to whine and complain about how the web is so unfair and out to get to them, and have exactly zero customers or products to support.
With reactJS I know I can server render a component or template and I’ll say JSX makes a pretty good tempting language.
With web components as far as I understand there is no good templating language built in anyways (so you have to bring your own) I’m not aware of a standard mechanism in which I can take some chunk of JS for a component associated with a tag and have it render out HTML that does not require JS to run.
> Maybe in the future, when you can render 3 different web component frameworks on the server, and they compose together and hydrate nicely, then I’ll consider this solved.
[1]: https://nolanlawson.com/2023/08/23/use-web-components-for-wh...