polymer component style inheritance broken in canary (36)

Question

I tried my website (http://fnndsc.github.io/fnndsc.babymri.org/) on the latest canary and many things are messed up.

More importantly, the style is not propagated down to sub-elements anymore. I read around but couldn't find the best pratice to handle that.

How can I tell my polymer element to use the style from it parents. Is there a special flag to turn on?

Up to Chrome 34 it works fine but 35/36 appear to be broken.

Thanks

Answer 1

Chrome 35 unprefixes the new Shadow DOM implementation (blog post) and turns it on by default. Some of what you're seeing could also be differences between native Shadow DOM and the polyfill shimming.

Without having the codebase to look at, there could be any number of things. There have been many updates to Shadow DOM's styling features in the last few months.

Things to note from what I saw on your site

• @host { :scope {display: block;} } -> :host {display: block; }
• move stylesheets an element relies on into the <polymer-element>.
• applyAuthorStyles is gone. If you were using it, the only way to take on styles from the outer page is to use ::shadow, /deep/, or include shared styles in the <polymer-element> the needs it.
• If you're using <content> and distributed nodes, make sure you're using the ::content pseudo element

Here are some up to date resources for styling:

• http://www.polymer-project.org/docs/polymer/styling.html
• http://www.polymer-project.org/articles/styling-elements.html