Shadow Boundary - Current Supported Browser?

[Kay]

I just forked and played with a few Polymer examples on Plunker and noticed that the CSS styles of the parent document still bled into Polymer elements; I'm on the latest Chrome. I'm wondering if I need to use Canary to enjoy this feature (Shadow Boundary), and if there are other browsers aside from Canary that currently support this?

[Eric Bidelman]

The current Chrome stable defaults to using the Shadow DOM polyfill because it contains an old implementation (e.g. webkitCreateShadowRoot). This means outside selectors may apply to internal nodes in your element. That's what you're seeing.

To truly enjoy the shadow boundary, enable the "Experimental web platform features" flag in Canary's about:flags. Hopefully the native stuff will ship soon in a browser near you :)

On Wed, Mar 5, 2014 at 2:13 PM, Kay <balancet...@gmail.com> wrote:

I just forked and played with a few Polymer examples on Plunker and noticed that the CSS styles of the parent document still bled into Polymer elements; I'm on the latest Chrome. I'm wondering if I need to use Canary to enjoy this feature (Shadow Boundary), and if there are other browsers aside from Canary that currently support this?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9d5f9800-b38d-4a3e-b13b-d403fe63a29e%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Kay]

Is there any way to stop parent CSS from bleeding in for at least latest Chrome and Firefox? I was under the impression that Polymer can somehow do this?

[Scott Miles]

>> Is there any way to stop parent CSS from bleeding in for at least latest Chrome and Firefox?

Sadly, no.

This is 'lower bound' encapsulation, aka 'my parent scope styles are leaking into me', which is mostly impractical to polyfill in the general case. Native shadow-root (or some other CSS scoping support) is needed from browsers themselves.

>> I was under the impression that Polymer can somehow do this?

'Upper bound' encapsulation, which prevents a custom element's styles from affecting it's parent scope, is currently polyfilled, and there are some experiments around polyfilling 'lower bound' encapsulation in restricted scenarios.

Scott

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e8b4c3ed-4740-4f71-b513-166a2a7b08b7%40googlegroups.com.

[Kay]

I'd postulate that lower bound encapsulation can be polyfilled using iframe, no? Has any attempt been made in this direction, or is it a bad idea?

[Kay]

Docs on the site also mentioned that there's something called "Forcing strict styling" which can be enabled to give the lower bound encapsulation effect, but I've tried it and it didn't work:

http://plnkr.co/edit/RbsrNmiSY8ECNTczI27i?p=preview