JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<script>
  var Polymer = {
    dom: 'shadow'
  };

</script>
<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-input/paper-input.html">

<dom-module id="x-foo">
  <template>
    <h1>x-foo</h1>
    <paper-button on-tap="doStamp_">Stamp!</paper-button>
    <paper-input value="{{myVal}}"></paper-input>
    <template is="dom-maybe" id="maybe1">
    Hi
      <paper-input value="{{myVal}}"></paper-input>
    </template>
    <template is="dom-if" id="if1">
      <h1>
      </h1>
      <h2>
      Hello world
      </h2>
    </template>
  </template>
</dom-module>

<x-foo></x-foo>

<!-- ideal -->
<settings-pages>
  <settings-subpage>
    <languages-page id="languages"></languages-page>
  </settings-subpage>
  <settings-subpage>
    <device-page id="device"></device-page>
  </settings-subpage>
</settings-pages>

<!-- implemented with templates -->
<settings-pages>
  <template is="settings-subpage">
    <languages-page id="languages"></languages-page>
  </template>
  <template is="settings-subpage">
    <device-page id="device"></device-page>
  </template>
</settings-pages>

<!-- kschaaf style -->
<settings-lazy-pages>
  <template is="dom-if">
    <settings-subpage>
      <languages-page id="languages"></languages-page>
    </settings-subpage>
  </template>
  <template is="dom-if">
    <settings-subpage>
      <device-page id="device"></device-page>
    </settings-subpage>
  </template>
</settings-lazy-pages>

<!-- kschaaf style with magic settings-subpage sauce? -->
<settings-lazy-pages>
  <template is="dom-if">
    <languages-page id="languages"></languages-page>
  </template>
  <template is="dom-if">
    <device-page id="device"></device-page>
  </template>
</settings-lazy-pages>

JavaScript

Polymer({
  is: 'dom-maybe',
  extends: 'template',
  _template: null,
  behaviors: [Polymer.Templatizer],
  ready: function() {
    window.maybe = this;
  },
  doStamp: function() {
    if (this._instance)
      return;
    this.templatize(this);
    var instance = this.stamp();
    this._instance = instance;
    Polymer.dom(this.parentNode).appendChild(instance.root);
  },
  _forwardParentProp: function(prop, value) {
  if (this._instance)
    this._instance[prop] = value;
  },
  _forwardParentPath: function(path, value) {
  if (this._instance)
    this._instance._notifyPath(path, value, true);
  },
});

Polymer({
  is: 'x-foo',
  properties: {
    myVal: {
      type: String,
      value: 'x-foo default string',
    },
  },
  ready: function() {},
  attached: function() {
  },
  doStamp_: function() {
    this.$.maybe1.doStamp();
    this.$.if1._content.querySelector('h1').innerText = 'Stamped';
    this.$.if1.if = !this.$.if1.if;
    setTimeout(function() {
    }.bind(this), 200);
  },
});