Canary shadowdom styling issue

[akhile...@gmail.com]

Running into an issue while using ^^ symbols for styling Shadow DOM using Canary with "Experimental Web Platform" enabled. The styles are not penetrating through to the child nodes. This seems to work fine with polyfill.

Here's the example: http://jsbin.com/xevuyuju/9/edit

Is there something that I am missing or is that a bug with native Shadom DOM implementation?

[Daniel Freedman]

Works for me with Version 35.0.1873.0 canary, but not in Version 35.0.1874.2 canary

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/09c57583-4947-46d7-b446-ecc8b1f0939d%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Steve Orvell]

^ has changed to /shadow/

^^ has changed to /shadow-all/

Here's an example to see what's working:

http://jsbin.com/pofefune/1/edit

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAi-3n85qJAf1_CbW4mksaFiaqe15DXjMNUvtEvPXkpFwA%40mail.gmail.com.

[Daniel Freedman]

The Shadow styling syntax has been split out into its own spec in the css working group, which has decided on /shadow/ and /shadow-deep/, (which is just a search/replace of ^ and ^^):

http://dev.w3.org/csswg/shadow-styling/

[akhile...@gmail.com]

Thanks guys! /shadow-deep/ selector solves the problem on canary and also with latest polyfills.

But I have just encountered another issue with latest canary and native shadow dom. The @font-face definitions are not penetrating into all the child elements and their shadow doms. It seems to be only getting applied if @font-face is defined at the global document level. Is that expected or a bug?

[Steve Orvell]

Yeah, that's a known bug:

crbug.com/336876

@font-face needs to be global right now. You can, for example, include rules with @font-face inside a style element that you include in an HTMLImport.