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>