: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). 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.
