什么是组件化？狭义的组件化一般指的是标签化，即以自定义标签为核心的机制。广义的组件化包括在前端技术的发展趋势下，对数据逻辑层的业务进行梳理，形成不同层次的能力并进行封装，大致可以分为三个阶段：web1.0。前端工程师的概念很薄，编程思想主要是将行为以功能为单位进行分离。每个函数只做一件事。在web2.0的2.0时代，jQuery、Bootstrap等模板引擎库开始出现。编程出现了模块化规范，以模块为单位，每个模块做一件事web3.0（这个web3.0不是另一个web3.0）3.0阶段是前端技术最活跃的时期，angular，react、vue先后登场。用户对产品的体验越来越高，项目上的业务和交互越来越复杂，前后端在技术上开始分离。编程思想以组件为单位开始，每个组件都有独立的结构、视图和行为，代表一个完整的个体。这一时期，组件化的开发模式愈演愈烈，各个框架和库都有自己的标准。它们之间的兼容性并不友好。于是，早期W3C提出的WebComponents概念逐渐受到关注。Web组件Web组件是由W3C定义的标准。它是一组原生组件开发技术，允许您创建可重用的自定义元素并在Web应用程序中使用它们。使用WebComponents不需要任何第三方框架或库，可用于开发跨端、跨框架的组件库使用WebComponents自定义元素WebComponents标准支持开发者将HTML页面的功能封装为自定义元素注册custom元素需要调用CustomElementRegistry.define()方法。CustomElementRegistry是一个接口，一般使用它的实现类customElements。define方法有3个参数：自定义标签名（需要复合DOMString标准，不能是单个单词，里面必须有破折号。)封装元素行为逻辑的类包含extends属性的配置对象（可选参数，extends属性表示自定义元素继承自哪个元素）例如：//自定义一个标签，名字为my-元素继承自p元素ElementcustomElements.define('my-element',MyElement,{extends:'p'});对于封装元素行为逻辑的类，我们需要声明一个继承自HTMLElement的类。在构造函数中，必须先调用super()函数，然后再编写自定义元素的行为逻辑。如何对其进行封装，将在下一节shadowDOM中介绍。WebComponents根据是否传递配置对象，自定义元素可以分为继承自基本HTML元素的元素和独立元素。组件类中可以定义以下四种生命周期回调函数的行为：connectedCallback：当元素第一次插入文档DOM时调用。disconnectedCallback：当元素从文档DOM中移除时调用。adoptedCallback：元素移动到新文档时调用。attributeChangedCallback：当元素添加、删除或修改其自身的属性时调用。它接受三个参数（属性名称、旧值、新值）。ShadowDOMShadowDOM是封装自定义元素的关键。ShadowDOM就像一个独立的大沙箱，可以自然隔离CSS样式，不干扰其他DOM元素。它里面有一棵影子树。和其他基本的HTML元素一样，ShadowDOM也是依附于DOM树的一个节点。这个节点叫做shadowhost，通过shadowRoot对象访问。下面是ShadowDOM的示意图：通过调用Element.attachShadow()方法，创建一个ShadowDOM并附加到自定义元素上，该方法返回一个shadowRoot对象。我们封装的自定义元素其实是封装在ShadowDOM中的。attachShadow()方法接受一个包含mode属性的配置对象作为参数，mode可以是open也可以是closed，表示是否允许JavaScript操作这个节点。接下来，我们声明一个自定义元素类：classMyElementextendsHTMLElement{constructor(){//首先调用super()super();constshadowRoot=this.attachShadow({mode='open'});//接下来我们可以在shadowRoot中添加各种我们想要的东西}}之后我们可以通过dom操作向shadowRoot中添加节点（包括style和link标签），这样就可以实现一个封装组件。模板内容在自定义元素的代码中，我们将html定义在字符串中，不利于持续维护。HTML5中新的template标签方便了WebComponents的模板开发。浏览器不会渲染这个标签定义的内容，但是可以通过DOM获取。我们在页面上定义一个模板标签，放一段文字，这个标签不会在页面上渲染 Myparagraph
