Polymer2.0 - is it possible to control the shadom elements style from attribute value of custom element

Question

I am trying to control the the style of shadow DOM element from the attribute value of custom element

For example , i gave class equal to blue and if I want to give different color and control from attribute like 'red' and don't want to define all classes inside custom element style

http://plnkr.co/edit/5nh0slRj91NqNT7NjUKH?p=preview

index.html

<!-- Load the polyfills -->
<script src="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="x-foo.html">

<x-foo class="blue"></x-foo>
<x-foo class="red"></x-foo>

x-foo.html

<!-- import polymer-element -->
<link rel="import" href="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/polymer/polymer-element.html">

<dom-module id="x-foo">
    <template>
        <style>
            :host { font-family: sans-serif; }
            :host(.blue) {color: blue;}
            :host(.red) {color: red;}
            :host(:hover) {color: green;}
        </style>
        <p>Hi, from x-foo!</p>
    </template>
  <script>
    class XFoo extends Polymer.Element {
      static get is() {
        return "x-foo";
      }
    }
    customElements.define(XFoo.is, XFoo);
  </script>
</dom-module>

Answer 1

I don't think this is possible but I am not entirely sure.
What you could do, bind the set attribute to an inline style on one of your elements. This might not be exactly what you are looking for but maybe it helps.

The Element:

<x-foo color="red"></x-foo>

Here you could bind a value as well and change the color programatically

Inside x-foo:

<dom-module id="x-foo">

 <template>
    <style>
    </style>

    <p style$="[[color]]">Hi, from x-foo!</p>
 </template>

 <script>
  class XFoo extends Polymer.Element {
    static get is() { return ‘x-foo’; }

    static get config() {
      return {
        properties: {
          color: String
        }
      }
    }

  }
  customElements.define(XFoo.is, XFoo);
 </script>
</dom-module>