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. <http://jsbin.com/titogaya/1/edit> And here's same
problem using Polymer <http://jsbin.com/tiwivoyu/1/edit> (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.
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 [email protected].
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.
