xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Web Component & HTML imports & Best Practical All In One

Web Component & HTML imports & Best Practical All In One

Web Component & HTML imports

Good

only import template content.

  1. tempalte.html

<!-- csss -->
<!-- <link rel="stylesheet" href="./tempalte.css"> -->
<!-- template -->
<div data-div="tempaltes">
    <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>
</div>
<!-- js -->
<!-- <script src="./tempalte.js"></script> -->
  1. tempalte.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");
}
  1. tempalte.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;
}
  1. 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
                div = template.querySelector(`[data-div="tempaltes"]`),
                html = template.querySelector(`html`);
            // Access DOM of the document in /imports/template.html
            templatesBox.appendChild(div);
            // 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>

bad

import all html content.


<!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
                div = template.querySelector(`[data-div="tempaltes"]`),
                html = template.querySelector(`html`);
            // Access DOM of the document in /imports/template.html
            templatesBox.appendChild(div);
            // 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>

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

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

bug

css in template is OK, but js in template Error.


<!-- css -->
<!-- <link rel="stylesheet" href="./tempalte.css"> -->
<!-- template -->
<div data-div="tempaltes">
    <link rel="stylesheet" href="./tempalte.css">
    <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>
</div>
<!-- js -->
<!-- <script src="./tempalte.js" async></script> -->
<!-- bug: tempalte.js:41 Uncaught TypeError: Cannot read property 'content' of null at templateGenerator -->

perfect & pretty cool

data-src => src

image


    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
            div = template.querySelector(`[data-div="tempaltes"]`),
            html = template.querySelector(`html`);
        // Access DOM of the document in /imports/template.html
        templatesBox.appendChild(div);
        // 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 section = document.querySelector(`section[data-modules="template-container"]`),
            js = document.querySelector(`[data-tempalte="tempalte-script"]`),
            script = document.createElement("script");
        js.src = js.dataset.src;
        // script.src = js.dataset.src;
        // 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.
    }

Web Component & HTML imports

https://cdn.xgqfrms.xyz/HTML-imports/templates/index.html

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

refs

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2018-05-29 14:36  xgqfrms  阅读(48)  评论(7)  编辑  收藏  举报