一、标准的组成部分：
-
Custom elements（自定义元素）：一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
-
Shadow DOM（影子 DOM）：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
-
HTML templates（HTML 模板）：
<template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
二、演示部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebComponent测试练习</title>
</head>
<body>
<!-- 1. WebComponent标准：Custom Element -->
<my-count></my-count>
<!-- HTML5的网页模板，也可以使用document.document.createElement('template')创建 -->
<template id="my-count-temp">
<div>
<h1>Hello WebComponent</h1>
<ul>
<li></li>
</ul>
</div>
</template>
<script>
//2. WebComponent标准：CustomElement类型
class MyCount extends HTMLElement{
constructor(){
super()
var count=0;
//获取html中的template元素，是一个HTMLTemplateElement类型
var template=document.querySelector("#my-count-temp")
console.log(template.content);
//3. WebComponent标准：ShadowDOM对象
var shadow=this.attachShadow({mode:'open'})
//4. H5的新特性，可以从template中直接获取一个DocumentFragment对象
var orignNode=template.content
// 从template中克隆一个副本
var cloneNode=document.importNode(orignNode,true)
// 查询到li
let li=cloneNode.querySelectorAll("li")[0];
li.textContent=count
//游离的节点追加到shadowDOM中
shadow.appendChild(cloneNode)
//定时的更新showDOM，将会自动的合并到DOMTree中
setInterval(()=>{
count++
li.textContent=count
},1000)
}
}
//利用全局的CustomElementRegistry对象，注册CustomElement
window.customElements.define('my-count',MyCount)
</script>
</body>
</html>
网友评论