Polymer 3 * Import the shadyCSS polyfill * Use CSS mixins

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://polygit.org/webcomponentsjs/components/webcomponentsjs/webcomponents-loader.js"></script>
    
    <script type="module" src="custom-element.js"></script>

  </head>
  <body>
  <p>Hello world</p>
  
  <custom-element></custom-element>
  <p>Hi there</p>
  </body>
</html>

import {Element as PolymerElement} from "https://unpkg.com/@polymer/polymer@3.0.0-pre.1/polymer-element.js"

//import the shadycss polyfill so that CSS mixins can be used
import 'https://unpkg.com/@webcomponents/shadycss/apply-shim.min.js'

  class CustomElement extends PolymerElement {
    static get properties() {
      return {
        
      };
    }
    static get template() {
      return `
        <style>
          :host {
            --div-theme: {
              background-color: var(--my-background-color, aliceblue);
              border: var(--my-border, 5px dashed);
              padding: var(--my-padding, 10px);
              margin: var(--my-margin, 50px);
              font-family: var(--my-font-family, monospace);
              color: var(--my-color, green);
              text-align: var(--my-text-align, right);
            };
          }
          div {
            @apply --div-theme;
          }
        </style>
        <div>
           <p>This div is styled by a CSS mixin called <br><code>--div-theme</code>.</p>
           <p>The shadyCSS polyfill makes it render properly.</p>
        </div>
        `
    }
  }
  // Register the new element with the browser
  customElements.define('custom-element', CustomElement);