Polymer: custom element is not hidding markup, css

Question

When I first read the basics of Polymer I thought everything (html, css, js) inside a polymer tag was hidden into shadow DOM. After practicing a bit with a simple example, I've realized all tags I add to a custom element are visible as a Light DOM element and are not hidden!

I've tried an old version of Polymer which seems to just do what I expected! but then I have some browser compatibility problems. I'm quite confused with all of this.

If everything inside a custom element is supposed to be hidden into Shadow DOM why is my css and markup "exposed" and not hidden nor encapsulated?

Image showing an example using an OLD version of Polymer

Image showing the same example with the CURRENT version where styles and markup are visible

Thanks

Answer 1

What you're seeing is the Shadow DOM polyfill and not native Shadow DOM. Under the polyfill, Polymer renders nodes you've defined in Shadow DOM as children of the element. There's no way to truly mimic the encapsulation features of SD. The polyfill does what it can.

To see native Shadow DOM, use Chrome Canary and turn on the "experimental web platform features" flag in about:flags. The good news is that when native Shadow DOM is available in the browser (very soon for Chrome, soonish for FF), Polymer will use it and your elements will indeed by encapsulated.

Background:

Chrome released an early version of Shadow DOM in M25. This has since been deprecated. It's quite possible that the early version of Polymer you're talking about is using the old API (webkitCreateShadowRoot).