polymer/test/unit/styling-scoped-elements.html

<dom-module id="x-child">
  <template>
    <div id="simple">simple</div>
    <div id="complex1" class="scoped">complex1</div>
    <div id="complex2" selected>complex2</div>
    <div id="media">media</div>
    <div id="shadow" class="shadowTarget">shadowTarget</div>
    <div id="deep" class="deepTarget">deepTarget</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-child',
    hostAttributes: {
      class: 'nug'
    }
  });
</script>

<dom-module id="x-child2">
  <style>
    :host(.wide) #target{
      border: none;
    }
  </style>
  <template>
    <div id="target">x-child2</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-child2',
    _scopeCssViaAttr: true
  });
</script>

<dom-module id="x-styled">
  <style>
    :host {
      display: block;
      border: 1px solid orange;
    }

    :host(.wide) {
      border-width: 2px;
    }

    #simple {
      border: 3px solid orange;
    }

    .scoped, [selected] {
      border: 4px solid pink;
    }

    @media(max-width: 10000px) {
      .media {
        border: 5px solid brown;
      }
    }

    .container ::content > * {
      border: 6px solid navy;
    }

    x-child::shadow .shadowTarget {
      border: 7px solid tomato;
    }

    x-child /deep/ .deepTarget {
      border: 8px solid red;
    }

    #priority {
      border: 9px solid orange;
    }

    x-child2.wide::shadow #target {
      border: 12px solid brown;
    }

    .container1 > ::content > .content1 {
      border: 13px solid navy;
    }

    .container2 > ::content .content2 {
      border: 14px solid navy;
    }

    .computed {
      border: 15px solid orange;
    }

    #child {
      border: 16px solid tomato;
      display: block;
    }
  </style>
  <template>
    <content select=".blank"></content>
    <div id="simple">simple</div>
    <div id="complex1" class="scoped">complex1</div>
    <div id="complex2" selected>complex2</div>
    <div id="media" class="media">media</div>
    <div class="container1">
      <content select=".content1"></content>
    </div>
    <div class="container2">
      <content select=".content2"></content>
    </div>
    <div class="container">
      <content></content>
    </div>
    <x-child id="child"></x-child>
    <div id="priority">priority</div>
    <x-child2 class="wide" id="child2"></x-child2>
    <div id="computed" class$="{{computeClass(aClass)}}">Computed</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-styled',

    computeClass: function(className) {
      return className;
    }

  });
</script>

<dom-module id="x-button">
  <style>
    :host {
      border: 10px solid beige;
    }

    :host(.special) {
      border: 11px solid beige;
    }

  </style>
  <template>
    Button!
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-button',
    extends: 'button'
  });
</script>

<template id="dynamic">
  <div class="added">
    Added
    <div class="sub-added">
      Sub-added
    </div>
    </div>
  </div>
</template>

<dom-module id="x-dynamic-scope">
  <style>
    .added {
      border: 17px solid beige;
    }

    .sub-added {
      border: 18px solid #fafafa;
    }
  </style>
  <template>
    <div id="container"></div>
  </template>
</dom-module>
<script>
(function() {
  var doc = document._currentScript.ownerDocument;
  var dynamic = doc.querySelector('template#dynamic');

  Polymer({
    is: 'x-dynamic-scope',
    ready: function() {
      // setup node for scope watching
      this.scopeSubtree(this.$.container, true);
      // simulate 3rd party action by using normal dom to add to element.
      var dom = document.importNode(dynamic.content, true);
      this.$.container.appendChild(dom);
    }
  });
})();
</script>