6 ms·

Any info on what this is?

quadrature 8y ago
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://developer.mozilla.org/en-US/docs/Web/Web_Components/...
porsager 8y ago
It enables you to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://developer.mozilla.org/en-US/docs/Web/Web_Components/...
captain_crabs 8y ago
See shadow dom section in here: https://github.com/w3c/webcomponents/ https://github.com/w3c/webcomponents/ which specified most of docs are maintained in here: https://dom.spec.whatwg.org/ https://dom.spec.whatwg.org/ And as for what it is, you know how a given web page has global css/query selector scope? Shadow dom is like a membrane in there, where styles and other things don't go in (unless you explicitly poke a hole). It's like a whole new document that you can nest inside an existing document. It's encapsulation inside browsers
- Waterluvian 8y ago
  I wasn't aware of being able to explicitly allow in some css. It sounds like a powerful way to make reusable components where some css can't be overridden because it would break the component (eg. Layout, shape) while allowing other parts to be overridden (colour, size, font, etc.)
- karlshea 8y ago
  This is exciting, it would hugely simplify a product I work on that we have to embed with an iframe. If we could use this instead that would be a lot of scrolling and message passing and resizing code that could just go away
  - spankalee 8y ago
    Use it now, the polyfills are really good for older browsers.
    - karlshea 8y ago
      Hmm good to know I’ll definitely look into it!
    - bzbarsky 8y ago
      They are? Polymer has a tendency to get confused by its own loading process and go into infinite loops. Are there any other shadow DOM polyfills out there? (And last I checked, Polymer was polyfilling the old proposal, not the one that is currently being implemented in browsers.)
      - spankalee 8y ago
        I yet ever heard of infinite loops in loading. Do you have an open issue? The webcomponentsjs package has polyfilled the v1 Web Components specs for over a year. Polymer 2.x was the version that used the new specs instead of the older v0 specs.
        bzbarsky 8y ago
        > I yet ever heard of infinite loops in loading. Do you have an open issue? https://bugzilla.mozilla.org/show_bug.cgi?id=1256031 https://bugzilla.mozilla.org/show_bug.cgi?id=1256031 has an example of a page using polymer that runs into this problem.
        spankalee 8y ago
        Did anyone file an issue on the polyfills? We're not going to be aware of issues on Firefox's bug tracker... Also, that's an old version of the polyfills, before Polymer 2.0, it might have been fixed on our end quite a while ago.
- blackbear_ 8y ago
  to an outsider, web development looks like hacks upon hacks upon hacks upon hacks upon ......
  - deleted 8y ago
    [deleted]
  - jhanschoo 8y ago
    Unfortunately, this is what happens when you need to ensure backward compatibility with the lowest denominator...
  - nol13 8y ago
    this is pretty much how i feel about computing in general if it works, it works, though.
tomkinson 8y ago
Imagine you had a chat, and 30 videos in the chat. 30 play buttons 30 vulume sliders 30 pause buttons Etc That's a lot in the DOM. So intead you put the html5 video player components in shadowDOM and reference as needed. Only have them once then.
- sametmax 8y ago
  But they don't have the same state. Some of them are half run. Some of them have sound off. Some are paused or playing. One is selected. Is the state separated from structure ?
  - egeozcan 8y ago
    State can be orchestrated from the parent document. Custom elements can implement their own APIs.
    - sametmax 8y ago
      So what's the difference with a webcomponent ?
- sime2009 8y ago
  ShadowDOM and the other parts of the web components specs don't do any of that kind of de-duplication which you describe, sorry.
tzahola 8y ago
TLDR: JS devs discovered view encapsulation. By habit, they’ve decided to ignore any prior implementation of this pattern, and chose a completely new, unintuitive nomenclature (compare: “polyfill”).
- voltagex_ 8y ago
  What would you consider a better implementation?
  - kuschku 8y ago
    Androids Toolkit is much more powerful because it allows custom layouting engines. If web components was just a port of the Android toolkit we'd have canvas with accessibility, CSS grid as library not in the browser, and usable recycler views.
    - spankalee 8y ago
      Custom layout is a complete separate spec, and being intended in Chrome right now. Web Components don't have to solve every known problem, some things are also solvable on their own.
      - kuschku 8y ago
        The whole point is that you get many more features. On Android, every element just knows its children, attributes, can process events, and can draw itself to a canvas or describe itself to a screenreader. This means designing a new layout is just another element that then knows how to position its children. An element that can change opacity slowly of its elements, or filter the text, is also just another element. You can do everything with it and still be accessible. And I'm not sure if you've ever tried implementing a RecyclerView on the web? It's absolute horror. Either you have to entirely hijack scrolling and thereby kill flinging and smooth scroll of the browser, or you have to use a lot of JS to at least make it seem real.
