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. For more options, visit https://groups.google.com/d/optout.
