webComponent
www.shuzhiduo.com/A/mo5kLN2vd…
概述
各种网站往往需要一些相同的模块，比如日历、调色板等等，这种模块就被称为“组件”（component）。Web Component就是网页组件式开发的技术规范。
采用组件进行网站开发，有很多优点。
（1）管理和使用非常容易。加载或卸载组件，只要添加或删除一行代码就可以了。
- \
-
Lorem ipsum\
上面代码加载了一个对话框组件。
（2）定制非常容易。组件往往留出接口，供使用者设置常见属性，比如上面代码的heading属性，就是用来设置对话框的标题。
（3）组件是模块化编程思想的体现，非常有利于代码的重用。标准格式的模块，可以跨平台、跨框架使用，构建、部署和与其他UI元素互动都有统一做法。
（4）组件提供了HTML、CSS、JavaScript封装的方法，实现了与同一页面上其他代码的隔离。
未来的网站开发，可以像搭积木一样，把组件合在一起，就组成了一个网站。这是非常诱人的。
Web Components不是单一的规范，而是一系列的技术组成，包括Template、Custom Element、Shadow DOM、HTML Import四种技术规范。使用时，并不一定这四者都要用到。其中，Custom Element和Shadow DOM最重要，Template和HTML Import只起到辅助作用。
什么是 Web Component
Web Component 是一种 W3C标准 支持的 组件化方案，通过它，我们可以编写可复用的 组件，同时，我们也可以对自己的组件做更精细化的控制。正如 PWA 一样，他并非一项单一的技术，而是由三项技术组成：
- Shadow DOM
- Custom elements
- HTML templates
WebComponents 是这类问题最好的良药，通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、javascript 代码，并且不会干扰页面上的其他代码。
开发者能通过 shadow DOM 在文档流中创建一些完全独立于其他元素的子 DOM 树（sub-DOM trees）， 由于这个特性，使得我们可以封装一个具有独立功能的组件，并且可以保证不会在不无意中干扰到其它 DOM 元素。shadow DOM 和标准的 DOM 一样，可以设置它的样式，也可以用 javascript 操作它的行为。主文档流和基于 shadow DOM 创建的独立组件之间的互不干扰，所以组件的复用也就变得异常简单方便。
WebComponents除了是一个独立组件之外，还有一个很重要的优点，那就是WebComponents可以跨语音、跨框架使用，比如我们封装了一个WebComponent，就可以用在vue、react等框架中。
我曾今用过Angular、React和Polymer做过很多项目。虽然大家都对它们很熟悉，但是尽管使用了相同的框架，这些代码库还是有很大的不同。清晰定义的工作方式和样式指南比简单的使用框架更有助于代码库的一致性。框架也带来了额外的复杂性，问问自己这是否真的值得。
现在web component已经得到了广泛的支持，你可以会得出这样的结论：原生代码可以提供与框架相同的功能，但是性能更好，代码更少，复杂度更低。
使用原生web components的好处非常的清晰：
原生不需要框架
易于继承，不需要编译
真正的局部CSS作用域
标准，只有HTML，CSS，JavaScript
