Combining complex :host and ::content selectors

[Sergey Shevchenko]

Hi there,

I have the following Polymer element definition:

<polymer-element name="my-element" attributes="attr">

  <template>

    <style>

      @import url("my_element.css");

    </style>

    <content select=":nth-child(1)"></content>

    ...

</polymer-element>

What I need is a CSS selector that would match my <content>, but only when the `attr` attribute on the host element is "xyz". I've tried all these:

:host[attr="xyz"] content[select=":nth-child(1)"]::content > * {

  font-style: italic;

}

:host[attr="xyz"] > content[select=":nth-child(1)"]::content > * {

  font-style: italic;

}

content[select=":nth-child(1)"]::content[attr="xyz"] > * {

  font-style: italic;

}

None of these worked. At the same time, each of the two sub-selectors works individually:

:host[attr="xyz"] {

  font-style: italic;

}

content[select=":nth-child(1)"]::content > * {

  font-style: italic;

}

So I'm just looking for the right way to combine them.

Thanks!

[Steve Orvell]

:host may only be qualified via parens, like this: :host([attr="xyz"])

So, this should work:

:host([attr="xyz"]) content[select=":nth-child(1)"]::content > * {

  font-style: italic;

}

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/39068648-7a20-4fd5-bbfa-79bdb1715671%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Steve Orvell]

Here's a simplified example:

http://jsbin.com/aXojEti/1/edit

[Justin Fagnani]

On Tue, Feb 4, 2014 at 4:22 PM, Steve Orvell <sor...@google.com> wrote:

Here's a simplified example:

http://jsbin.com/aXojEti/1/edit

On Tue, Feb 4, 2014 at 4:20 PM, Steve Orvell <sor...@google.com> wrote:

:host may only be qualified via parens, like this: :host([attr="xyz"])

So, this should work:

:host([attr="xyz"]) content[select=":nth-child(1)"]::content > * {

  font-style: italic;

}

I think this would give a very different behavior than intended. Sergey is trying to change layout based on an attribute on the host, if he instead matching on that attribute on any ancestor, then it can't compose.

Why doesn't :host[...] work? :host and pseudo-classes work.

 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgWa_-fAsSRALkhbFWJPHTHxZwJ3SSUei9BPEkfWyQ7Ng%40mail.gmail.com.

[Daniel Freedman]

:host[ .. ] doesn't work because the rule crosses the shadowdom style encapsulation boundary.

:host( [ .. ] ) is allowed to cross the boundary.

:host( ) was changed to only look at the host element, removing the ancestor walk (that functionality was given to ::ancestor(), we're working on a better name).

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

[Justin Fagnani]

On Tue, Feb 4, 2014 at 4:47 PM, Daniel Freedman <dfr...@google.com> wrote:

:host[ .. ] doesn't work because the rule crosses the shadowdom style encapsulation boundary.

:host( [ .. ] ) is allowed to cross the boundary.

:host( ) was changed to only look at the host element, removing the ancestor walk (that functionality was given to ::ancestor(), we're working on a better name).

Ah, much more clear now. Thanks!

 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAgRwLgoPaktweHfJmcsm5VH2NSNz-92xUCZ%2BMPevo70Tw%40mail.gmail.com.

[Eric Bidelman]

Should people be using position selectors (e.g. :nth-child) for insertion point selects? I thought those were going to be unsupported soon.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAEKsHmAckAB0J5ggn0RUOF8Lp3x%2BgFAidazo5RKbbiz8tq0Lag%40mail.gmail.com.

[Eric Bidelman]

Shadow DOM styling moves at lightning speeds! Tracking bug to get articles updated for :host()/:ancestor():

https://github.com/Polymer/docs/issues/242

[Sergey Shevchenko]

What is supposed to replace :nth-child then? What I want is:

<my-element>

  <div></div>

  <div></div>

</my-element>

and then inject something between the two <div>s in the element's definition.

Anyway, :host([attr="xyz"]) content[select=":nth-child(1)"]::content > * doesn't work for me either - I've tried in Dartium 31 and 32, are those too much behind? I've ended up with this awful hack for now:

<polymer-element name="my-element" attributes="attr">

  <template>

    <style>

      @import url("my_element.css");

    </style>

    <dev id="marker" attr="{{attr}}"></dev>

    <content select=":nth-child(1)"></content>

    ...

</polymer-element>

#marker[attr="xyz"] ~ content[select=":nth-child(1)"]::content > * {

  font-style: italic;

}

[Steve Warren]

I'm having trouble using :nth-child in a content select and in researching came across this thread. Hearing that nth-child may become unsupported is a concern for me as well. Is that the case? If not, are their current issues around nth-child that I can review as I'm having trouble applying it.

[Sergey Shevchenko]

Not exactly an answer to the posed :nth-child question, but I just wanted to confirm that the following selector works for me now, at a minimum with Dartium 33 and Chrome 34 dev:

:host([attr="xyz"]) content[select=":nth-child(1)"]::content > * {

  font-style: italic;

}

[Sergey Shevchenko]

...And the support seems to be officially gone now in Chrome 36 canary. I'm still very interested to know the motivation and a suggested replacement.
 The use case I posted earlier is still relevant for us at Spark. For now I've added explicit attributes to the two div's in the example and select based on that inside the polymer element, but it's a compromise.

[Scott Miles]

>> ...And the support seems to be officially gone now in Chrome 36 canary. I'm still very interested to know the motivation and a suggested replacement.

This is completely out of our (Polymer) control. IIRC, the change was something Apple and Mozilla jointly insisted on, here is some information:

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

Scott

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/25debe26-2d9e-4a6d-b3fe-e87f1df77109%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sergey Shevchenko]

I see... It's very unfortunate then.