3 ms·

Allegedly, declarative shadow DOM lets you declare the template next to the prerendered slot, without JS.

mariusor 2y ago
Where is this "alleged" though? From one of the paragraphs behind my link: > This won't appear in your page until you grab a reference to it with JavaScript and then append it to the DOM
- debugnik 2y ago
  Your link isn't showing the declarative shadow DOM, this does: https://web.dev/articles/declarative-shadow-dom#how_to_build_a_declarative_shadow_root 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.
  - mariusor 2y ago
    I'm not sure what you meant when you said "without JS". To actually use templates you need JS. Yes you can declare them, but what's the point?
    - debugnik 2y ago
      You've ignored the part where the declarative template is immediately attached to its parent as a shadow root by the parser, and its siblings become the slot children. You don't need to instance or register anything with JS there, just copy-paste the template (admittedly lame, but kinda the same repetition as SSR today, just less involved and with a shadow root).
nsonha 2y ago
that's just wrong
- debugnik 2y ago
  What, exactly, is wrong? I need actual replies to continue a discussion. 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_a_declarative_shadow_root https://web.dev/articles/declarative-shadow-dom#how_to_build...
  - nsonha 2y ago
    sorry I did not know about `shadowrootmode` but your original comment was just a single statement with a very specific claim. 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 .
    - debugnik 2y ago
      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.

Where is this "alleged" though? From one of the paragraphs behind my link: > This won't appear in your page until you grab a reference to it with JavaScript and then append it to the DOM

debugnik 2y ago
Your link isn't showing the declarative shadow DOM, this does: https://web.dev/articles/declarative-shadow-dom#how_to_build_a_declarative_shadow_root 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.
- mariusor 2y ago
  I'm not sure what you meant when you said "without JS". To actually use templates you need JS. Yes you can declare them, but what's the point?
  - debugnik 2y ago
    You've ignored the part where the declarative template is immediately attached to its parent as a shadow root by the parser, and its siblings become the slot children. You don't need to instance or register anything with JS there, just copy-paste the template (admittedly lame, but kinda the same repetition as SSR today, just less involved and with a shadow root).

nsonha 2y ago

that's just wrong

debugnik 2y ago
What, exactly, is wrong? I need actual replies to continue a discussion. 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_a_declarative_shadow_root https://web.dev/articles/declarative-shadow-dom#how_to_build...
- nsonha 2y ago
  sorry I did not know about `shadowrootmode` but your original comment was just a single statement with a very specific claim. 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 .
  - debugnik 2y ago
    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.