How to use css variable to style distributed nodes?

[Aleks Totic]

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

[Justin Fagnani]

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/

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f99b9448-a465-4461-8b7f-6aab11157de3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Bidelman]

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.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAEKsHmDjV86%2Bs6iJk-wTkm2ZR7RTiQ%3DMA2TMtzjfhoJpnHOuNQ%40mail.gmail.com.