polymer/test/unit/styling-remote-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'
  });
</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'
  });
</script>

<link rel="import" href="styling-remote-module-sheet.html">

<dom-module id="x-styled">
  <link rel="import" type="css" href="styling-remote-sheet.css">
  <style>
    @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;
    }

    #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>
    <content></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-styled',
    styleModules: ['remote-styles'],

    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>