JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

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

<dom-module id="x-foo">
  <template>
    <style>
      #outer {
        --my-font-size: 20px;
      }
      #inner {
        font-size: var(--my-font-size);
        --my-color: green;
        color: var(--my-color);
      }
    </style>
    <div id="outer">
      <div id="inner">Green and big</div>
    </div>
  </template>
</dom-module>

<style is="custom-style">
  body, #container {
    --my-color: red;
  }
  #test {
    color: var(--my-color);
  }
</style>

<x-foo></x-foo>

<div id="container">
  <div id="test">Red</div>
</div>

JavaScript

Polymer({
  is: 'x-foo',
  properties: {},
  ready: function() {},
});