JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<script>Polymer = {dom: 'shadow', lazyRegister: true, useNativeCSSProperties: true};</script>
<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">

<dom-module id="x-child">
  <template>
    <style>
      span {
        font-family: monospace;
        /* --child-pretty has a color property. @apply will be replaced with
           color: var(--child-pretty_-_color); */ 
        @apply(--child-pretty);
        font-weight: bold;
      }
    </style>
    x-child's span: <span>This is a styled span</span>
  </template>
</dom-module>

<dom-module id="x-parent1">
  <template>
    <style>
      x-child {
        /* --child-pretty first seen here, so its properties are ['color']. */
        --child-pretty: {
          /* Sets --child-pretty_-_color to green. */
          color: green;
        };
      }
    </style>
    <header>Parent 1:</header>
    <x-child></x-child>
  </template>
</dom-module>

<div>
  <x-child></x-child>
  <x-parent1></x-parent1>
</div>

CSS

body {
  color: grey;
}
body > div {
  display: flex;
  flex-direction: column;
}
body > div > * {
  margin: 10px;
}

JavaScript

// Parses x-parent1, finding and processing --child-pretty.
// Adds it to the global map with properties ['color'].
Polymer({is: 'x-parent1'});

// Parses x-child, finding and processing --child-pretty.
Polymer({is: 'x-child'});