Big difference in handling component css between shadow and shady dom

[Viktor Kojouharov]

Hi,

I have a component that stamps a template and adds the resulting instances into itself, roughly like so:

var inst = this.stamp(null);

Polymer.dom(this.root).querySelector("#container").appendChild(inst.root);

where the component itself looks something like this:

<template>
 <div id="top-container">
   <div id="container"></div>
   <content></content>
 </div>
</template>

Now, up until now, I've only tested things with shady dom, and the only way I could apply any styles to any of these stamped elements was to use the following:

#top-container > ::content .something {}

Upon switching to shadow dom, this selector no longer matches, but the following (which doesn't work in shady dom) does:

#top-container .something {}

Is this a known problem?

[Eric Bidelman]

That first selector works for me under native SD: http://jsbin.com/xejupe/edit?html,output

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/c2fbd688-710a-411f-9269-0c4269fd0d41%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Viktor Kojouharov]

Like I said, the problem occurs when you stamp some content and put it into the container. That is to say, the content of the component has to contain a template, the component is a templatizer, and essentially the first code snippet is run. The contents of the template, which is the content of the component, aren't styled in the same manner in both cases.