Web Component ​

介绍 ​

Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。

大白话来说：Web Component 有点 Vue 中组件的意思，旨在原生的实现 HTML 的模块化。它目前包含三个分类：

• Custom elements（自定义元素）： 一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
• Shadow DOM（影子 DOM）：一组 JavaScript API，用于将封装的“影子” DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates（HTML 模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

Shadow DOM ​

可以将一个隐藏的、独立的 DOM 附加到一个元素上。

• Shadow DOM 其实被大多浏览器所支持并使用，比如常见的表单元素，如 <input type="range" /> 元素，在浏览器中查看标签只能看到这个，但背后的实现就是使用了 Shadow DOM，封装了独立的一个功能实现。
• Shadow DOM 元素有自己独立的 DOM 树，且与真实的 DOM 是隔离的。
• 外部无法通过选择器修改 Shadow DOM 内元素的样式，且内部样式也不会影响到外部元素。

目前见到的使用场景是给页面添加水印功能，比如插件 watermark.js，其原理就是使用 Shadow DOM 实现用户无法通过浏览器操作该 DOM，无论是在开发者模式中选中删除该 DOM 还是使用 JS，都无法彻底删除。

其源码实现待补充吧