css not working in chrome canary and chrome on nexus tablet

[Tim]

Hi, I have been building a new site with polymer. Looks fine in ff and chrome stable, but canary and chome on my tablet look the css is not getting used. The css is outside the head because I use the vulcanizer --inline to bundle my html, css and js together. You can view the issue by going to mylivechurch.com. Thanks, Tim.

[Eric Bidelman]

Your styles aren't being applied because they're not outside of the element definition. The Shadow DOM boundary is kicking in and preventing outside styles from bleeding in. It works correctly in FF because that is using the SD polyfill. BTW, Chrome stable now has native Shadow DOM. You should be seeing the same issue there as of yesterday.

vulcanizer --inline should be inlining stylesheets into your element but it doesn't move them outside the element. See chromestatus.com as an example. The <style> tags remain in the element.

Are you using an old version of Vulcanizer or doing something else?

On Thu, May 22, 2014 at 8:19 AM, Tim <timtw...@gmail.com> wrote:

Hi, I have been building a new site with polymer. Looks fine in ff and chrome stable, but canary and chome on my tablet look the css is not getting used. The css is outside the head because I use the vulcanizer --inline to bundle my html, css and js together. You can view the issue by going to mylivechurch.com. Thanks, Tim.

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/1069e63c-46d9-47d6-b8e4-e75bff3a8262%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Timothy Willis]

HI Eric, thanks for the response.

I guess my desktop version of chrome hasn't updated and my tablet version has - I thought the app was working fine the other day on my tablet.

I thought it may have something to do with vulcanizer, but I did an npm install -g vulcanizer, re-ran it, and got the same results. I also did a bower update and my polymer and polymer versions say @version: 0.2.3. I have also tried it without the --inline.

thanks
Tim

Tim Willis

[Eric Bidelman]

I assume if you don't run vulcanize it works?

[Timothy Willis]

Actually no, so I guess that would eliminate vulcanize as the issue. I attached the non-vulcanized html file to see if that gives any clues. Thanks for the help.

Tim Willis

[Timothy Willis]

I was looking at the chromestatus.com and how all the li's #shadow-root all have the same <style>...</style> inside them(atleast the three I looked at). I am using styles both inside and outside the custom element to style the custom elements. Are the styles outside the custom elements no longer able to style the "stuff" inside the custom elements?

thanks Tim

Tim Willis

[Eric Bidelman]

On Thu, May 22, 2014 at 6:26 PM, Timothy Willis <timtw...@gmail.com> wrote:

I was looking at the chromestatus.com and how all the li's #shadow-root all have the same <style>...</style> inside them(atleast the three I looked at). I am using styles both inside and outside the custom element to style the custom elements. Are the styles outside the custom elements no longer able to style the "stuff" inside the custom elements?

Correct, unless you use ::shadow and /deep/ to penetrate the shadow dom.

See http://stackoverflow.com/questions/23818788/polymer-custom-element-styles-with-html-imports/23819523#23819523

[Timothy Willis]

Thanks Erik, I believe that is what I was looking for.

Tim Willis