自定义元素是 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 开发中非常重要的一环，自定义元素也不例外。开发者应该遵守一定的命名规范，例如使用小写字母、短中划线等，从而使自定义元素的名称更加可读、易于理解和使用。
示例代码
下面是一个自定义元素的示例代码，其中包含了上述讲解的所有标准属性：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Custom Element</title>
</head>
<body>
<my-element foo="bar"></my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
}
static get observedAttributes() {
return ['foo'];
}
connectedCallback() {
this.style.color = 'red';
this.addEventListener('click', handleClick);
}
disconnectedCallback() {
this.removeEventListener('click', handleClick);
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
}
}
customElements.define('my-element', MyElement);
function handleClick() {
console.log('Element clicked');
}
</script>
</body>
</html>以上就是自定义元素中的标准属性的详细介绍。了解这些标准属性不仅可以更好地理解自定义元素，还可以增强开发者对 Web Components 技术的掌握和应用能力，实现更为灵活、可维护和可用的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0066ee46428fe9ec8561a