Shadow DOM styling moves at lightning speeds! Tracking bug to get articles updated for :host()/:ancestor():
https://github.com/Polymer/docs/issues/242 On Tue, Feb 4, 2014 at 4:55 PM, Eric Bidelman <[email protected]> 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/CACGqRCB6okUbuGvk_-p64vr49S2eFKSQO3vvg2YhM_yv0QCA%2Bg%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
