Custom Elements 是 web components 技术的重要组成部分，能够让我们创建自定义标签并在浏览器中使用。在前端开发中，我们可以利用 Custom Elements 提高代码复用性、提升代码组织性，但是在实际使用中，也存在一些需要注意的细节和踩坑。
本文将介绍 Custom Elements 的应用与踩坑经验，并展示相关示例代码。
Custom Elements 的应用
1. 创建自定义组件
通过 Custom Elements，我们可以快速的创建自定义组件，这样我们就能更加灵活的构建页面，减少代码冗余，推动组件化开发。
<!-- 创建一个名为 my-element 的自定义组件 --> <my-element></my-element>
-- -------------------- ---- -------
-- ---- --------- ------- -----------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
---------------- - --------
-
-
-- -------
----------------------------------- -----------上面代码中，我们定义了一个名为 MyElement 的类，这个类继承自 HTMLElement，可以看作是自定义组件的原型，因为它在自定义组件处于生命周期内会被实例化。然后，我们使用 customElements.define('my-element', MyElement) 来定义一个名为 my-element 的自定义组件，该组件在页面中使用时就会自动调用 MyElement 类的实例化方法。
在自定义组件中，我们可以根据需要设置元素的属性、事件和样式等，灵活应用于实际需求之中。
2. 封装现有元素
除了创建自定义组件外，我们还可以通过封装现有元素来扩展其功能。例如，我们可以为 input 元素添加一个自定义的验证规则。
<!-- 封装 input 元素 --> <my-input></my-input>
-- -------------------- ---- -------
----- ------- ------- ---------------- -
------------- -
--------
-
------------------- -
------------------------------ ------------------
-
------------------ -
----- ----- - -------------------
-- -------------------------- -
-----------------------
----------------------------------
- ---- -
---------------------------
-
-
-
--------------------------------- -------- - -------- ------- ---上面代码中，我们定义了一个名为 MyInput 的类，该类继承自 HTMLInputElement，这意味着我们可以用它来代替 input 元素。然后，我们在 MyInput 类中重写了 input 的事件，并添加了自己的验证规则。最后，我们使用 customElements.define('my-input', MyInput, { extends: 'input' }) 来注册一个扩展了 input 元素的组件。在使用时，只需使用 <my-input> 标签代替 input 元素即可。
Custom Elements 的踩坑记录
1. Shadow DOM 下的样式问题
在使用 Shadow DOM 时，我们经常会遇到样式失效的问题。这是因为 Shadow DOM 会将其内部的样式隔离到一个独立的作用域中，如果要在外部修改 Shadow DOM 的样式，我们需要使用 ::part() 或者 ::theme() 进行样式穿透。
-- -------------------- ---- -------
---- -- -------- -- ------ --- -- ---
------------
-- -----------------------
-------------
-------
------------------------- -
------ ----
-
--------上面代码中，我们为 my-element 的子元素添加了 part="content" 属性，表示该元素属于 content 部分。然后，我们在样式中使用 my-element::part(content) 选择器来修改该元素的样式，这样就可穿透到 Shadow DOM 中的样式，并让其在同个样式作用域下生效。
2. 自定义组件暴露 API 的问题
在开发自定义组件时，我们需要暴露一些 API，以便让组件的使用者在外部进行控制。但是，直接将方法或属性添加到组件中，会让我们的组件变得复杂且难以维护，为了解决这个问题，我们可以将 API 抽离成 mixins 或者 option 的形式。
-- -------------------- ---- -------
----- ------- - ------------ -- -
------ ----- ------- ---------- -
------ -
--------------------
-
------ -
--------------------
-
-
--
----- --------- ------- -------------------- -
------------- -
--------
-
------------------- -
------------
-
-
----------------------------------- -----------上面代码中，我们将 API 暴露成了 MyMixin，它是一个函数，接受一个 SuperClass 父类，返回一个继承自 SuperClass 父类的子类，在 MyMixin 子类中，我们定义了 show 和 hide 两个方法。然后，在 MyElement 类中，我们继承了 MyMixin 并可以直接调用暴露出来的 show 方法。这样做可以让我们的组件更加的简单清晰，并便于其他项目中复用。
总结
Custom Elements 是一项非常重要的 web components 技术，可以帮助我们创建自定义组件、封装现有元素，并提高代码组织性。在实际应用中，为了避免一些常见问题和踩坑，我们需要注意 Shadow DOM 下的样式穿透问题和自定义组件的 API 暴露问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6593ecf5eb4cecbf2d88a72f