css bleeding through shadow boundary (firefox)

[christoph...@gmail.com]

Hi,

I am new to polymer and I am not sure if I am wrong or if it's a bug. This example is fine in chrome 35, not in firefox 29. In firefox, the custom element will be styled as the normal div.

It will work if I change the inlined template css with:

  <style>

       :host .content {

         width: 50px;

         height: 50px;

         background-color: pink;

         border: solid 1px green;

       }

       x-component .content {

         width: 50px;

         height: 50px;

         background-color: pink;

         border: solid 1px green;

       }

  </style>

but not if I use this style:

  <style>

       :host .content, x-component .content {

         width: 50px;

         height: 50px;

         background-color: pink;

         border: solid 1px green;

       }

  </style>

I dont understand why the the css is bleeding through the shadow boundary in firefox and not in chrome; and I dont understand what is happening with my workaround using the tag name.

Can someone give me some hint?

Christophe

[Steve Orvell]

The ShadowDOM polyfill does not support css out of the box. Styling does leak through to shadowRoots. This is a current limitation.

By using platform.js, you get access to our css shim for ShadowDOM. While it does not address lower bound encapsulation, it'll make basic styling work seamlessly. If you use Polymer and specifically `polymer-element` to create your elements, the css shim is used automatically. To make use of the shim manually, you can add this line:

    Platform.ShadowCSS.shimStyling(template.content, 'x-component');

You should do this once. It'll find styles in the template and scope them by the custom element's name. This allows you to be able to use :host, for example.

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/09244304-8405-4c5c-89dd-a9870ec04d53%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[christoph...@gmail.com]

Thanks Steve! It works now!