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
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.)
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.)
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.
https://bugzilla.mozilla.org/show_bug.cgi?id=1256031 has an example of a page using polymer that runs into this problem.
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.
if it works, it works, though.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/...
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.
Is the state separated from structure ?
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.
Web Components don't have to solve every known problem, some things are also solvable on their own.
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.