JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div id="nameTag">Bob</div>


<template id="nameTagTemplate">
<style>
:host {
    font-family: 'Arial';
}
:host(:hover) {
    color: blue;
}
:host-context(.different) {
    color: blue;
}
.outer {
  border: 2px solid brown;
  border-radius: 1em;
  background: red;
  font-size: 20pt;
  width: 12em;
  height: 7em;
  text-align: center;
}
.boilerplate {
  color: white;
  padding: 0.5em;
}
.name {
  background: white;
  font-family: "Marker Felt", cursive;
  font-size: 45pt;
  padding-top: 0.2em;
}
</style>
<div class="outer">
  <div class="boilerplate">
    Hi! My name is
  </div>
  <div class="name">
    <content>&nbsp;</content>
  </div>
</div>
</template>

<name-tag class="different"></name-tag>

<div>
    New name: <input id="new-name"> <button id="update">Update</button>
</div>


<template id="nameTagTemplate2">
<style>
    ::content div {
        font-weight: bold;
    }
    content[select=".first"]::content > div {
        text-decoration: underline;
    }
</style>
<div style="background: purple; padding: 1em; width: 100px; margin: 1em;">
    <div style="color: red";>
        <content select=".first"></content>
    </div>
    <div style="color: yellow">
        <content select="div"></content>
    </div>
    <div style="color: blue">
        <!-- No available content: already projeceted into above -->
        <content select=".email"></content>
    </div>
</div>
</template>

    <div id="nameTag2">
    <div class="first">Bob</div>
    <div>B. Love</div>
    <div class="email">bob@</div>
</div>

CSS

body {
    color: green;
}

JavaScript

var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
shadow.appendChild(document.importNode(template.content));

document.getElementById('update').addEventListener('click', function() {
    document.querySelector('#nameTag').textContent =
        document.getElementById('new-name').value;
}, false);



var shadow2 = document.querySelector('#nameTag2').createShadowRoot();
var template2 = document.querySelector('#nameTagTemplate2');
shadow2.appendChild(document.importNode(template2.content));