Local DOM rules with multiple selectors are shimmed incorrectly

[arturparkhisenko]

Description

Shared styles to global scope if we used multiple selectors (one usual, and one with ::content) in one CSS rule.
Or i have to write only selectors ::content selector if i'll use dynamically added content (elements).
Maybe related to this fix d9f3dda
Also it's only for shady DOM ;)

Live Demo

http://plnkr.co/edit/9RFUOiZNOsL0WNJ16iqT?p=preview

Steps to Reproduce

1. Use/Write multiple selectors in one rule, in second selector without :host before ::content.
   • example: button, ::content button {}
2. You'll see affected usual non-components elements and dynamically added elements inside components.

Expected Results

button.custom-element-2:hover,  custom-element-2 button:hover {
  background-color: cadetblue;
}

Actual Results

button.custom-element-2:hover,  button:hover {
  background-color: cadetblue;
}

Browsers Affected

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

Versions

• Polymer: v1.4.0
• webcomponents: v0.7.20

[arthurevans]

OK, I can see the core issue here, but I think the reported issue is unrelated to :host, it's related to the comma.

There are two errors in the original plunk: One of the custom elements has a content element outside its template, so children weren't getting distributed. And both were using Polymer.dom(this).node.appendChild instead of Polymer.dom(this).appendChild. (Polymer.dom(this).node == this, I think, so it's a no-op).

This rule:

      button,
      ::content button {
        background-color: red;
      }

Gets incorrectly shimmed as:

button.custom-element, button {
  background-color: red;
}

[sorvell]

Can confirm this issue. The correct shimming for this case is:

button.custom-element, custom-element button {
  background-color: red;
}

The automatic ::content shimming is getting confused here. We'll look into addressing this but a workaround you can use in the meantime is to include a scoping selector before the ::content. For example,

button,
:host ::content button {
    background-color: red;
}