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
web components
https://www.webcomponents.org/polyfills/
https://github.com/webcomponents/webcomponentsjs
https://github.com/webcomponents/custom-elements
Web Component & HTML imports
https://cdn.xgqfrms.xyz/HTML-imports/templates/index.html
https://github.com/webcomponents/html-imports/issue
removed (2020.07.01)
https://caniuse.com/#search=html imports
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！