Style module issues in Edge/IE11

[nicolasr75]

Description

The PSK includes a shared styles module that only sets standard CSS properties which seem to work in all supported browsers. Since I had problems in my real project with IE11/Edge, I tried to repro the problem with a fresh PSK and just changing the text color. I don't know whether I have to include something special for IE11/Edge? I did only find the note that custom-style would be needed in document level styles but that is not the case here.

Steps to Reproduce

• Create a new PSK project
• Open shared-styles.html and comment out the color property settings for the .card class and the h1 tag.
• Add :root { color: red; }

Expected Results

In all browsers the titles and texts in the views should be red.

Actual Results

Chrome/FF behave as expected. IE11/Edge ignore the setting, the text color stays black

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Polymer: make workBench live with toollkit #2.0.0-rc.7
• webcomponents: webcomponentsjs#1.0.0-rc.11

[web-padawan]

FWIW, :root is deprecated and should be replaced in custom-style and elements styles with html and :host > * respectively, as you can find in the upgrade guide.

[nicolasr75]

@web-padawan Thanks, that solves the problem.
I have to say, that I didn't read the upgrade guide at this point because I did not upgrade any old project and the Polymer 2.0 documentation itself uses the :root selector here

https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-the-host-element

This really should be updated then.

[nicolasr75]

Sorry, it looks like I messed this up. The docs use :host not :root!
I was just wondering that there is no mention of :host > * as described in the upgrade guide.

[arthurevans]

Good point. @azakus @sorvell should we be documenting :host > * in the doc on custom properties? (And do we have some magic special processing for this in the shim? I would think that :host > * wouldn't work in the shim unless it happens to match a polymer element... Unless we treat it as :host, but with higher priority.

I hope some of that made sense.

@katejeffreys might be something good to add.

[equinusocio]

https://www.polymer-project.org/2.0/docs/upgrade#replace-root-selectors

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!