Web Components 是一种 Web 技术，旨在创建可重用的组件化模块，其最大的优点在于自定义 HTML 元素，并在多个Web页面中使用它们。Web Components 技术包括自定义元素、模板、影子 DOM 以及 HTMLElement 的扩展。其中，影子 DOM 和分发部分是 Web Components 中值得深入研究的两个方面。
阴影 DOM
影子 DOM（Shadow DOM）是 Web Components 中的一个重要技术，用于隔离自定义元素的样式和逻辑，以避免与其它元素发生冲突。影子 DOM 可以将元素的样式和脚本包装在 HTML 文档的一个单独的 DOM 树内部，形成一个类似于「子文档」的效果，从而与外部文档的样式和逻辑隔离开来。
给出如下示例代码：
-- -------------------- ---- ------- --------- ------------------------- ------- ----- - -------- ------ ---------- ----- - ------- - ------ ----- - -------- ---- --------------------------- ------------- ---- --------------------------- ----------- -------- ----- --------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- -------- - ----------------------------------------------- ----------------------------------------------------- - - ----------------------------------- ----------- ---------展开代码
上述代码定义了一个自定义元素 my-element，它包含一个影子根节点 shadow，通过 attachShadow 函数创建。影子根节点的模式为 open，也就是说外部文档可以访问该节点的子级和后代节点。my-element 采用了一个模板的形式，并使用 slot 标签插入了一个插槽，插槽会插入外部文档中的内容。
关于影子 DOM 还有以下需要注意的地方：
- 影子 DOM 内部的样式不会影响到外部文档的元素，反之亦然。
- 影子 DOM 内部的 JavaScript 也会被隔离，并且不会影响外部文档中的 JavaScript。
- 自定义元素可以在影子 DOM 中使用
:host和:host()选择器，来定义自己的样式，而这些样式不会影响到其它元素。
分发部分
分发部分（Slot）是 Web Components 中另外一个重要的技术，主要被用来插入外部文档中的内容（或者称之为「插槽内容」）到自定义元素内部进行渲染。
分发部分采用了一种类似于插槽的方式，只不过它不是插槽元素，而是使用 slot 标签来定义插槽。
举例如下：
-- -------------------- ---- ------- --------- ---------------------- ------- ----- - -------- ------------- ------ ----- -------- ---- ------- --- ----- ----- - -------- ----- ------------------- ----------- --------------------------- ----------- -------- ----- ------ ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- -------- - -------------------------------------------- ----------------------------------------------------- - - -------------------------------- -------- ---------展开代码
上述代码定义了一个名称为 my-icon 的自定义元素，它包含了两个插槽 icon 和 label，分别用来渲染 icon 图标和 icon 标题。
<my-icon> <img slot="icon" src="icon.png"> <span slot="label">Icon Label</span> </my-icon>
上述代码将 my-icon 自定义元素插入到文档中，并向其内部插入了一个图标和一个标签。该自定义元素将图标和标签进行组合，并通过影子 DOM 渲染出来。
需要注意的是，插槽内部的插槽内容会被覆盖、替换，并且继承它们的样式。在上面的例子中，使用的 slot 元素带有一个名为 icon 的属性，它被用来匹配外部文档中的一个同名的 slot 元素。
总结
Web Components 技术提供了一种创建可重用组件的方法，通过自定义元素、模板、影子 DOM 和 HTMLElement 的扩展等，可以轻松地创建出高质量的、易于维护的 Web 应用和组件。本文主要介绍了 Web Components 中的两个方面：影子 DOM 和分发部分，并给出了相应的示例代码。在实际编码过程中，需要深入理解各个技术点之间的关系，灵活地应用到实际项目中去。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c367ae83d39b488176c66c
