Is this a bug?

[cletusw]

I'm seeing some weird Shadow DOM styling inconsistencies between Chrome 36 Stable and Chrome Canary. Given this setup:

  <multiple-shadows>

    <h5 class="match">Matches</h5>

    <h5>Doesn't Match</h5>

  </multiple-shadows>

  <script>

    var host = document.querySelector('multiple-shadows');

    host.createShadowRoot().innerHTML = '\

      <style> \

        ::content :not(.match) { \

          display: none; \

        } \

      </style> \

      <h4>Second-level shadow</h4> \

      <content></content> \

    ';

    host.createShadowRoot().innerHTML = '\

      <h4>First-level shadow</h4> \

      <shadow></shadow> \

    ';

  </script>

Canary renders as expected, producing:

First-level shadow

Second-level shadow

Matches

Chrome 36, however, gives:

First-level shadow

Matches

If I prefix the '::content' selector with 'content' ('content::content'), however, then it works as in Canary. It looks like the styles that the first (older) shadow root brings are being executed in the context of the second shadow root and are applying to things coming through its <shadow> tag (which is why forcing the CSS to only apply to <content> tags fixes the symptom).

Is this a bug? Or is this known old functionality that has been changed in Canary?

Here's the jsbin. And here's same problem using Polymer (sometimes you have to click "Run with JS" after the page loads for platform.js to load correctly).

Note: This is not caused by the :not() selector. If you remove it and add the match class to the <h4>, the <h4> still gets hidden.

[Steve Orvell]

Yes, this is a bug that's been fixed and will be corrected in the next version of Chrome (crbug.com/355674).

The `::content` pseudo-element from the first shadowRoot is matching `<shadow>` in the second shadowRoot and it should not because of style scoping.

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/36efbaad-d5ec-4003-8292-b6d9ea9414fa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Clayton Watts]

Good to know. Thanks!