Web Components 是一种用于构建可重用的组件化应用程序的技术。它包括四个主要的技术部分：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。其中，Shadow DOM 和 slot 作为 Web Components 技术的一部分，能够为组件提供更加灵活和强大的功能。本文将以较为易理解的方式详细探讨这两个技术。
什么是 shadowDOM？
Shadow DOM 是一种 JavaScript API，它允许我们将 DOM 树分割成多个部分，让其具有隔离性。我们可以将一个组件的 HTML、CSS 和 JavaScript 封装在一个 shadow root 中，使得组件的样式和行为对应用程序的其余部分不会造成影响。
我们可以通过创建一个 shadow root 将 shadow DOM 绑定到某个元素上。如下所示：
class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); // 创建 shadow root } ... }
在这个示例中，我们使用 class 继承 HTMLElement，然后在其构造函数中调用 attachShadow 方法来创建一个 shadow root。attachShadow 方法接受一个 mode 参数，在这里，我们传入的是 "open"，表示我们希望 shadow root 的内容可以通过 JavaScript 或 CSS selector 进行访问。
什么是 slot？
slot 是 shadow DOM 技术的另一个关键特性。它允许父组件在 shadow DOM 中定义一个插槽，供子组件填充内容。插槽可以根据子组件的需要动态调整。
我们可以在 shadow DOM 中定义插槽，如下所示：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- ------------------- ----- ------ --- -- -- ------ ---- ----- -------- - ----------------------------------- ------------------ - - ------- -------- - ------- --- ----- ------ -------- ----- - -------- ---- ---------------- ----- ---------------------- ------ -- -------------------------------------------------------------- - -展开代码
在这个示例中，我们使用 document.createElement('template') 创建了一个 HTML 模板，并在其中定义了一个名为 "content" 的插槽。在组件的 div 中，我们可以将插槽放置在任何位置，以便动态调整其内容的位置。
shadowDOM 和 slot 的用途
Shadow DOM 和 slot 可以帮助我们创建高度可重用的组件，其中样式、模板和行为都彼此独立，并且仅对组件本身可见。这使得我们可以避免组件之间的命名冲突，并且可以更好地组织应用程序中的代码。
示例代码
下面是一个演示 shadowDOM 和 slot 的完整 Web Components 示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----------------- -------- ----- ----------- ------- ----------- - ------------- - -------- ------------------- ----- ------ --- -- -- ------ ---- ----- -------- - ----------------------------------- ------------------ - - ------- -------- - ------- --- ----- ------ -------- ----- - -------- ---- ---------------- --------- -------------------------- ---------- ---------------------------- ------ -- -------------------------------------------------------------- - - ------------------------------------- ------------- --------- ------- ------ -------------- ---- ------------------- ------------ ---- ------------------- -- -- ---------------- --------------- ------- -------展开代码
在这个示例中，我们定义了一个 MyComponent 类，并将其注册为 custom element。组件的模板中包含一个名为 "header" 的插槽和一个名为 "content" 的插槽，分别用于显示组件的标题和内容。我们可以在应用程序的其他部分中使用该组件，并向其提供不同的内容。
小结
Shadow DOM 和 slot 可以为 Web Components 提供更灵活和强大的功能，帮助我们创建可重用的组件化应用程序。我们可以使用 shadow DOM 封装组件的 HTML、CSS 和 JavaScript，使得它们可以具有隔离性。slot 则可以允许父组件定义插槽，用于在 shadow DOM 中填充子组件的内容。希望这篇文章对你有帮助，让你更好地理解 Web Components 的基本概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ceaf8ee46428fe9e93a249
