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.
On Mon, Jun 9, 2014 at 8:10 AM, <[email protected]> wrote:
> 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
>
> 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 [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/09244304-8405-4c5c-89dd-a9870ec04d53%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/09244304-8405-4c5c-89dd-a9870ec04d53%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZjE_Aniox6717raCZ_A-LOZHPwmMMbNerEtb%2BtOJ_dZgw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
