一、标准的组成部分：

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>