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="{inputName}></content>">
</template>

JavaScript

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


var shadowRoot = myButton.createShadowRoot();



//http://mir.aculo.us/2011/03/09/little-helpers-a-tweet-sized-javascript-templating-engine/
function t( s, d ) {
    for ( var p in d )
        s = s.replace( new RegExp( '{' + p + '}', 'g' ), d[ p ] );
    return s;
}
/*
	create a new template tag
	set the innerHTML of the new template tag to the src and replace any {} values
	then import the templateInt.content into the document and append to the shadow dom
*/
var templateSrc = document.querySelector( 'template' ),
    templateInst = document.createElement( 'template' );

templateInst.innerHTML = t( templateSrc.innerHTML, {inputName: "email"} );

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