[0.8] encapsulate and class binding not working well together #1240

<dom-module id="x-app" encapsulate>

  <style>

    :host {
      display: block;
    }

    #foo {
      height: 100px;
      background-color: red;
    }

  </style>

  <template>

    <!-- the class binding will override the class (x-app-x) set for encapsulation and causing #foo style to not apply to the div correctly -->
    <div id="foo" class$="[[fooClass]]"></div>

  </template>

</dom-module>

<script>

  Polymer({

    is: 'x-app',

    configure: function() {
      return {
        fooClass: 'foo'
      }
    }

  });

</script>