自定义元素（Custom Elements）是 Web Components 技术的核心之一。自定义元素可以让开发者定义出属于自己的 HTML 元素，把复杂的元素封装为简单易用的组件，提升了组件化开发的效率。然而，在编写自定义元素时，开发者也可能会遇到一些常见的错误。本文将详细介绍 Custom Elements 开发中的常见错误，并提供相应的解决方法和指导意义。
错误一：使用了无效的自定义元素名称
在编写自定义元素时，定义的元素名称必须符合标准的自定义元素名称规则：名称必须包含一个短横线，且不能以短横线开头。如果不符合这个规则，则浏览器将无法识别该元素，导致出错。
下面是一个错误的示例：
<my-custom-element> <!-- ... --> </my-custom-element>
这个示例中定义了一个自定义元素名称为 my-custom-element，名称中缺少短横线，浏览器无法识别该元素，会报错。
正确的示例应该是：
<my-custom-element> <!-- ... --> </my-custom-element>
错误二：未继承 HTMLElement
定义自定义元素的最重要的一步是继承原生的 HTMLElement 类。如果不继承 HTMLElement，浏览器将无法正确解析该元素的标签，导致出错。
下面是一个错误的示例：
class MyCustomElement {
// ...
}
customElements.define('my-custom-element', MyCustomElement);这个示例中定义了一个自定义元素 my-custom-element，但是没有继承 HTMLElement 类，浏览器无法正确解析该元素，会报错。
正确的示例应该是：
class MyCustomElement extends HTMLElement {
// ...
}
customElements.define('my-custom-element', MyCustomElement);错误三：未实现 connectedCallback
当一个自定义元素被插入到文档中时，connectedCallback 方法会被调用。在其中可以进行一些初始化操作。如果没有实现 connectedCallback 方法，自定义元素无法正确初始化，导致出错。
下面是一个错误的示例：
class MyCustomElement extends HTMLElement {
disconnectedCallback() {
// ...
}
}
customElements.define('my-custom-element', MyCustomElement);这个示例中定义了一个自定义元素 my-custom-element，但是没有实现 connectedCallback 方法，自定义元素无法正确初始化，会报错。
正确的示例应该是：
class MyCustomElement extends HTMLElement {
connectedCallback() {
// ...
}
}
customElements.define('my-custom-element', MyCustomElement);错误四：未实现 disconnectedCallback
当一个自定义元素被从文档中移除时，disconnectedCallback 方法会被调用。在其中可以进行一些清理操作。如果没有实现 disconnectedCallback 方法，自定义元素无法正确清理，导致出错。
下面是一个错误的示例：
class MyCustomElement extends HTMLElement {
connectedCallback() {
// ...
}
}
customElements.define('my-custom-element', MyCustomElement);这个示例中定义了一个自定义元素 my-custom-element，但是没有实现 disconnectedCallback 方法，自定义元素无法正确清理，会报错。
正确的示例应该是：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
-- ---
-
---------------------- -
-- ---
-
-
------------------------------------------ -----------------错误五：未实现 observedAttributes
自定义元素有时需要监听自己的属性变化。可以通过实现 observedAttributes 方法来实现属性监听函数。如果没有实现 observedAttributes 方法，自定义元素无法监听自己的属性变化，导致出错。
下面是一个错误的示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
-- ---
-
---------------------- -
-- ---
-
-
------------------------------------------ -----------------这个示例中定义了一个自定义元素 my-custom-element，但是没有实现 observedAttributes 方法，自定义元素无法监听自己的属性变化，会报错。
正确的示例应该是：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
-- ---
-
---------------------- -
-- ---
-
------ --- -------------------- -
------ --------- ---------
-
------------------------------ --------- --------- -
-- ---
-
-
------------------------------------------ -----------------错误六：未使用 constructor 方法
在自定义元素中，constructor 方法用来初始化自定义元素实例。如果没有定义 constructor 方法，自定义元素的实例无法正确初始化，导致出错。
下面是一个错误的示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
-- ---
-
---------------------- -
-- ---
-
------ --- -------------------- -
------ --------- ---------
-
------------------------------ --------- --------- -
-- ---
-
-
------------------------------------------ -----------------这个示例中定义了一个自定义元素 my-custom-element，但是没有定义 constructor 方法，自定义元素的实例无法正确初始化，会报错。
正确的示例应该是：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-- ---
-
------------------- -
-- ---
-
---------------------- -
-- ---
-
------ --- -------------------- -
------ --------- ---------
-
------------------------------ --------- --------- -
-- ---
-
-
------------------------------------------ -----------------总结
Custom Elements 技术是实现 Web Components 的核心技术之一。在编写自定义元素时，可能会遇到一些常见的错误。本文详细介绍了 Custom Elements 开发中避免的常见错误，并提供了相应的解决方法和指导意义。开发者应该注意避免这些常见错误，提升自定义元素的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ab9d43add4f0e0ff5450e8