什么是 Custom Elements
Custom Elements 是一个 Web 标准，允许开发者创建自定义 HTML 标签和元素。使用 Custom Elements 可以大大提高 Web 应用程序的可重用性和可扩展性，同时也能减轻开发者的负担。
下面是 Custom Elements 的工作流程，简单地介绍了如何创建和使用自定义元素。
1. 定义一个自定义元素
要定义一个自定义元素，开发者需要使用一个类来继承 HTMLElement，并在其中实现元素的模板和行为。
-- -------------------- ---- ------- --------- -------------------------------- ------- -- ---- -- -------- ----- ---- ---- --- ------ ----------- -------- ----- --------------- ------- ----------- - ------------- - -------- -- -------- ------ --- - ----- -------- - -------------------------------------------------------------- ------------------- ----- ------ ----------------------------------------- - - -- ------- ------------------------------------------ ----------------- ---------展开代码
在上面的代码中，定义了一个名为 MyCustomElement 的自定义元素，并注册到系统中。在该元素的构造函数中，将模板内容附加到 Shadow DOM 中，以实现元素的渲染和行为。
2. 使用自定义元素
要使用自定义元素，只需要在 HTML 中使用该元素的标签名即可。
<my-custom-element></my-custom-element>当浏览器渲染到该元素时，会自动调用元素的构造函数，并执行内部的模板和行为。
3. 定义元素属性
自定义元素也可以拥有属性，开发者可以在元素的类中使用属性访问器进行定义和访问。
-- -------------------- ---- ------- ------------------ --------------- -------- ------ ----------------------------- -------- ----- --------------- ------- ----------- - ------------- - -------- ----- -------- - -------------------------------------------------------------- ------------------- ----- ------ ----------------------------------------- - --- ---- - ------ ------------------------ - --- --------- - ----------------------- ------- - --- ------ - ------ -------------------------- - --- ----------- - ------------------------- ------- - - ---------展开代码
在上面的代码中，定义了 id 和 name 两个属性，并在元素的构造函数中实现了属性的访问器。当元素被渲染时，可以通过 getAttribute 和 setAttribute 方法来设置和读取元素的属性。
4. 响应属性变化
当元素的属性值发生变化时，开发者也可以通过实现元素的 attributeChangedCallback 回调函数来响应变化。
-- -------------------- ---- ------- ------------------ --------------- -------- ------ ----------------------------- -------- ----- --------------- ------- ----------- - -- --- ------ --- -------------------- - ------ ------ -------- - ---------------------------------- ------- ------- - ------ ---------- - ---- ----- --------------- -- ------- -- -- -------- ------ ---- ------- ----------------- -- ------- -- -- -------- ------ - - - ---------展开代码
在上面的代码中，通过 definedAttributes 方法来定义需要观察的属性，当属性值发生变化时，会自动调用 attributeChangedCallback 方法，并传入旧值和新值。开发者可以在该方法中实现相应的处理逻辑。
指导意义
Custom Elements 是一个非常强大的 Web 技术，并且已经得到了广泛的支持。使用 Custom Elements 可以让开发者在 Web 应用程序中创建自定义的 HTML 元素，提高代码的可重用性和可扩展性。
Custom Elements 的工作流程非常简单，开发者只需要继承 HTMLElement 类并实现自己的模板和行为即可。同时，开发者也可以定义和响应元素的属性变化，来实现更加强大的特性和效果。
在未来，随着更多的 Web 应用程序开始采用 Custom Elements 技术，我们相信这个 Web 标准将变得越来越重要。因此，建议开发者尽早开始学习和使用 Custom Elements，并且不断探索其更加丰富的特性和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc6b45a231b2b7ede04a6d
