什么是 Custom Elements？
Custom Elements 是 Web Components 标准的一部分，它可以让我们创建属于自己的 HTML 标签，从而可以更好地组织和封装 Web 应用中的 UI 组件。使用 Custom Elements 开发组件，不仅可以让代码更加模块化，还可以提高可复用性和可维护性。
数据绑定
在组件中使用数据绑定可以让我们更好地管理组件内部的状态以及控制组件的渲染。Custom Elements 中数据绑定的实现方式有很多种，包含了常见的各式各样的模板引擎与框架，这里我们就来了解一下其中常用的两种数据绑定方式：属性和 Shadow DOM。
属性绑定
在 Custom Elements 组件中，我们可以通过自定义属性来实现组件与外界传递数据的过程，代码如下：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------ --- -------------------- -
------ --------
-
------------- -
-------
---------- - --
-
--- ------ -
------ ----------
-
--- ----------- -
---------- - -----
------------------------- ------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
---------- - --------
-------------
-
-
------------------- -
-------------
-
-------- -
-------------- - --- ----- --------------
-
-
------------------------------------- ------------在上面的代码中，我们将 data 定义为一个可观察属性，当属性值发生改变时，attributeChangedCallback 回调函数就会被触发，我们可以在该函数中重新渲染组件。
在组件内部，我们可以通过 this.getAttribute('data') 来获取到属性值，通过 this.setAttribute('data', value) 来设置属性值，在外部我们可以通过以下方式来与组件进行交互：
<my-component data="foo"></my-component>
Shadow DOM 绑定
Shadow DOM 可以让我们在组件内部隔离 CSS 和 DOM 结构，使之不被外部影响，但是也带来了组件内部样式的定义和使用问题，我们可以使用 Shadow DOM 的 slot 属性来解决这个问题，代码如下：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
-------
------------------- ----- ------ --
-
--- ------ -
------ -------------------------
-
--- ----------- -
------------------------- ------
-
------------------- -
-------------
-
-------- -
------------------------- - -
-------
----- -
-------- ------
-
---------- -
-------- -----
------- --- ----- -----
-
--------
---- ------------------
-------------
----- ----- ----------------
------
-
-
-
------------------------------------- ------------在上面的代码中，我们使用 attachShadow 函数来创建 Shadow DOM，通过 :host 伪类来定义组件本身，通过 slot 来定义一些可以被外界传递的内容，这些内容可以包含部分渲染函数等。
使用方式如下：
<my-component data="foo"> <span>Hello, World!</span> </my-component>
事件监听
在组件中，我们需要监听一些事件来响应用户行为，如输入框中的输入事件、按钮的点击事件等等。Custom Elements 中，我们可以使用 addEventListener 函数来监听事件，以及使用 dispatchEvent 函数来触发事件。代码如下：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
-------
------------------- ----- ------ --
------------------------- - -
------------- ------------
-
----- ------ - ---------------------------------------
-------------------------------- --- -- -
---------------------- ----------------------- -
------- -
-------- ------- -------
-
---
--
-
-
------------------------------------- ------------在上面的代码中，我们使用 addEventListener 来监听 click 事件，并在回调函数中使用 dispatchEvent 触发一个自定义事件。在组件外部，我们可以像监听普通的 DOM 元素一样监听自定义事件：
const component = document.querySelector('my-component')
component.addEventListener('my-event', evt => {
console.log(evt.detail.message)
})总结
在本文中，我们详细介绍了 Custom Elements 组件中的数据绑定和事件监听的实现方式，以及示例代码，可以在实际项目开发中运用。Custom Elements 作为 Web Components 的核心之一，有着非常好的可复用性和可维护性，值得开发者们尝试和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a916848841e989477a7d5