Web 组件是一种可重复使用的 Web 元素，可以通过浏览器中的自定义元素支持来创建。在过去，创建自定义元素并将其封装到组件中需要使用一些复杂的技术方案，但是现在有 Shadow DOM 和 Custom Elements 技术可以简化这个过程。在本文中，我们将通过详细的指导和示例代码介绍如何使用 Shadow DOM 和 Custom Elements 实现全套自定义 Web 组件。
Shadow DOM
Shadow DOM 是浏览器提供的一种技术，可以创建一个独立的 DOM 子树，可以将任意 HTML、CSS 和 JavaScript 封装到一个 Web 组件中去。这让你创建一些复杂的、易于维护的、自封装的、可重复使用的 Web 组件。下面是一些比较常用的 Shadow DOM 相关的 API。
Element.attachShadow()
该方法返回一个 ShadowRoot 对象，用于将 Shadow DOM 附加到一个自定义元素上。
const shadowRoot = element.attachShadow({mode: 'open'});ShadowRoot.innerHTML
该属性允许你在 Shadow DOM 中设置 HTML 内容。这个属性可以用来初始设置 Shadow DOM 内容，但不推荐在后面更新 Shadow DOM。
shadowRoot.innerHTML = '<h1>Hello World</h1>';
ShadowRoot.querySelector()
该方法返回 Shadow DOM 中与给定选择器匹配的元素。
const element = shadowRoot.querySelector('.class');Custom Elements
Custom Elements 允许 Web 开发者定义新的 HTML 元素，并封装这些元素的样式和行为。通过自定义元素和 Shadow DOM，你可以创建自定义的 Web 组件来扩展 HTML 和浏览器可能需要的默认行为。下面是 Custom Elements 相关的 API。
window.customElements.define()
该方法用于定义自定义元素。该方法接受三个参数：tag name、CustomElementConstructor 和 options。其中 CustomElementConstructor 是需要扩展 HTMLElement 的 JavaScript 类。
class MyElement extends HTMLElement {
// Define your custom element HTML, CSS, and JS here...
}
customElements.define('my-element', MyElement);CustomElementRegistry.get()
该方法返回给定名称的自定义元素的定义。
const MyElementClass = customElements.get('my-element');HTMLElement.connectedCallback()
该方法在 Custom Element 和 Shadow DOM 成功的插入到页面上时调用。
connectedCallback() {
// Initialize your custom element here...
}全套自定义 Web 组件
现在，我们已经了解了 Shadow DOM 和 Custom Elements，下面我们来创建一个自定义的全套 Web 组件。该组件包含一个模态框和一个带 X 按钮的标题。当模态框显示的时候，背景将是半透明的，并且所有的鼠标事件都将被禁用，直到模态框关闭。下面是该组件的 HTML 和 CSS 结构。
<my-modal> <h2 slot="title"> Modal Title </h2> <div slot="content"> Modal Content </div> </my-modal>
-- -------------------- ---- ------- --------- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- -------- ----- --------------- ------- ---------------- ------- ------------ ------- ----------------- ---------------- -------- ----- --------------- ----- - ----------------- - --------------- ---- - --------- ---------- - --------- --------- ------ ---- ----------- ---- ----------------- ------ ----------- ----- ----------- - - ---- ------- -- -- ----- --------------- ----- - --------- ------ - -------- ----- ---------------- -------------- ------------ ------- -------------- --- ----- ----- -------- ---- - --------- ------ - ------ ----- ------- ----- -------------- ---- ------- ----- ----------------- ----- ------ ------ ---------- ----- ------------ ----- -------- ----- ---------------- ------- ------------ ------- ------- -------- - --------- -------- - -------- ---- -
下面是该组件的 JavaScript 实现。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-- ------ -------- --- ------- --
--------
---- -----------------
---- ------------------
---- --------------
----- ------------------ ------------
------- ------------------------
------
---- ----------------
----- -------------------- --------------
------
------
--------
----- ----------- - -----------------------------------
------------------------------------- -----------------------
-
------ --- -------------------- -
------ -----------
-
------------------------------ --------- --------- -
-- --------- --- --------- -
-- --------- --- ------- -
----------------------------------------------------------------- ----
---------------------------- - ---------
- ---- -
---------------------------------------------------------------------
---------------------------- - ---
-
-
-
------------------- -
-------------
-
------ -
--------------------------- ----
-
------- -
-------------------------------
-
-
--------------------------------- ---------总结
在本文中，我们介绍了 Shadow DOM 和 Custom Elements 技术，并详细地介绍了如何使用这些技术创建全套自定义 Web 组件。通过组件的 HTML、CSS 和 JavaScript 实现，我们展现了如何创建一个模态框组件。这个例子基本涵盖了基础，希望本文能够帮助你了解如何创建自定义的 Web 组件，并且在你日常的开发中能够发挥其作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ac76548841e98948f1c8d