Web Components 技术是一种使用 HTML、CSS 和 JavaScript 创建可重用组件的方法，它使开发者可以把这些组件在多个项目中使用，并且内部的逻辑和样式都是独立的。在 Web Components 中，自定义属性绑定是实现组件间通信的一种重要方式，下面我们来详细介绍一下。
什么是自定义属性
在 HTML 中，标签可以使用内置属性，比如 id、class、style 等，但是有时候这些内置属性不能满足我们的需求，此时就需要自定义属性了。自定义属性可以通过 data-* 格式来定义，其中 * 可以是你想要的任何名称，比如 data-color。
自定义属性可以存储任意的数据，包括字符串、数字、对象等等。在 JavaScript 中，可以使用 dataset 属性来获取和设置元素的自定义属性值。
自定义属性绑定
Web Components 中，自定义属性绑定（Custom Properties Binding）可以让开发者在组件内部定义一些自定义属性，并将它们与组件外部的数据进行绑定，从而实现数据的双向通信。这种方式相比于全局状态管理工具，更加灵活和方便，同时也更加符合 Web Components 的理念。
首先，在 Web Components 中定义自定义属性，可以使用 data-* 属性或者 CSS 变量（Custom Properties）。比如，我们要定义一个 bg-color 属性，可以这样写：
<my-component data-bg-color="#f00"></my-component> <my-component style="--bg-color: #f00;"></my-component>
然后，在组件内部，我们就可以使用 this.dataset.bgColor 或者 getComputedStyle(this).getPropertyValue("--bg-color") 来获取这个属性的值了，并且还可以在组件内部使用 this.style.--bg-color 或者 var(--bg-color) 来使用这个属性值。
但是，这种方式只是让组件的内部可以使用自定义属性，如果要实现和外部数据的双向绑定，我们还需要使用事件监听和事件派发机制。
自定义属性绑定的实现
Web Components 规范定义了一些非常有用的事件，可以用来监听属性值的变化和派发自定义事件。
首先，我们可以在组件内部使用 Object.defineProperty 方法来定义一个与自定义属性对应的 DOM 属性，比如 bgColor。这个 DOM 属性会自动监听 bg-color 属性的变化，并触发一个 attributeChangedCallback 回调函数。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ -------------
-
------------------- -
-------------------------- - -------------
-
------------------------------ ------- ------- -
-- ----- --- ----------- -
------------ - -------
---------------------- ------------------------------ - ------- ------ ----
-
-
--- --------- -
------ ------------------------------
-
--- ------------ -
----------------------------- -----
-
-
------------------------------------- -------------然后，我们可以在 Web Components 外部使用 setAttribute 方法，来设置组件的 bg-color 属性，并监听 bg-color-change 事件来响应属性值的变化。
const component = document.querySelector('my-component');
component.addEventListener('bg-color-change', e => {
console.log(e.detail); // => #f00
});
component.setAttribute('bg-color', '#f00');总结
通过自定义属性绑定的方式，我们可以在组件内部与外部数据实现双向通信，这种方式更加符合 Web Components 的理念，同时也更加灵活和方便。需要注意的是，在 Web Components 中，自定义属性和 DOM 属性是两个不同的概念，它们之间的通信需要通过事件监听和派发来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64851fb748841e989440cfe1