3 ms·

Shadow DOM was a mistake. It's a 0.1 version that was unfortunately pushed out as a completed standard. Basic stuff is missing like your link. The entire thing

Shadow DOM was a mistake. It's a 0.1 version that was unfortunately pushed out as a completed standard. Basic stuff is missing like your link. The entire thing should be deprecated and we should start from scratch. If you want to embed something that doesn't use your page's styles, we already have iframes. Shadow DOM is just a half-assed recreation of that.

jakelazaroff 3y ago
How would you build, say, a component library like Shoelace [1] using iframes? [1] https://shoelace.style/ https://shoelace.style/
- earthboundkid 3y ago
  You could use srcdoc="..." to simulate a component, except that iframes don't have automatic height adjustment, which is the thing they should actually fix. In any event, shadow DOM is just a worse version of scope selectors. There's not really a good use for it now that you can just do a style reset on a donut selector inside an import layer. It can all be done declaratively with CSS instead of using an imperative JS API that has a ton of gotchas.
  - jakelazaroff 3y ago
    There are a lot of things you can do with shadow DOM that you can’t with iframes or scope/donut selectors: - transclude other elements (technically you can with iframes, but hopefully it’s clear why making something like this breadcrumb component would be extremely awkward [1]) - control and react to the display of child elements via <slot>s - call methods on custom element objects etc etc. It’s fine if it doesn’t solve any problems you personally have, but that doesn’t mean it’s not useful. [1] https://shoelace.style/components/breadcrumb https://shoelace.style/components/breadcrumb
    - earthboundkid 3y ago
      Transclusion can totally be done with CSS now. That’s a donut selector. The other things are just plain old JavaScript and have nothing to do with Shadow DOM. Yes, they can be done with customElement, but they can also just be done without it.
      - jakelazaroff 3y ago
        I think I’m going to bow out because it’s clear this discussion isn’t going anywhere, but you should look up what transclusion means because it makes no sense to say that you can do it in CSS.
        earthboundkid 3y ago
        Transclusion means that .a in this can escape the Shadow DOM: <my-element><div class="a">Transcluded content</div></my-element> To do the same thing in CSS you would do <div class="myelement"><div class="slot"><div class="a">Transcluded content</div></div></div> @scope (.myelement) to (.slot) { /* rules that apply to .myelement but not .a */ }).
- EnergyAmy 3y ago
  You wouldn't, but shadowroot is bad design for that. What's wrong with bootstrap or any other number of of existing frameworks? I don't want to include a button and have it stick out like a sore thumb because it ignores my page's styles. ::part() is a stupid hack to make up for a bad approach. If you want to include something "as-is" (i.e. the demos you mention), use iframes. If you want to include a component like a button, use any of the existing frameworks that work just fine. Trying to build a button that pretends to be a browser-native component but actually isn't is a terrible idea.

jakelazaroff 3y ago

How would you build, say, a component library like Shoelace [1] using iframes? [1] https://shoelace.style/ https://shoelace.style/

earthboundkid 3y ago
You could use srcdoc="..." to simulate a component, except that iframes don't have automatic height adjustment, which is the thing they should actually fix. In any event, shadow DOM is just a worse version of scope selectors. There's not really a good use for it now that you can just do a style reset on a donut selector inside an import layer. It can all be done declaratively with CSS instead of using an imperative JS API that has a ton of gotchas.
- jakelazaroff 3y ago
  There are a lot of things you can do with shadow DOM that you can’t with iframes or scope/donut selectors: - transclude other elements (technically you can with iframes, but hopefully it’s clear why making something like this breadcrumb component would be extremely awkward [1]) - control and react to the display of child elements via <slot>s - call methods on custom element objects etc etc. It’s fine if it doesn’t solve any problems you personally have, but that doesn’t mean it’s not useful. [1] https://shoelace.style/components/breadcrumb https://shoelace.style/components/breadcrumb
  - earthboundkid 3y ago
    Transclusion can totally be done with CSS now. That’s a donut selector. The other things are just plain old JavaScript and have nothing to do with Shadow DOM. Yes, they can be done with customElement, but they can also just be done without it.
    - jakelazaroff 3y ago
      I think I’m going to bow out because it’s clear this discussion isn’t going anywhere, but you should look up what transclusion means because it makes no sense to say that you can do it in CSS.
      - earthboundkid 3y ago
        Transclusion means that .a in this can escape the Shadow DOM: <my-element><div class="a">Transcluded content</div></my-element> To do the same thing in CSS you would do <div class="myelement"><div class="slot"><div class="a">Transcluded content</div></div></div> @scope (.myelement) to (.slot) { /* rules that apply to .myelement but not .a */ }).
EnergyAmy 3y ago
You wouldn't, but shadowroot is bad design for that. What's wrong with bootstrap or any other number of of existing frameworks? I don't want to include a button and have it stick out like a sore thumb because it ignores my page's styles. ::part() is a stupid hack to make up for a bad approach. If you want to include something "as-is" (i.e. the demos you mention), use iframes. If you want to include a component like a button, use any of the existing frameworks that work just fine. Trying to build a button that pretends to be a browser-native component but actually isn't is a terrible idea.