自定义元素是 Web Components 技术的核心，它允许开发者创建自己的 HTML 标签，实现更为丰富和灵活的功能。但是，自定义元素必须包含一些标准属性，用于与其他 HTML 元素进行交互。本文将详细介绍自定义元素中的标准属性，包括其使用方法、深入讲解以及实用指南。
标准属性
自定义元素需要实现以下标准属性：
1. tagName
tagName 属性用于指定自定义元素的标签名称，必须以字母开头，需要符合 HTML 规范，例如 my-element。
示例：
<my-element></my-element>2. observedAttributes
observedAttributes 属性是一个数组，包含了自定义元素所观察的属性名称。当这些属性发生变化时，会触发 attributeChangedCallback 回调函数。
示例：
class MyElement extends HTMLElement { static get observedAttributes() { return ['foo', 'bar']; } }
3. connectedCallback
connectedCallback 是一个回调函数，当自定义元素第一次被插入到 DOM 中时会触发。通常在这个回调函数里进行一些初始化操作，如插入样式、设置事件监听器等。
示例：
class MyElement extends HTMLElement { connectedCallback() { this.style.color = 'red'; this.addEventListener('click', handleClick); } }
4. disconnectedCallback
disconnectedCallback 是一个回调函数，当自定义元素从 DOM 中移除时会触发。这个回调函数通常用于清理工作，如移除事件监听器等。
示例：
class MyElement extends HTMLElement { disconnectedCallback() { this.removeEventListener('click', handleClick); } }
5. attributeChangedCallback
attributeChangedCallback 是一个回调函数，当自定义元素观察的属性发生变化时会触发。这个回调函数接收三个参数：name、oldValue 和 newValue。
示例：
class MyElement extends HTMLElement { static get observedAttributes() { return ['foo']; } attributeChangedCallback(name, oldValue, newValue) { console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`); } }
深入讲解
1. tagName
tagName 属性是自定义元素的核心属性之一。它决定了自定义元素的标签名称，规范化标签名称的方法是将其转换为小写字母。例如，如果将 tagName 设为 my-element，那么实际上创建的元素标签就应该是 <my-element>。值得注意的是，标签名称必须符合 HTML 规范，例如不能包含空格、特殊字符等。
2. observedAttributes
observedAttributes 属性是一个数组，用于指定需要观察的属性。当某个属性发生变化时，会触发 attributeChangedCallback 回调函数，从而实现对自定义元素属性的监听和控制。如果没有指定 observedAttributes 属性，将不能监听属性变化，从而影响到自定义元素的交互和功能。
3. connectedCallback
connectedCallback 回调函数主要用于自定义元素的初始化工作，例如添加样式、设置事件监听器等。该回调函数在自定义元素第一次被插入到 DOM 中时触发，可以使开发者对自定义元素的外观进行初始化，从而确保其兼容性和可用性。
4. disconnectedCallback
与 connectedCallback 相对的是 disconnectedCallback，它在自定义元素从 DOM 中移除时触发，通常用于清理工作，例如移除事件监听器等。对于需要频繁添加和移除的自定义元素，这个回调函数尤其重要，可以提高代码的可维护性和健壮性。
5. attributeChangedCallback
attributeChangedCallback 回调函数是自定义元素的核心之一，它可以监听并处理自定义元素属性发生的变化。这个回调函数接收三个参数：属性名称、旧值和新值。通过这些参数可以实现对自定义元素属性的监听和操作，从而实现更为灵活、可用和安全的交互功能。
实用指南
1. 观察重要属性
在设计自定义元素时，要尽可能观察到重要的属性，以实现对这些属性的监听和处理。观察到的属性越多，自定义元素的灵活性和可维护性就越高。
2. 利用回调函数
自定义元素的回调函数非常重要，尤其是 connectedCallback 和 disconnectedCallback。开发者需要在这些回调函数中设置相应的初始化和清理操作，以确保自定义元素在 DOM 中的兼容性和可用性。
3. 命名规范
命名规范是 web 开发中非常重要的一环，自定义元素也不例外。开发者应该遵守一定的命名规范，例如使用小写字母、短中划线等，从而使自定义元素的名称更加可读、易于理解和使用。
示例代码
下面是一个自定义元素的示例代码，其中包含了上述讲解的所有标准属性：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- ------------- --------------- ------- ------ ----------- ----------------------- -------- ----- --------- ------- ----------- - ------------- - -------- - ------ --- -------------------- - ------ -------- - ------------------- - ---------------- - ------ ------------------------------ ------------- - ---------------------- - --------------------------------- ------------- - ------------------------------ --------- --------- - ---------------------- ------- ------- ---- ----------- -- -------------- - - ----------------------------------- ----------- -------- ------------- - -------------------- ---------- - --------- ------- -------展开代码
以上就是自定义元素中的标准属性的详细介绍。了解这些标准属性不仅可以更好地理解自定义元素，还可以增强开发者对 Web Components 技术的掌握和应用能力，实现更为灵活、可维护和可用的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0066ee46428fe9ec8561a
