JSFiddle - React, Tailwind, and code Playground

by itinao

HTML

<div id="test1"> <span hoge1>test1</span>
 <span hoge2>test1_2</span>
 <span class="hoge3">test1_3</span>
 <span id="hoge4">test1_4</span>
 <span>test1_5</span>

</div>
<div class="hogehoge">
    <div id="test2">test2</div>
</div>
<template id="t-test">
    <style>
        :host-context(.hogehoge) {
            width: 300px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 5px dashed #f0f;
            margin: 5px;
        }
    </style>
    <content select="[hoge1]"></content>
    <content select="[hoge2]"></content>
    <content select=".hoge3"></content>
    <content select="#hoge4"></content>
    <content></content>
</template>

JavaScript

// test2に対しても実行したいので、関数化
var shadowDomTest = function (selector) {
    // Shadow DOMを使って、見た目の情報を隠す
    var element = document.querySelector(selector);
    var shadow = element.createShadowRoot();

    // いちいちcreateElementなんてやってらんないよ！ってことで、HTML Templatesを使うる
    var template = document.querySelector('#t-test');
    var templateClone = document.importNode(template.content, true)
    shadow.appendChild(templateClone);
}
shadowDomTest('#test1');
shadowDomTest('#test2');