4 ms·

> I'm not sure that's even that correct. If you write code using browser APIs that are currently standardised, your code will work indefinitely, whether or not

> I'm not sure that's even that correct. If you write code using browser APIs that are currently standardised, your code will work indefinitely, whether or not you use Web Components, React, or jQuery. The most charitable interpretation of this argument is that framework specific component libraries assume for the most part that you're using that specific framework. The documentation for popular React component libraries like shadcn are largely incomprehensible if you're not using React. Libraries like Shoelace (now being renamed to Web Awesome) make no such assumptions. You can just drop a script tag into your page's markup and get started without having to care about (or even be aware of) the fact that Shoelace uses Lit internally. > But without Javascript, Web Components are essentially empty holes that can't do anything. They don't progressively enhance anything. This is not true if you're using the new Declarative Shadow DOM API [1]. You literally just add a template tag with a shadowroot mode attribute inside your custom element, and then the component works without JavaScript. When (or if) the JavaScript loads, you simply check for the existence of a server-rendered shadow root using `internals.shadowRoot`. If a shadow root already exists then you don't have to replace anything, and you can attach your event listeners to the pre-existing shadow root (i.e. component hydration). [1] https://web.dev/articles/declarative-shadow-dom#component_hydration https://web.dev/articles/declarative-shadow-dom#component_hy...

PittleyDunkin 2y ago
> You literally just add a template tag with a shadowroot mode attribute inside your custom element, and then the component works without JavaScript. Wtf is a shadowroot? I'm of increasing confidence that the entire project to unify document display and application runtime has utterly failed and there's no way (and no benefit) to resuscitate it. We need two different internets: one for interactive applications and one for document browsing.
- throwitaway1123 2y ago
  > Wtf is a shadowroot? In the Document Object Model (DOM), every document has a root node, which you can retrieve by calling `getRootNode()` on any node in the document (e.g. `document.getRootNode()` or `document.body.getRootNode()`). Custom Elements can have their own "shadow" document that's semi-isolated from the parent document, and the root node of that shadow document is called the shadow root. The idea is to be able to create your own HTML elements (which also have their own hidden DOM). If you enable a setting in Chrome's Devtools (Show user agent shadow DOM) [1], you can actually see the hidden shadow structure of built in HTML Elements: https://www.youtube.com/watch?v=Vzj3jSUbMtI&t=291s https://www.youtube.com/watch?v=Vzj3jSUbMtI&t=291s [1] https://developer.chrome.com/docs/devtools/settings/preferences#elements https://developer.chrome.com/docs/devtools/settings/preferen...
  - deleted 2y ago
    [deleted]
marcosdumay 2y ago
At this point, I think it's better to point to the MDN docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#declarative_shadow_dom https://developer.mozilla.org/en-US/docs/Web/HTML/Element/te... Your link uses some deprecated functionality that was only ever created on Chrome. Anyway, it's good to know that browsers actually did implement that. It was a major complaint when web components were created.
- throwitaway1123 2y ago
  The only reason I avoid linking to that MDN page is because I think it does a bad job of actually assembling all of the pieces together into a working example. That's why I linked specifically to the component hydration section, which assembles it all into a functioning component complete with an actual class and constructor. The code example in that specific section doesn't appear to use any deprecated or non-standard features. Otherwise, I normally do prefer MDN as an authoritative source of documentation.
  - marcosdumay 2y ago
    The MDN page has the deprecation notice for the `shadowRoot` property. Yes, the examples on your page are way more comprehensive. Even with compatibility support for old Chrome versions. Unfortunately, that support example will also break your code on other browsers. People may want to read it anyway, and just fix the problem. It being outdated doesn't make the explanation bad.
    - throwitaway1123 2y ago
      > The MDN page has the deprecation notice for the `shadowRoot` property. The `shadowRoot` property of the ElementInternals object is not deprecated: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/shadowRoot https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... What's deprecated is the `shadowroot` attribute on the template element, which the example I linked to does not use. The second line of code in that example is `<template shadowrootmode="open">`. All of this is mentioned at the very top of the article where it says: "Note that the specification for this feature changed in 2023 (including a rename of shadowroot to shadowrootmode), and the most up to date standardized versions of all parts of the feature landed in Chrome version 124." > Unfortunately, that support example will also break your code on other browsers. No, it will not.

PittleyDunkin 2y ago

> You literally just add a template tag with a shadowroot mode attribute inside your custom element, and then the component works without JavaScript. Wtf is a shadowroot? I'm of increasing confidence that the entire project to unify document display and application runtime has utterly failed and there's no way (and no benefit) to resuscitate it. We need two different internets: one for interactive applications and one for document browsing.

throwitaway1123 2y ago
> Wtf is a shadowroot? In the Document Object Model (DOM), every document has a root node, which you can retrieve by calling `getRootNode()` on any node in the document (e.g. `document.getRootNode()` or `document.body.getRootNode()`). Custom Elements can have their own "shadow" document that's semi-isolated from the parent document, and the root node of that shadow document is called the shadow root. The idea is to be able to create your own HTML elements (which also have their own hidden DOM). If you enable a setting in Chrome's Devtools (Show user agent shadow DOM) [1], you can actually see the hidden shadow structure of built in HTML Elements: https://www.youtube.com/watch?v=Vzj3jSUbMtI&t=291s https://www.youtube.com/watch?v=Vzj3jSUbMtI&t=291s [1] https://developer.chrome.com/docs/devtools/settings/preferences#elements https://developer.chrome.com/docs/devtools/settings/preferen...
- deleted 2y ago
  [deleted]

marcosdumay 2y ago

At this point, I think it's better to point to the MDN docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#declarative_shadow_dom https://developer.mozilla.org/en-US/docs/Web/HTML/Element/te... Your link uses some deprecated functionality that was only ever created on Chrome. Anyway, it's good to know that browsers actually did implement that. It was a major complaint when web components were created.

throwitaway1123 2y ago
The only reason I avoid linking to that MDN page is because I think it does a bad job of actually assembling all of the pieces together into a working example. That's why I linked specifically to the component hydration section, which assembles it all into a functioning component complete with an actual class and constructor. The code example in that specific section doesn't appear to use any deprecated or non-standard features. Otherwise, I normally do prefer MDN as an authoritative source of documentation.
- marcosdumay 2y ago
  The MDN page has the deprecation notice for the `shadowRoot` property. Yes, the examples on your page are way more comprehensive. Even with compatibility support for old Chrome versions. Unfortunately, that support example will also break your code on other browsers. People may want to read it anyway, and just fix the problem. It being outdated doesn't make the explanation bad.
  - throwitaway1123 2y ago
    > The MDN page has the deprecation notice for the `shadowRoot` property. The `shadowRoot` property of the ElementInternals object is not deprecated: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/shadowRoot https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... What's deprecated is the `shadowroot` attribute on the template element, which the example I linked to does not use. The second line of code in that example is `<template shadowrootmode="open">`. All of this is mentioned at the very top of the article where it says: "Note that the specification for this feature changed in 2023 (including a rename of shadowroot to shadowrootmode), and the most up to date standardized versions of all parts of the feature landed in Chrome version 124." > Unfortunately, that support example will also break your code on other browsers. No, it will not.