一、標(biāo)準(zhǔn)的組成部分：
-
Custom elements（自定義元素）：一組 JavaScript API，允許您定義 custom elements 及其行為，然后可以在您的用戶界面中按照需要使用它們。
-
Shadow DOM（影子 DOM）：一組 JavaScript API，用于將封裝的“影子”DOM 樹附加到元素（與主文檔 DOM 分開呈現(xiàn)）并控制其關(guān)聯(lián)的功能。通過這種方式，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔(dān)心與文檔的其他部分發(fā)生沖突。
-
HTML templates（HTML 模板）：
<template> 和 <slot> 元素使您可以編寫不在呈現(xiàn)頁面中顯示的標(biāo)記模板。然后它們可以作為自定義元素結(jié)構(gòu)的基礎(chǔ)被多次重用。
二、演示部分：
<!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測(cè)試練習(xí)</title>
</head>
<body>
<!-- 1. WebComponent標(biāo)準(zhǔn)：Custom Element -->
<my-count></my-count>
<!-- HTML5的網(wǎng)頁模板，也可以使用document.document.createElement('template')創(chuàng)建 -->
<template id="my-count-temp">
<div>
<h1>Hello WebComponent</h1>
<ul>
<li></li>
</ul>
</div>
</template>
<script>
//2. WebComponent標(biāo)準(zhǔn)：CustomElement類型
class MyCount extends HTMLElement{
constructor(){
super()
var count=0;
//獲取html中的template元素，是一個(gè)HTMLTemplateElement類型
var template=document.querySelector("#my-count-temp")
console.log(template.content);
//3. WebComponent標(biāo)準(zhǔn)：ShadowDOM對(duì)象
var shadow=this.attachShadow({mode:'open'})
//4. H5的新特性，可以從template中直接獲取一個(gè)DocumentFragment對(duì)象
var orignNode=template.content
// 從template中克隆一個(gè)副本
var cloneNode=document.importNode(orignNode,true)
// 查詢到li
let li=cloneNode.querySelectorAll("li")[0];
li.textContent=count
//游離的節(jié)點(diǎn)追加到shadowDOM中
shadow.appendChild(cloneNode)
//定時(shí)的更新showDOM，將會(huì)自動(dòng)的合并到DOMTree中
setInterval(()=>{
count++
li.textContent=count
},1000)
}
}
//利用全局的CustomElementRegistry對(duì)象，注冊(cè)CustomElement
window.customElements.define('my-count',MyCount)
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
