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.
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