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">

        span {

            color: red;

            margin:0px 5px 0px 5px;

            float: left;


        }
    </style>
</head>
<body>
    <!-- shadowHost 로 사용 될 엘리먼트 -->
    <div id="shadowHostElement">
        <span>MOHWA</span>
    </div>
    <!-- template 엘리먼트 -->
    <template id="templateElement">

        <style type="text/css">

            span {

                color: blue;

                float: left;
            }

        </style>
        <div class="desc">
            <span>당신의 아이디는</span>
            <span>
                <content></content>
            </span>
            <span>입니다</span>
        </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>