Web Components允许用户自界说一个html元素 来实现组件化、复用，

  操作该技术我们封装实现特定成果特定样式的定制元素用在我们想使用的任何处所

  目前主流框架几乎都撑持该技术

  1.vue 通过Vue CLI3和新的@vue/web-component-wrapper库创建web components十分便利

  2.react 可以自由选择在 Web Components 中使用 React，或者在 React 中使用 Web Components，或者两者共存。

  1 通过customElements.define（）要领用来注册一个 custom element，该要领接受以下参数：

暗示所创建的元素名称的切合 DOMString 标准的字符串。注意，custom element 的名称不能是单个单词，且此中必需有段划线。

用于界说元素行为的类（自界说类） 。

可选参数，一个包罗 extends 属性的配置东西，是可选参数。它指定了所创建的元素担任自哪个内置元素，可以担任任何内置元素。

例如 window.customElements.define(‘web-com‘,webCom)    

如果我们想让web-com担任div元素的特性 可以这么界说window.customElements.define(‘web-com‘,webCom，{extends：p}

   2 自界说元素     

2.1 一个 custom element 的类东西可以通过 ES 2015 标准里的类语法生成。所以，webCom可为

         class webCom extends HTMLElement{

               constructor(props) {

必需首先挪用 super 要领

                   super(props);

以下写元素的成果代码

              }

          }

　　上述代码片段中，类的结构函数constructor总是先挪用super()来成立正确的原型链担任关系。在结构函数中，我们会界说元素实例所拥有的全部成果。作为示例，我们首先         会将shadow root附加到custom element上，然后通过一系列DOM操纵创建custom element的内部暗影DOM布局，再将其附加到 shadow root上，，最后再将一些CSS附加到             shadow root的style节点上

 3 template 标签    

    通过template 标签给自界说元素界说布局样式   并且给模板指定id

     <template id="webComTemplate">

         template标签内部创建style标签 内部的样式组件内部生效 也可以外部界说

        <style>

            样式省略

        </style>

         界说dom布局

         <div class="container">

             <div class="up">

             </div>

             <div class="down"></div>

             <img class="img">

         </div>

      </template>

4 为自界说元素添加内容

class webCom extends HTMLElement{

              constructor(props) {

                  super(props);

                  指定模式 外部是否能够访谒内部dom mode两种取值 closed禁止访谒 open允许访谒

                 var shadow=this.attachShadow({mode:‘closed‘})

 

                 获取template的模板

                 var tem=document.getElementById(‘webComTemplate‘)

 

                声明一个变量 生存模板的内容

                var content=tem.content.cloneNode(true)

 

                给相应的元素设置属性 让元素的文本内容显示属性值

                content.querySelector(‘.container>.up‘).innerText = this.getAttribute(‘title‘);

 

                给相应的元素设置属性 让元素的文本内容显示属性值

                content.querySelector(‘.container>.down‘).innerText = this.getAttribute(‘content‘);

 

                给相应的元素设置属性 让img的的src属性即是设置的属性值

                content.querySelector(‘img‘).setAttribute(‘src‘, this.getAttribute(‘img‘));

 

                把模板的内容放入shadow

                shadow.appendChild(content);

                

               通过shadow Api获取元素

               this.img = shadow.querySelector(‘img‘);

               

               给元素监听相应事件

               this.img.addEventListener(‘click‘,()=>{

              

               });

            }

     }

     挪用window.customElements.define(‘web-com‘,webCom)要领 生成自界说元素web-com

5页面中使用web-com标签及显示效果