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]<javascript:>
> > wrote:
>
>>
>> On Tue, Feb 4, 2014 at 4:47 PM, Daniel Freedman
>> <[email protected]<javascript:>
>> > 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]<javascript:>
>>> > wrote:
>>>
>>>>
>>>>
>>>>
>>>> On Tue, Feb 4, 2014 at 4:22 PM, Steve Orvell
>>>> <[email protected]<javascript:>
>>>> > 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]<javascript:>
>>>>> > 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]<javascript:>
>>>>>> > 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] <javascript:>.
>>>>>>> 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] <javascript:>.
>>>>> 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] <javascript:>.
>>>> 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] <javascript:>.
>>> 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] <javascript:>.
>> 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/b816497a-3143-4982-9a4b-8c5831138eae%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
