CSS Encapsulation Limitations in Polymer and Its Shadow DOM

Question

Issue

In working with the polymer project I found that their page on their Shadow DOM polyfill had a set of known limitations http://www.polymer-project.org/platform/shadow-dom.html#known-limitations.

The first limitation on the list was :

Research

I hadn't seen any encapsulation issues on some of the simple tests I had run. I have one jsbin, I've kept around to test things. http://jsbin.com/ANeCUv/10/edit .

To test I removed that css import statement from my style tag inside of the polymer template. I noted that the element became unstyled even though the same import was still called in the style tag in the above header. This showed me at least in this case the encapsulation prevented the jquery-ui.css from styling the Shadow DOM of my element.

I decided to research the issue more specifically, and found a few references, like this one in the comments of a styling guide http://www.polymer-project.org/articles/styling-elements.html

I tested again with an older version of IE and confirmed that css was bleeding in from styles referenced outside of the element.

I understand the design of polymer and its polyfills, is to make newer web technologies accessible, and allow unsupported features in older browsers to be supported with older techniques or failover gracefully. So I understand how this issue wold be viewed as a limitation of the Shadow DOM polyfill.

Other than this issue with support for older browsers, I have not been able to find other encapsulation issues. Though the "CSS encapsulation is limited" is a very generic label if the only specific known limitation is incompatibility with older browsers.

Summary

Outside of inconsistencies in the Shadow DOM polyfill support in older browsers are their other known issues with CSS Encapsulation?

Answer 1

Most of the time you never run into issues or just need a few tweaks to work under both polyfill and native Shadow DOM.

This bin illustrates two common problems: http://jsbin.com/hugoliyo/2/edit

You'll see the difference if you run that page in Chrome stable vs. FF, Safari, or IE.

The first limitation is that styles from the main page can leak into the polyfill'd shadow dom. That the first example where the div in the element's shadow dom is being styled red. That's because there's no shadow dom boundary preventing the outside style from matching.

The second limitation is seen with the insertion point. The polyfill rewrites the native selector ::content p to be my-element p, which in turn, incorrectly matches the <p> in the shadow dom.

Both issues have workarounds but they take some care. http://www.polymer-project.org/docs/polymer/styling.html talks about how to enforce strict styling and using the polyfill-* selectors to make adjustments under the polyfill.

Hope this helps.