JSFiddle - React, Tailwind, and code Playground

by Jesse Baird

HTML

<my-button>
    <div class="title">hello world</div>
    <div class="body">this is some sample text</div>
    <div class="inputName">email</div>
<my-button>
    
    
    
    <template>
    <div class="big-header"><content select=".title"></content></div>
    <div class="big-body"><content select=".body"></content></div>
    <input type="text" name="<content select='.inputName'></content>">
</template>

JavaScript

var myButton = document.querySelector('my-button');

var template = document.querySelector( 'template' );


var shadowRoot = myButton.createShadowRoot();

shadowRoot.appendChild( document.importNode( template.content, true ) );