@polymer/polymer/test/unit/polymer-element-with-apply-import.html

The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to

<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer-element.html">
<link rel="import" href="../../../shadycss/apply-shim.html">
<link rel="import" href="../../lib/elements/custom-style.html">

<dom-module id="apply-element">
  <template>
    <style>
    :host {
      display: block;
      @apply --mixin;
    }
    </style>
  </template>
  <script>
  class ApplyElement extends Polymer.Element {
    static get is() {return 'apply-element';}
  }
  customElements.define('apply-element', ApplyElement);
  </script>
</dom-module>

<dom-module id="x-outer">
  <template>
    <style>
    :host {
      display: block;
      @apply --mixin;
      background-color: rgb(123, 123, 123);
    }
    :host > * {
      --mixin: {
        position: absolute;
        margin: 50px;
        height: 100px;
        width: 100px;
        background-color: rgb(255, 0, 0);
      }
    }
    </style>
    <apply-element></apply-element>
  </template>
  <script>
  class XOuter extends Polymer.Element {
    static get is() {return 'x-outer';}
  }
  customElements.define('x-outer', XOuter);
  </script>
</dom-module>