WebComponent介绍与简单使用

WebComponent能够提供开发者组件化开发的能力
什么是组件化
组件化没有一个明确的定义，但是一般形容就是：“高内聚，低耦合”，对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系最少且接口简单。

阻碍前端组件化的因素
在前端虽然HTML、CSS和JavaScript是强大的开发语言，但是在大型项目中维护起来比较困难，如果在页面中嵌入第三方内容时，还需要确保第三方内容昂是不会影响到当前内容，同样也要确保当前的DOM不会影响到第三方的内容。

“HTML和CSS如何阻碍前端组件化”

<style>
p{
background-color: black;
color: red;
}
</style>
<p>component1</p>
<style>
p{
background-color: red;
color: blue
}
</style>
<p>component2</p>

两端代码分别实现了自己p标签的属性，如果两个人分别负责开发这两段代码的化，那么在测试阶段可能没有什么问题，不过当最终项目整合的时候，其内部的CSS属性会影响到其他外部的p标签，之所以会这样，是因为CSS是影响全局的

除了CSS的全局属性会阻碍组件化，DOM也是阻碍组件化的一个因素，因为在页面中只有一个DOM，任何地方都是可以直接读取和修改DOM。所以使用JavaScript来实现组件化是没有问题的，但是JavaScript一旦遇到了CSS和DOM，那么就很难办了。

webComponent组件化开发
“WebComponent”解决CSS和DOM阻碍组件化的

WebComponent给出的解决思路，提供了对布局视图封装能力，可以让DOM、CSSOM和JavaScript运行在局部环境中，这样使得局部CSS和DOM不会影响到全局。

WebComponent是一套技术的组合，具体涉及到了Custom elements（自定义元素）、Shadow DOM（影子DOM）和HTML template（HTML模板）

实现
使用template创建模板
<template id="componentTemplate">
<style>
p {
color: red;
}
</style>
</template>

创建一个相关的class类
查找模板内容
创建Shadow DOM
将模板添加到Shadow DOM上
class ComponentTemplate extends HTMLElement {
constructor() {
super();
// 查找模板内容
const content = document.querySelector('#componentTemplate').content;
// 创建Shadow DOM
const shadowDOM = this.attachShadow({ mode: 'open' });
// 将模板添加到Shadow DOM上
shadowDOM.appendChild(content.cloneNode(true));
}
}
customElements.define('test-component', ComponentTemplate);

直接使用
<test-component></test-component>
<test-component></test-component>
<P>
outer info
</P>