Trouble styling children of redistributed content

[Jan Miksovsky]

I've hit an oddity and would like some indication as to whether it's a bug.

See http://jsbin.com/hijat/1/edit. This defines two elements: the first element colors certain content nodes in red, and second element simply reprojects its content into an instance of the first element.

My question pertains to the semantics of ::content styling. Previously, I'd assumed that ::content matched a single <content> insertion point. Lately, however, I've noticed that ::content seems to match *any number* of content insertion points. That is, it can be used to style not only directly distributed content, but redistributed content as well. That's awesome! I need that in a number of places.

However, the jsbin shows at least one case where styling doesn't seem to work the same when considering redistributed content. I can't actually find a spec for the ::content selector anywhere (where is the real spec?), only some very high-level stuff on polymer-project.org, so I can't pin down how this selector's supposed to work.

Please let me know if this is a bug and I can file it. (The Blink team tends to want bug repro cases to *not* use Polymer, which creates a chore in a case like this to manually compile Polymer markup into JavaScript, so I've held off on filing a bug until it's likely I've actually got a real bug here.)

[John Messerly]

fyi -- the spec for ::content is at http://dev.w3.org/csswg/css-scoping/#content-combinator

(I'll defer to someone more knowledgable to comment on the particular issue and whether it is a bug or not...)

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/9094d0f0-8deb-47b6-a03e-459c9b0d1b7e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rob Dodson]

On Tue, Jun 10, 2014 at 9:26 PM, Jan Miksovsky <j...@quickui.org> wrote:

I've hit an oddity and would like some indication as to whether it's a bug.

See http://jsbin.com/hijat/1/edit. This defines two elements: the first element colors certain content nodes in red, and second element simply reprojects its content into an instance of the first element.

My question pertains to the semantics of ::content styling. Previously, I'd assumed that ::content matched a single <content> insertion point. Lately, however, I've noticed that ::content seems to match *any number* of content insertion points. That is, it can be used to style not only directly distributed content, but redistributed content as well. That's awesome! I need that in a number of places.

I believe that's because there's an implicit * on the left hand side of ::content if you don't specify an element. If your content element had an id of "foo" then you could say:  #foo::content and only match that one content element.

In your second example, red-element is able to style the content passed to it from contains-red-element because it just sees it as content, no different from if it was passed a few divs, like in your first example.

 

However, the jsbin shows at least one case where styling doesn't seem to work the same when considering redistributed content. I can't actually find a spec for the ::content selector anywhere (where is the real spec?), only some very high-level stuff on polymer-project.org, so I can't pin down how this selector's supposed to work.

I don't think there's any built in mechanism to specifically style redistributed content. However, if you at least know your containing element then you can use host-context from within red-element. For example:

:host-context(contains-red-element) ::content .red {

  color: green;

}

http://jsbin.com/zemom/2/edit

 

Please let me know if this is a bug and I can file it. (The Blink team tends to want bug repro cases to *not* use Polymer, which creates a chore in a case like this to manually compile Polymer markup into JavaScript, so I've held off on filing a bug until it's likely I've actually got a real bug here.)

Follow Polymer on Google+: plus.google.com/107187849809354688692

[Steve Orvell]

I believe this is a bug. Filed:

crbug.com/383366

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwCFWMbQO9XY3-1G-meKQzCb3LcnpYsDswD0Q7LH2yDd-w%40mail.gmail.com.

[Steve Orvell]

In particular, ::content matches the element distribution list. Since re-distributed elements are included in that list, they are targetable. A descendant combinator next to ::content needs to work consistently.

[Rob Dodson]

ah yes, looks like a canary bug. The text is red in M36 but back to black in M37 :[

On Wed, Jun 11, 2014 at 8:01 AM, Steve Orvell <sor...@google.com> wrote:

[Jan Miksovsky]

Steve: Thanks for isolating in JS and filing!

Rob/John: Thanks for the info and spec pointer.