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">
<link rel="import" href="paper-dialog-behavior/paper-dialog-shared-styles.html">

<dom-module id="x-foo">
  <template>
    <style include="paper-dialog-shared-styles">
      :host {
        --paper-dialog: {
          font-size: 100px;
        };
      }
    </style>
    <div id="d">
      Hello, world<br>Foo bar baz bat
    </div>
  </template>
</dom-module>

<style is="custom-style">
  x-foo {
    --paper-dialog: { color: red; };
  }
</style>
<x-foo></x-foo>

JavaScript

Polymer({is: 'x-foo'});