Template Tag

템플릿의 특징은 다음과 같다.

html 코드를 반복적으로 사용할때 template 태그를 사용하면 편리하다.
innerHTML을 사용하면 HTML 코드의 가독성이 떨어지기 때문에 템플릿을 사용하면 좋다.
템플릿은 렌더링을 하지 않는다.

template tag 예제 1

실행 화면이다.

템플릿의 내용을 가져 올때는 ".content"로 가져와야 한다.
".content"를 빼면 아무것도 렌더링 하지 않을 것이다.
.content 속성은 템플릿의 내부를 포함하는 읽기 전용의 DocumentFragment이다.

//Template Tag
<template>
<style>
    .center-text
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .list-item
    {
        background-color: gold;
        margin: 1em;
        width: 20em;
        height: 3em;
    }
</style>
<div class="center-text list-item">template test</div>
</template>

//javascript code
<script>
function showTemplate() {
    var temp = document.getElementsByTagName("template")[0];
    var clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
}

showTemplate();
showTemplate();
showTemplate();
</script>

template를 찾는다
cloneNode로 복제한다.
appendChild로 추가한다.

테스트 : template_test.html

template tag 예제 2

//Template Tag
<template id="mytemplate">
<style>
    .center-text
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .list-item
    {
        background-color: gold;
        margin: 1em;
        width: 20em;
        height: 3em;
    }
</style>
<div class="center-text list-item">template test</div>
</template>

//javascript code
<script>
function showTemplate() {
    //var template = document.querySelector('#mytemplate');
    var template = document.getElementById('mytemplate');
    var clone = document.importNode(template.content, true);
    var host = document.querySelector('#host');
    host.appendChild(clone);
}

showTemplate();
showTemplate();
showTemplate();
</script>

id로 template를 찾는다
importNode 복제한다.
appendChild로 추가한다.

테스트: template_id.html

template tag 예제 3

//Template Tag
<template id="mytemplate">
<style>
    .center-text
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .list-item
    {
        background-color: gold;
        margin: 1em;
        width: 20em;
        height: 3em;
    }
</style>
<div class="center-text list-item">template test</div>
</template>

<div id="host"></div>

//javascript code
<script>
function showTemplate() {
    var template = document.querySelector('#mytemplate');

    var fragment = document.createDocumentFragment();
    for(var n = 0; n < 10; ++n) {
        var clone = document.importNode(template.content, true);
        fragment.appendChild(clone);
    }

    var host = document.querySelector('#host');
    host.appendChild(fragment);
}

showTemplate();
</script>

DocumentFragment를 이용하여 템플릿을 10개 그리고 있다.

테스트: template_fragment.html

참고)
https://www.html5rocks.com/ko/tutorials/webcomponents/template/
https://www.webcomponents.org/community/articles/introduction-to-template-element
https://qiita.com/amamamaou/items/55225b3873b098b9b2bd

웹 컴포넌트에 대해서
http://ryuxia.tistory.com/m/2
http://html5rocksko.blogspot.com/2014/02/mashup-web-component-evolution-of-web-development.html
https://kyu.io/ko/웹-컴포넌트3%e2%80%8a-%e2%80%8a쉐도우-돔shadow-dom/