HTML Imports

https://www.w3.org/TR/html-imports/

index.html


<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Component & HTML imports</title>
</head>

<body>
    <section>
        <h1>Web Component & HTML imports</h1>
    </section>
    <section data-modules="template-container">
        <!-- css -->
        <link rel="stylesheet" href="./tempalte.css">
        <!-- template -->
        <link rel="import" href="./template.html">
        <section data-template="container">
            <!-- templates -->
        </section>
        <section data-html="container">
            <!-- html -->
        </section>
        <!--js-->
    </section>
    <script>
        const supportsImports = () => {
            return "import" in document.createElement("link");
        };
        if (supportsImports()) {
            // Good to go!
            let templatesBox = document.querySelector(`[data-template="container"]`),
                link = document.querySelector(`link[rel=import]`),
                template = link.import, // #document
                html = template.querySelector(`html`);
            // Access DOM of the document in /imports/template.html
            templatesBox.appendChild(html);
            let section = document.querySelector(`section[data-modules="template-container"]`),
                script = document.createElement("script");
            script.src = "./tempalte.js";
            section.insertAdjacentElement(`beforeend`, script);
            /*
                 let link = document.createElement("link");
                link.rel = "import";
                link.href = "template.html";
                link.setAttribute("async", "");
                // make it async!
                link.onload = function(e) {
                    //...
                };
                link.onerror = function(e) {
                    //...
                };
                document.head.appendChild(link);
            */
        } else {
            // Use other libraries/require systems to load files.
        }
    </script>
</body>

</html>

template.html


<!-- csss -->
<!-- <link rel="stylesheet" href="./tempalte.css"> -->
<!-- template -->
<template data-tempalte="tempalte-img">
    <h3>Flower Image</h3>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>
<template data-tempalte="tempalte-links">
    <h3>links</h3>
    <div data-class="links">I like: </div>
</template>
<!-- js -->
<!-- <script src="./tempalte.js"></script> -->

template.js


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

<template>
    <h2>Flower</h2>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>


<template>
    <div class="myClass">I like: </div>
</template>

*/

const showContent = () => {
    // let temp = document.getElementsByTagName("template")[0],
    let temp = document.querySelector(`[data-tempalte="tempalte-img"]`),
        clone = temp.content.cloneNode(true);
    // document.body.appendChild(clone);
    let box = document.querySelector(`[data-html="container"]`);
        box.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) => {
    let result = ``;
    // let temp = document.getElementsByTagName("template")[1],
    let temp = document.querySelector(`[data-tempalte="tempalte-links"]`),
        item = temp.content.querySelector("div");
    for (let i = 0; i < datas.length; i++) {
        let a = document.importNode(item, true);
        a.textContent += datas[i];
        // document.body.appendChild(a);
        let box = document.querySelector(`[data-html="container"]`);
        box.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

template.css


@charset "UTf-8";

/* test.css */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

http://blog.teamtreehouse.com/introduction-html-imports

https://github.com/webcomponents/html-imports