Web Components 是一种用于创建可重用组件的技术，它能够让你在 Web 上构建更加灵活、可维护和可扩展的应用程序。Web Components 由三个主要的技术组成：Custom Elements、Shadow DOM 和 HTML Templates。在本篇文章中，我们将分别介绍这三个技术的基础和进阶用法，并提供示例代码和指导意义。
Custom Elements
Custom Elements 是 Web Components 中最基础的技术，它可以让你创建自定义的 HTML 元素。Custom Elements 的基本用法非常简单，你只需要使用 window.customElements.define() 方法来定义一个自定义元素，然后在 HTML 中使用该元素即可。下面是一个最简单的 Custom Elements 示例代码：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
-
-
------------------------------------------ -----------
---------在上面的代码中，我们定义了一个名为 my-element 的自定义元素，并在 constructor() 中设置了它的内部文本为 Hello, World!。在 HTML 中使用该元素时，它会自动显示出该文本。
Custom Elements 还有许多其他的高级用法，例如：
- 自定义元素的属性和方法
- 自定义元素的生命周期钩子函数
- 自定义元素的样式和事件
这些高级用法能够让你更加灵活和自由地创建自定义元素，使得它们更加适合你的应用程序需求。下面是一个自定义元素的高级示例代码：
-- -------------------- ---- -------
---------- ----------------- ---------------
--------
----- -------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
------ -
------- -----
-------------- ----
----------------- ---------------------------- -- --------
------ ------
-------- --- -----
------- --------
-
--------
--------
-------------
---------
--
------------------------------ -- -- -
------------- -----------
---
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
------------------------------------------------------------- - ---------
-
-
-
----------------------------------------- ----------
---------在上面的示例代码中，我们创建了一个名为 my-button 的自定义元素，它具有一个名为 color 的属性和一个点击事件。我们使用了 Shadow DOM 技术来隐藏自定义元素内部的样式和结构，并使用了 HTML Templates 技术来插入自定义元素内部的文本内容。同时，我们还通过 observedAttributes 静态属性来监听自定义元素属性的变化，并在 attributeChangedCallback() 方法中更新了自定义元素的样式。
Shadow DOM
Shadow DOM 是 Web Components 中用于创建封装的 DOM 的技术，它可以让你将自定义元素内部的样式和结构隐藏起来，从而使得自定义元素更加容易维护和扩展。Shadow DOM 的基本用法非常简单，你只需要在自定义元素的 constructor() 方法中使用 this.attachShadow() 方法来创建一个 Shadow DOM，然后在其中插入你想要隐藏的样式和结构即可。下面是一个最简单的 Shadow DOM 示例代码：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
--------- ----------
--
-
-
------------------------------------------ -----------
---------在上面的代码中，我们创建了一个名为 my-element 的自定义元素，并在它的 Shadow DOM 中隐藏了一个文本段落。我们使用了 :host 伪类来设置自定义元素的样式，使得它具有了一个灰色的背景和一些内边距。
Shadow DOM 还有许多其他的高级用法，例如：
- 使用
<slot>元素来插入外部内容 - 使用
<style>元素来插入局部样式 - 使用
:host()伪类来设置自定义元素的样式
这些高级用法能够让你更加灵活和自由地控制自定义元素的样式和结构，使得它们更加适合你的应用程序需求。下面是一个 Shadow DOM 的高级示例代码：
-- -------------------- ---- -------
-------------
---------- ---------------- -------------
---------- ---------------- -------------
---------- ---------------- -------------
--------------
--------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
-------
----- -
-------- -------------
--------- ---------
-
------ -
------- -----
-------- --- -----
----------------- --------
------- --------
-
-- -
--------- ---------
---- -----
----- --
------ --
----------------- ------
------- --- ----- -----
----------- -----
-------- --
------- --
-------- -----
-
-- -
-------- --- -----
------- --------
-
-------- -
----------------- --------
-
------------- -- -
-------- ------
-
--------
------- -------------------------------------------
----- -------------------- -- -------------
---------
----
-------------
-----
--
-
---------------- -
-----------------------------
-
-
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
----------------------------
--
-
-
------------------------------------------- ------------
----------------------------------------- ----------
---------在上面的示例代码中，我们创建了一个名为 my-dropdown 的自定义元素，并在它的 Shadow DOM 中隐藏了一个按钮和一个下拉列表。我们使用了 <slot> 元素来插入外部内容，并使用了 :host() 伪类来设置自定义元素的样式。同时，我们还创建了一个名为 my-option 的自定义元素，它用于表示下拉列表中的一个选项。我们使用了 <li> 元素来封装 my-option 的内容，并在它的 Shadow DOM 中隐藏了该元素的样式。
HTML Templates
HTML Templates 是 Web Components 中用于创建可重用 HTML 片段的技术，它可以让你将一些常用的 HTML 结构封装为模板，从而避免重复编写代码。HTML Templates 的基本用法非常简单，你只需要在 HTML 中使用 <template> 元素来定义一个模板，然后在 JavaScript 中使用 document.importNode() 方法来导入该模板并插入到 DOM 中即可。下面是一个最简单的 HTML Templates 示例代码：
-- -------------------- ---- ------- --------- ----------------- --------- ---------- ----------- -------- ----- -------- - ----------------------------------------------- ----- ---- - ----------------------------- ------ -------------------------------- ---------
在上面的代码中，我们创建了一个名为 my-template 的模板，并在其中定义了一个文本段落。在 JavaScript 中，我们使用了 document.importNode() 方法来导入该模板，并插入到了 <body> 元素中。
HTML Templates 还有许多其他的高级用法，例如：
- 使用
<slot>元素来插入外部内容 - 使用
<template>元素的data-*属性来传递参数 - 使用 JavaScript 来动态生成模板
这些高级用法能够让你更加灵活和自由地控制 HTML Templates 的内容和结构，使得它们更加适合你的应用程序需求。下面是一个 HTML Templates 的高级示例代码：
-- -------------------- ---- -------
---------
--------- ------------------------
--------- -------------------------
---------- --------------------------------
----------
--------
----- ------------ - -----------------------------------
---------------------- - -
-------
---- -
-------- -----
--------------- -------
---- -----
-
--------
------
-------------
-------
--
----- ------ ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------------------------------------------------
-
-
----- ------------- - -----------------------------------
----------------------- - -
-------
----- -
-------- ------
-------------- ----
------------ -----
-
----- -
------- --- ----- -----
-------------- ----
-------- --- -----
---------- -----
-
--------
---------------
-------
--
----- ------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----------------------------------------------------------
----------------------------------------- - ---------------------------
-
-
----- -------------- - -----------------------------------
------------------------ - -
-------
------ -
------- -----
-------------- ----
----------------- -----
------ ------
-------- --- -----
------- --------
-
--------
-----------------
--
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-----------------------------------------------------------
------------------------------------------ - -----------------
-
-
--------------------------------------- --------
---------------------------------------- ---------
----------------------------------------- ----------
---------在上面的示例代码中，我们创建了一个名为 my-form 的自定义元素，并在它的 Shadow DOM 中隐藏了一个表单。我们使用了 <slot> 元素来插入外部内容，并使用了 display: flex 属性来设置表单的布局。同时，我们还创建了一个名为 my-input 的自定义元素，它用于表示表单中的一个输入框。我们使用了 <label> 元素来显示输入框的标签，并使用了 <input> 元素来表示输入框本身。最后，我们还创建了一个名为 my-button 的自定义元素，它用于表示表单中的一个提交按钮。我们使用了 <button> 元素来表示提交按钮，并使用了 background-color: blue 属性来设置按钮的样式。
结论
Web Components 是一种非常强大的技术，它能够让你在 Web 上构建更加灵活、可维护和可扩展的应用程序。本篇文章介绍了 Web Components 的三个主要技术：Custom Elements、Shadow DOM 和 HTML Templates，并提供了详细的示例代码和指导意义。希望本篇文章能够帮助你更好地理解 Web Components，并在你的应用程序中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bb4bf78388e33bb2604dc