Import Html

"Import Html"은 다른 HTML 파일을 포함하는 것을 말한다.
Web Component 기술중에 정식으로 지원되지 않는 기술중의 하나이다.

"Import Html"은 정식으로 지원 하지 않기 때문에 webcomponents.js 파일을 이용해야 기술을 이용 할수 있다.
크롬은 "Import Html"을 지원하기 때문에 별도로 webcomponents.js 파일이 필요 없다.
크롬은 플래그를 설정 할 필요도 없고, 웹서버만 구축 되어 있으면 된다.

주의)
webcomponents.js를 정식으로 테스트 해보진 않았다.
크롬 웹브라우즈가 Import Html을 정식으로 지원하는줄 몰랐다.

다음 라인을 삭제 후에야 크롬 웹브라우즈가 Import Html을 지원하는지 알게 되었다.
<script src="webcomponentsjs-0.7.12/webcomponents.js"></script>

Import Html 환경 구축

1. webcomponents.js 다운로드 : http://webcomponents.github.io/

webcomponentsjs-0.7.12.zip 파일을 다운로드 받아서 웹서버 home 폴더에 압축을 푼다.

2. 또한 webcomponents.js의 import html을 이용 할려면 웹서버가 구축이 되어 있어야 한다.

import html을 테스트 할려면 웹서버 home 폴더 아래에서 실행 되어야 한다.

Import Html 이용

1. webcomponents.js를 메인 HTML에 포함 시킨다.

여기서는 HTML head에 다음 라인을 추가 하였다.
크롬에서는 다음 라인을 추가할 필요가 없다.

<script src="webcomponentsjs-0.7.12/webcomponents.js"></script>

2. 필요한 자식 HTML 파일을 포함 시킨다.

"HTML 파일 이름"에 가져올 html 파일 이름을 정의 하면 된다.
<link rel="import" href="HTML 파일 이름">

<link rel="import" href="box.html">

3. 자식 HTML 파일

불러올 HTML 파일은 body만 포함 시켜도 실행이 된다.

<div class="list-item">Include Html 테스트</div>

물론 다음과 같이 HTML 구문이 모두 포함된 경우도 상관 없다.

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div class="list-item">Include Html 테스트</div>
</body>
</html>

4. 메인 HTML 파일 스크립트 설명

function showTemplate() {
    var link = document.querySelector('link[rel="import"]');
    if(!link)
        return;
    var content = link.import;

    var child = content.querySelector('.list-item');
    var host = document.querySelector('#host');
    host.appendChild(child.cloneNode(true));
}

showTemplate();
showTemplate();
showTemplate();

다음 라인을 이용하면 자식의 요소들에 접근 할수 있게 된다.

    var link = document.querySelector('link[rel="import"]');
    if(!link)
        return;
    var content = link.import;

자식 요소 '.list-item'를 가져와서 부모 '#host'에 추가한다.
    var child = content.querySelector('.list-item');
    var host = document.querySelector('#host');
    host.appendChild(child.cloneNode(true));

자식을 3번 추가한다.

showTemplate();

결과)
Include Html 테스트
Include Html 테스트
Include Html 테스트

다운로드:
메인 HTML 파일 : import_test.html
자식 HTML 파일 : box.html

webcomponentsjs-0.7.12.zip

참조)
https://docs.microsoft.com/en-us/skype-sdk/websdk/lib/webcomponentsjs/readme
https://www.codementor.io/ayushgupta/vanilla-js-web-components-chguq8goz
https://www.html5rocks.com/ko/tutorials/webcomponents/imports/