Does scoping of CSS and JS already work with Polymer?

Question

Short question:

If I use Polymer does its polyfills scope JS and CSS (e.g. like an iframe)?

Say I have a widget library and I want to use my-widget in multiple versions on the same page, could I wrap every version of this widget in a Polymer element, so the widgets will be executed safely?

Thank you.

Answer 1

Short answer: Yes to scoping, no to JS in a separate context

A core feature of Shadow DOM is CSS/DOM encapsulation. On the Polymer team, we prefer to think of this as "scoping" because when most people hear encapsulation, they automatically think security. Shadow DOM is a not a security boundary and it was never design to be such. It's design to scope DOM subtrees. JS is still executed in the context of the main document.

That said, CSS scoping comes for free with Shadow DOM and per-element APIs come with Custom Elements. When you combine these technologies together (as Polymer does), you get scoping of DOM, CSS, AND JS.

http://www.polymer-project.org/docs/polymer/polymer.html#propertiesmethods http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/