@polymer/polymer/test/smoke/style-props/src/elements.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

<link rel="import" href="elements-defaults.html">

<dom-module id="x-s">
  <template>
    <style include="simple-layout-styles">
      :host {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        background-color: lightblue;
        @apply(--x-s);
      }

      .container {
        height: 100px;
        width: 100px;
      }

      section {
        box-sizing: border-box;
        margin: 1px;
        width: 48px;
        height: 48px;
        border: 1px solid black;
        border-radius: 4px;
      }

      .header {
        @apply(--s-header);
      }

      .a {
        background-color: var(--a, #eee);
      }

      .b {
        background-color: var(--b, #eee);
      }

      .c {
        background-color: var(--c, #eee);
      }

      .d {
        background: -webkit-linear-gradient(top right, #777, white);
      }
    </style>
    <div class="header">x-s</div>
    <div class="container horizontal wrap layout">
      <section class="center-center horizontal layout a">--a</section>
      <section class="center-center horizontal layout b">--b</section>
      <section class="center-center horizontal layout c">--c</section>
      <section class="d"></section>
    </div>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'x-s'

  });
</script>

<dom-module id="x-ss">
  <template>
    <style include="simple-layout-styles">
      :host {
        background-color: goldenrod;
        transform: var(--ss-transform);
        -webkit-transform: var(--ss-transform);
        @apply(--x-s);
      }

      .container {
        height: 100px;
        width: 50px;
      }

      section {
        box-sizing: border-box;
        width: 48px;
        height: 48px;
        margin: 1px;
        border: 1px solid black;
        border-radius: 4px;
      }

      .header {
        @apply(--s-header);
      }

      .a {
        background-color: var(--a, #eee);
      }

      .b {
        background: -webkit-linear-gradient(top right, #777, white);
      }

    </style>
    <div class="header">x-ss</div>
    <div class="container horizontal wrap layout">
      <section class="center-center horizontal layout a">--a</section>
      <section class="center-center horizontal layout b"></section>
    </div>
  </template>
</dom-module>

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