什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 标签，从而创建出属于自己的组件。通过 Custom Elements，我们可以将组件的结构、样式和行为打包在一起，以便在多个页面中复用。
为什么会出现组件状态冲突
由于 Custom Elements 允许我们自定义 HTML 标签，因此它们在页面中的使用方式与普通 HTML 标签有所不同。普通 HTML 标签是静态的，而 Custom Elements 则可以拥有自己的状态。这种状态可能会在组件实例之间发生冲突，导致组件行为异常。
举个例子，假设我们有一个自定义元素 <x-counter>，用于展示一个计数器。当用户点击计数器时，计数器的值会增加。但是，如果我们在同一个页面中使用了多个 <x-counter>，那么它们之间的状态就会发生冲突，导致计数器的值不再是预期的。
如何避免组件状态冲突
使用 Shadow DOM
Shadow DOM 是一种将组件的样式和行为隔离到自己的作用域中的技术。通过使用 Shadow DOM，我们可以确保每个组件实例都有自己的样式和行为，从而避免组件状态冲突。
我们可以使用以下代码创建一个 Shadow DOM：
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
// 在 shadow 中创建组件结构和样式
}
}在上面的代码中，我们使用 attachShadow 方法创建了一个 Shadow DOM，并将其附加到了当前组件实例上。在 Shadow DOM 中，我们可以使用 CSS 和 JavaScript 来定义组件的样式和行为。
使用属性传递状态
除了使用 Shadow DOM，我们还可以使用属性来传递组件状态。通过将状态保存在属性中，我们可以确保每个组件实例都有自己的状态，从而避免组件状态冲突。
在下面的示例代码中，我们使用 attributeChangedCallback 方法来监听属性变化，并在属性变化时更新组件的状态：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
----------- - --
-
------------------- -
--------------
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
----------- - -----------------
--------------
-
-
-------- -
-------------- - -
----------- --------------------
------- ---------------------------------------------
--
-
----------- -
--------------
-------------------------- -------------
-
-在上面的代码中，我们使用 observedAttributes 方法指定了需要监听的属性列表。当 count 属性发生变化时，我们会在 attributeChangedCallback 方法中更新组件的状态，并重新渲染组件。
总结
通过使用 Shadow DOM 和属性传递状态，我们可以避免 Custom Elements 中的组件状态冲突。在实际开发中，我们应该根据具体的场景选择合适的方式来确保组件状态的独立性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6615139cd10417a222563172