I think this is still an open bug with the styling system: https://github.com/Polymer/polymer/issues/2188
The workaround is also blocked. It's waiting for an API call to know when new children are distributed, allowing your code to call updateStyles(). I guess a MO could also work. On Wed, Sep 16, 2015 at 11:47 AM 'Justin Fagnani' via Polymer < [email protected]> wrote: > The ::content pseudo element should help. It's applied to <content> > elements so you can style their distributed content. See > http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ > > On Tue, Sep 15, 2015 at 1:29 PM, Aleks Totic <[email protected]> wrote: > >> The --css-variable is the new, recommended way of styling shadow DOM. How >> do I use css variables to style distributed nodes? >> >> Example: >> >> <my-app> >> <my-toolbar> >> <paper-button disabled>done</paper-button> >> </my-toolbar> >> </my-app> >> >> I'd like my-toolbar to apply different color to its content's >> paper-button[disabled]. >> >> paper-button exposes --paper-button-disabled variable to be used for >> styling its disabled state, so that's what I want to use. >> >> My first attempt was to set '--paper-button-disabled' inside my-toolbar >> style definition: >> >> <dom-template id='my-toolbar'> >> <template> >> <style> >> :host { >> --paper-button-disabled: { >> background-color: yellow; >> color: orange; >> } >> } >> >> This does not work, because <paper-button> is light dom, not shadow dom. >> >> I do not want to define '--paper-button-disabled' inside 'my-app' because >> disabled buttons outside of toolbar should not be orange. >> >> And that is where I am stuck. What is the recommended way to style >> districuted nodes with css variables? >> >> Aleks >> >> 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/f99b9448-a465-4461-8b7f-6aab11157de3%40googlegroups.com >> <https://groups.google.com/d/msgid/polymer-dev/f99b9448-a465-4461-8b7f-6aab11157de3%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > > 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/CAEKsHmDjV86%2Bs6iJk-wTkm2ZR7RTiQ%3DMA2TMtzjfhoJpnHOuNQ%40mail.gmail.com > <https://groups.google.com/d/msgid/polymer-dev/CAEKsHmDjV86%2Bs6iJk-wTkm2ZR7RTiQ%3DMA2TMtzjfhoJpnHOuNQ%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > 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/CACGqRCCoYQqbReDx4F0frv4NeK%3D4fdv094FN2Rtb%2BmTxWmJqdw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
