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

<dom-module id="x-gchild">
  <template>
    <!-- styles can be in templates -->
    <style>
      :host-context(.wide) #target {
        border: 10px solid orange;
      }
    </style>
    <div id="target">x-gchild</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-gchild'
  });
</script>

<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>
    <x-gchild id="gchild1"></x-gchild>
    <x-gchild id="gchild2" class="wide"></x-gchild>
  </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-scope-class">
  <template>
    <div id="scope">Trivial</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-scope-class'
  });
</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;
    }

    .computeda {
      border: 20px solid orange;
    }

    #child {
      border: 16px solid tomato;
      display: block;
    }

    svg {
      margin-top: 20px;
    }

    #circle {
      fill: seagreen;
      stroke-width: 1px;
      stroke: tomato;
    }
  </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>
    <div id="repeatContainer">
      <template id="repeat" is="dom-repeat" items="{{items}}">
        <a class$="{{aaClass}}">A Computed</a>
      </template>
    </div>
    <svg height="25" width="25">
      <circle id="circle" cx="12" cy="12" r="10"></circle>
    </svg>
    <x-scope-class id="scopeClass"></x-scope-class>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-styled',

    properties: {
      items: {value: [{}]}
    },

    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>

<dom-module id="x-Mixed-Case">
  <style>
    :host {
      border: 13px solid beige;
    }

  </style>
  <template>
    Mixed-Case
  </template>
  <script>
    Polymer({
      is: 'x-Mixed-Case'
    });
  </script>
</dom-module>

<dom-module id="x-Mixed-Case-Button">
  <style>
    :host {
      border: 14px solid beige;
    }

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


<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>

<template id="dynamic-style-template">
  <style>
    :host {
      border: 40px solid tomato;
    }
  </style>
  <div>big border</div>
</template>

<script>
(function() {
  var doc = document._currentScript.ownerDocument;
  var template = doc.querySelector('template#dynamic-style-template');

  Polymer({
    is: 'x-dynamic-template',
    beforeRegister: function() {
      this._template = template;
    }
  });
})();
</script>

<template id="svg">
  <svg class="svg" viewBox="0 0 24 24">
    <circle id="circle" r="12" cx="12" cy="12" />
  </svg>
</template>

<dom-module id="x-dynamic-svg">
  <template>
    <style>
      .svg {
        height: 24px;
        width: 24px;
      }
      #circle {
        fill: red;
        fill-opacity: 0.5;
      }
    </style>
    <div id="container"></div>
  </template>
  <script>
    (function() {
      var doc = document._currentScript.ownerDocument;
      var template = doc.querySelector('template#svg');

      Polymer({
        is: 'x-dynamic-svg',
        ready: function() {
          this.scopeSubtree(this.$.container, true);
          var dom = document.importNode(template.content, true);
          this.$.container.appendChild(dom);
        }
      });
    })();
  </script>
</dom-module>

<dom-module id="x-specificity">
  <template>
    <style>
      :host {
        border-top: 1px solid red;
      }
      :host(.bar) {
        border-top: 2px solid red;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({is: 'x-specificity'});
  </script>
</dom-module>

<style is="custom-style">
  :root {
    --x-specificity-parent : {
      border: 10px solid blue;
    };
    --x-specificity-nested : {
      border: 3px solid red;
    };
  }
</style>

<dom-module id="x-specificity-parent">
  <template>
    <style>
      /* TODO remove `:host` when https://github.com/Polymer/polymer/pull/2419 merged */
      :host ::content > :not(template) {
        @apply(--x-specificity-parent);
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({is: 'x-specificity-parent', extends: 'div'});
  </script>
</dom-module>

<dom-module id="x-specificity-nested">
  <template>
    <style>
      :host {
        @apply(--x-specificity-nested);
      }
    </style>
  </template>
  <script>
    Polymer({is: 'x-specificity-nested', extends: 'div'});
  </script>
</dom-module>

<style is="custom-style">
  :root {
    --x-overriding : {
      border-top: 1px solid red;
    }
  }
</style>

<dom-module id="x-overriding">
  <template>
    <style>
      .red {
        @apply(--x-overriding);
      }
      .green {
        @apply(--x-overriding);
        border-top: 2px solid green;
      }
      .red-2 {
        border-top: 2px solid green;
        @apply(--x-overriding);
      }
      .blue {
        @apply(--x-overriding);
        border-top: 3px solid blue;
      }
    </style>

    <div class="red">red</div>
    <div class="green">green</div>
    <div class="red-2">green-2</div>
    <div class="blue">blue</div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-overriding'
  });
</script>