[ShadyCSS] Too specific slotted(*) causes unexpected styling

[tpluscode]

Here's an example of what I've found when styling in Polymer, although I assume the problem is with shady polyfill itself

I have a container element with a slot and default style for all slotted elements. It's important that I select the slotted element by id

<dom-module id="my-container">
   <template>
      <style>
         section#sn :slotted(*) {
            color: red;
         }
      </style>
      <section id="sn" class="sn">
         <slot></slot>
      </section>
   </template>
</dom-module>

In another element I distribute a node and apply same rule in Light DOM

<dom-module>
   <template>
      <style>
         p {
            color: green;
         }
      </style>
      <my-container>
         <p>Green text</p>
      </my-container>
   </template>
</dom-module>

Expected behaviour

The paragraph should be green

Actual behaviour

In browsers using polyfill it will be red.

Attached is the above example

my-app.html.zip

Workaround

When selecting the slotted element one has to be very careful not be too specific. Above even if changed to using class section.slot ::slotted(*) alone won't help without making the selector in my-app more specific like.

my-container p { 
   color: green;
}

Otherwise the naked p selector will still be too little specific.

[dfreedm]

Minimal repro: https://jsbin.com/capukigexa/edit?html,output

[stale[bot]]

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[bot]]

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!