Web Components允许用户自定义一个html元素 来实现组件化、复用，
利用该技术我们封装实现特定功能特定样式的定制元素用在我们想使用的任何地方
目前主流框架几乎都支持该技术
1.vue 通过Vue CLI3和新的@vue/web-component-wrapper库创建web components十分方便
2.react 可以自由选择在 Web Components 中使用 React，或者在 React 中使用 Web Components，或者两者共存。
表示所创建的元素名称的符合 DOMString 标准的字符串。注意，custom element 的名称不能是单个单词，且其中必须有段划线。
用于定义元素行为的类（自定义类） 。
可选参数，一个包含 extends 属性的配置对象，是可选参数。它指定了所创建的元素继承自哪个内置元素，可以继承任何内置元素。
例如 window.customElements.define(‘web-com‘,webCom)
如果我们想让web-com继承div元素的特性 可以这么定义window.customElements.define(‘web-com‘,webCom，{extends：p}
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节点上
通过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>
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.1页面中使用 <web-com title="跟着大胖学前端" content="算了还是跟着大胖吃美食吧" img="./food.jpg" ></web-com>
5.2 页面展示效果
如果需要交互 在类的内部 通过shadow api获取元素 监听事件
this.img = shadow.querySelector(‘img‘);
this.img.addEventListener(‘click‘,()=>{ });
