differences between shadow and shady dom when styling stamped content

[urandom]

Hi,

There is a discrepancy when trying to style a particular type of elements. Consider the following "pseudo" component:

<component-boilerplate>
   ...
   <inner-component>
     <template>
       <span class="title">test</span>
     </template>
  </inner-component>
</component-boilerplate>

<inner...>
    ...
    <style>
      /* Shadow dom only */
      #container .title {
           color: red
      }

     /* Shady dom only */
    #container > ::content .title {
       color: blue    
    }
    </style>
    <div id="container">
        <content></content>
    </div>
    <script>
     ....
     var inst = this.stamp(null);
     Polymer.dom(this.root).querySelector('#container').appendChild(inst.root);
   </script>
</...>

When the contents of the template are inserted into the container of the inner component by it (it uses the templatizer behavior to stamp the content), it appears that you can't style the inner elements (the .title in this case) via a single selector. Polymer acts as if the stamped content is still in the content element, whereas SD correctly finds the new elements under #container itself.

[dfreedm]

Hi, can you provide a JSBin containing a set of reproducible steps? See CONTRIBUTING.md for details.

In particular, I think your styles are not being processed by the Polymer style mechanisms for Shady DOM. A working reproduction would be very helpful to see if this is a bug or user error. Thanks!

[TimvdLippe]

Closing per above comment.