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

<dom-module id="x-order">
  <link rel="import" type="css" href="styling-remote-sheet.css">
  <style>
    :host {
      margin: 10px;
    }

    .border {
      border: 10px solid seagreen;
    }
  </style>
  <template>
    <link rel="import" type="css" href="styling-remote-sheet.css">
    <div id="me" class="border">border should be 10px</div>
  </template>
  <script>
    Polymer({is: 'x-order'});
  </script>
</dom-module>

<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">
  <link rel="import" type="css" href="sub/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>
    <!-- style in template using module! -->
    <style include="remote-styles">
      #zazz {
        border: 20px solid goldenrod;
      }
    </style>
    <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>
    <div id="url" class="foo"></div>
    <div id="bg" class="bg"></div>
    <div id="zazz"></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>