Web Components 是一种构建可重用组件的技术，它可以使前端代码更模块化和可维护。但是在实际开发中，有一些约定细节需要注意。本文将介绍 Web Components 的一些约定细节，以及如何在实际开发中使用它们。
Custom Element 命名
Custom Element 是 Web Components 的核心概念之一，它允许我们创建一个自定义的 HTML 元素，并且可以使用它的自定义标签名称。在自定义元素的命名上，我们应该遵循一些约定：
- 自定义元素名称应该全部使用小写字母，禁止使用大写字母。
- 自定义元素名称应该包含短横线
-。
这样做的原因是为了避免与已有的 HTML 元素或未来将会加入的 HTML 元素名称冲突。例如，我们可以创建一个自定义元素<my-component>:
<my-component></my-component>
注意，自定义元素名称一定要有短横线，例如 <mycomponent> 是不合法的。
Custom Element 生命周期
Custom Element 有一套生命周期函数，可以让我们在元素实例化、渲染和销毁的不同阶段执行代码。下面是 Custom Element 的生命周期函数：
constructor()：当 Custom Element 实例被创建时调用。connectedCallback()：当 Custom Element 被插入到文档中时调用。disconnectedCallback()：当 Custom Element 从文档中被移除时调用。attributeChangedCallback(attrName, oldValue, newValue)：当 Custom Element 的一个属性被添加、移除、修改时调用。
在实际开发中，我们可以利用这些函数完成一些必要的逻辑，例如初始化、网络请求、事件监听、资源释放等。示例代码：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
------------------------ --------------
-
------------------- -
------------------------ ------------
-
---------------------- -
------------------------ ---------------
-
---------------------------------- --------- --------- -
------------------------ --------- ----------- ------- ---- ----------- -- --------------
-
-
------------------------------------- -------------Shadow DOM 封装样式和行为
Shadow DOM 是一种将组件的样式和行为私有化的技术。使用 Shadow DOM，可以防止组件被外部样式和 JavaScript 影响，并且避免样式冲突。在使用 Shadow DOM 时，有一些约定需要注意：
- 自定义元素需要在构造函数中创建 Shadow DOM。可以使用
this.attachShadow({mode: 'open'})创建 Shadow DOM。 - 在 Shadow DOM 中定义样式可以使用
<style>标签，但是需要添加:host伪类，以访问 Custom Element 的样式。 - 在 Shadow DOM 中定义内容需要使用
<slot>标签，它可以让 Custom Element 的子元素插入 Shadow DOM 中的指定位置。
示例代码：
<my-component> <div slot="header">Header</div> <div slot="content">Content</div> <div slot="footer">Footer</div> </my-component>
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
------- --- ----- ------
-
------- -
----------------- --------
-
-------- -
-------- -----
-
------- -
----------------- --------
----------- -------
-------- -----
-
--------
---- ------------
----- ---------------------
------
---- -------------
----- ----------------------
------
---- ------------
----- ---------------------
------
--
-----------------------------------------------------
-
-
------------------------------------- -------------总结
本文介绍了 Web Components 的一些约定细节，包括 Custom Element 命名、生命周期函数和 Shadow DOM。这些约定可以让我们编写更加可重用、可维护、可封装的组件。在实际开发中，我们可以结合这些约定编写高质量的 Web Components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b1c5d968c7c53b0a89e3d