- cdaringe 8y ago

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://developer.mozilla.org/en-US/docs/Web/Web_Components/...

porsager 8y ago

It enables you to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://developer.mozilla.org/en-US/docs/Web/Web_Components/...

captain_crabs 8y ago

See shadow dom section in here: https://github.com/w3c/webcomponents/ https://github.com/w3c/webcomponents/ which specified most of docs are maintained in here: https://dom.spec.whatwg.org/ https://dom.spec.whatwg.org/ And as for what it is, you know how a given web page has global css/query selector scope? Shadow dom is like a membrane in there, where styles and other things don't go in (unless you explicitly poke a hole). It's like a whole new document that you can nest inside an existing document. It's encapsulation inside browsers

Waterluvian 8y ago
I wasn't aware of being able to explicitly allow in some css. It sounds like a powerful way to make reusable components where some css can't be overridden because it would break the component (eg. Layout, shape) while allowing other parts to be overridden (colour, size, font, etc.)
karlshea 8y ago
This is exciting, it would hugely simplify a product I work on that we have to embed with an iframe. If we could use this instead that would be a lot of scrolling and message passing and resizing code that could just go away
- spankalee 8y ago
  Use it now, the polyfills are really good for older browsers.
  - karlshea 8y ago
    Hmm good to know I’ll definitely look into it!
  - bzbarsky 8y ago
    They are? Polymer has a tendency to get confused by its own loading process and go into infinite loops. Are there any other shadow DOM polyfills out there? (And last I checked, Polymer was polyfilling the old proposal, not the one that is currently being implemented in browsers.)
    - spankalee 8y ago
      I yet ever heard of infinite loops in loading. Do you have an open issue? The webcomponentsjs package has polyfilled the v1 Web Components specs for over a year. Polymer 2.x was the version that used the new specs instead of the older v0 specs.
      - bzbarsky 8y ago
        > I yet ever heard of infinite loops in loading. Do you have an open issue? https://bugzilla.mozilla.org/show_bug.cgi?id=1256031 https://bugzilla.mozilla.org/show_bug.cgi?id=1256031 has an example of a page using polymer that runs into this problem.
        spankalee 8y ago
        Did anyone file an issue on the polyfills? We're not going to be aware of issues on Firefox's bug tracker... Also, that's an old version of the polyfills, before Polymer 2.0, it might have been fixed on our end quite a while ago.
blackbear_ 8y ago
to an outsider, web development looks like hacks upon hacks upon hacks upon hacks upon ......
- deleted 8y ago
  [deleted]
- jhanschoo 8y ago
  Unfortunately, this is what happens when you need to ensure backward compatibility with the lowest denominator...
- nol13 8y ago
  this is pretty much how i feel about computing in general if it works, it works, though.

tomkinson 8y ago

Imagine you had a chat, and 30 videos in the chat. 30 play buttons 30 vulume sliders 30 pause buttons Etc That's a lot in the DOM. So intead you put the html5 video player components in shadowDOM and reference as needed. Only have them once then.

sametmax 8y ago
But they don't have the same state. Some of them are half run. Some of them have sound off. Some are paused or playing. One is selected. Is the state separated from structure ?
- egeozcan 8y ago
  State can be orchestrated from the parent document. Custom elements can implement their own APIs.
  - sametmax 8y ago
    So what's the difference with a webcomponent ?
sime2009 8y ago
ShadowDOM and the other parts of the web components specs don't do any of that kind of de-duplication which you describe, sorry.

tzahola 8y ago

TLDR: JS devs discovered view encapsulation. By habit, they’ve decided to ignore any prior implementation of this pattern, and chose a completely new, unintuitive nomenclature (compare: “polyfill”).

voltagex_ 8y ago
What would you consider a better implementation?
- kuschku 8y ago
  Androids Toolkit is much more powerful because it allows custom layouting engines. If web components was just a port of the Android toolkit we'd have canvas with accessibility, CSS grid as library not in the browser, and usable recycler views.
  - spankalee 8y ago
    Custom layout is a complete separate spec, and being intended in Chrome right now. Web Components don't have to solve every known problem, some things are also solvable on their own.
    - kuschku 8y ago
      The whole point is that you get many more features. On Android, every element just knows its children, attributes, can process events, and can draw itself to a canvas or describe itself to a screenreader. This means designing a new layout is just another element that then knows how to position its children. An element that can change opacity slowly of its elements, or filter the text, is also just another element. You can do everything with it and still be accessible. And I'm not sure if you've ever tried implementing a RecyclerView on the web? It's absolute horror. Either you have to entirely hijack scrolling and thereby kill flinging and smooth scroll of the browser, or you have to use a lot of JS to at least make it seem real.
cdaringe 8y ago