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