JSFiddle - React, Tailwind, and code Playground

by seong gyun jeon

HTML

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>template Element test</title>
    <style type="text/css">



        div {

            width: 100%;

            color: red;
        }
    </style>
</head>
<body>
    <!-- 기본 엘리먼트 -->
    <div id="exposeElement">exposeElement</div>
    <!-- shadowHost 로 사용 될 엘리먼트 -->
    <div id="shadowHostElement"></div>
    <!-- template 엘리먼트 -->
    <template id="templateElement">

        <style type="text/css">

            div {
                color: blue;
            }
        </style>
        <div>templateElement</div>
    </template>

    <script>
        var shadowHost = document.querySelector('#shadowHostElement');

        // create shadowRoot Node
        var shadowRoot = shadowHost.createShadowRoot();

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

        // template.content == #documentFragment 의 내부 요소
        var node = document.importNode(template.content, true);

        // 생성된 shadowRoot 에 template 엘리먼트 내부 요소를 추가시킨다.
        shadowRoot.appendChild(node);

    </script>
</body>
</html>