[Bug 23636] [Shadow]: selectors in style elements in shadowRoots should match in sibling shadowRoots

https://www.w3.org/Bugs/Public/show_bug.cgi?id=23636

Elliott Sprehn <esprehn@gmail.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |esprehn@gmail.com

--- Comment #2 from Elliott Sprehn <esprehn@gmail.com> ---
This means that component authors need to be really careful how they write
their CSS and also of how they structure the markup inside their widgets.

Previously you could do:

<x-expander>'s ShadowRoot:

<style>
  div { display: none; }
  .expanded { display: block }
</style>

<button>Expand me</button>
<div>
  <content></content>
</div>
<script>
// onclick of the button add "expanded" to the div.  
</script>

but this component author has just prevented people from inheriting from his
component because now they can't use <div> as it'll be display: none so they
have to add even more CSS to undo this.

It also means you need to be super careful not to collide with your superclass
with class names so even though you can use the same id in both of them like
#container and then this.$.container in polymer, you can't style them
separately because the CSS ends up applying to both.

This doesn't seem like a good change, it breaks the encapsulation in a way that
now authors need to constantly be careful with what CSS they use.

-- 
You are receiving this mail because:
You are the QA Contact for the bug.

Received on Thursday, 16 January 2014 22:59:41 UTC