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;

            float: left;
        }

        span.middle{

            margin:0px 5px 0px 5px;
        }
    </style>
</head>
<body>
<!-- shadowHost 로 사용 될 엘리먼트 -->
<div id="shadowHostElement">
    <span class="first">당신의 아이디는</span>
    <span class="middle" >MOHWA</span>
    <span class="last">입니다.</span>
</div>
<!-- template 엘리먼트 -->
<template id="templateElement">

    <style type="text/css">

        :host {

            color: blue;

            float: left;
        }

    </style>
    <div class="desc">
        <content select=".first"></content>
        <content select="span.middle"></content>
        <content select=".last"></content>
    </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>