...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.
On Thursday, February 27, 2014 11:19:36 PM UTC-8, Sergey Shevchenko wrote:
>
> 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;
> }
>
> On Thursday, February 27, 2014 10:00:02 AM UTC-8, Steve Warren wrote:
>>
>> 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.
>>
>> On Tuesday, February 4, 2014 5:00:44 PM UTC-8, Sergey Shevchenko wrote:
>>>
>>> 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;
>>> }
>>>
>>> On Tuesday, February 4, 2014 4:55:05 PM UTC-8, Eric Bidelman wrote:
>>>>
>>>> Should people be using position selectors (e.g. :nth-child) for
>>>> insertion point selects? I thought those were going to be unsupported soon.
>>>>
>>>>
>>>> On Tue, Feb 4, 2014 at 4:50 PM, Justin Fagnani <[email protected]>wrote:
>>>>
>>>>>
>>>>> On Tue, Feb 4, 2014 at 4:47 PM, Daniel Freedman <[email protected]>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!
>>>>>
>>>>>
>>>>>>
>>>>>>
>>>>>> On Tue, Feb 4, 2014 at 4:43 PM, Justin Fagnani
>>>>>> <[email protected]>wrote:
>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> On Tue, Feb 4, 2014 at 4:22 PM, Steve Orvell <[email protected]>wrote:
>>>>>>>
>>>>>>>> Here's a simplified example:
>>>>>>>>
>>>>>>>> http://jsbin.com/aXojEti/1/edit
>>>>>>>>
>>>>>>>>
>>>>>>>> On Tue, Feb 4, 2014 at 4:20 PM, Steve Orvell <[email protected]>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.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Tue, Feb 4, 2014 at 4:11 PM, Sergey Shevchenko <
>>>>>>>>> [email protected]> wrote:
>>>>>>>>>
>>>>>>>>>> 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!
>>>>>>>>>>
>>>>>>>>>> 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 [email protected].
>>>>>>>>>> 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.
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>> 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 [email protected].
>>>>>>>> To view this discussion on the web visit
>>>>>>>> https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgWa_-fAsSRALkhbFWJPHTHxZwJ3SSUei9BPEkfWyQ7Ng%40mail.gmail.com
>>>>>>>> .
>>>>>>>>
>>>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>>>
>>>>>>>
>>>>>>> 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 [email protected].
>>>>>>> To view this discussion on the web visit
>>>>>>> https://groups.google.com/d/msgid/polymer-dev/CAEKsHmBZk41mtebBZvmJ146QOE_VBskbzVbRNoiHRcNO7YWURw%40mail.gmail.com
>>>>>>> .
>>>>>>>
>>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>>
>>>>>>
>>>>>> 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 [email protected].
>>>>>> To view this discussion on the web visit
>>>>>> https://groups.google.com/d/msgid/polymer-dev/CAAUAVAgRwLgoPaktweHfJmcsm5VH2NSNz-92xUCZ%2BMPevo70Tw%40mail.gmail.com
>>>>>> .
>>>>>>
>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>
>>>>>
>>>>> 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 [email protected].
>>>>> To view this discussion on the web visit
>>>>> https://groups.google.com/d/msgid/polymer-dev/CAEKsHmAckAB0J5ggn0RUOF8Lp3x%2BgFAidazo5RKbbiz8tq0Lag%40mail.gmail.com
>>>>> .
>>>>>
>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>
>>>>
>>>>
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 [email protected].
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.
