Custom Elements：如何使用构造函数在自定义元素中设置属性？

自定义元素是 Web Components 的主要组成部分之一，它允许开发者创建自己的 HTML 元素，拥有自己的属性和行为。在实现自定义元素时，开发者需要设置它的属性，以便能够在页面上使用它们。本文将向您介绍如何使用构造函数在自定义元素中设置属性。

Custom Elements API 简介

Custom Elements API 是用于创建自定义元素的 Web API，它包括以下两个主要方法：

• customElements.define(name, constructor [, options])：用于定义一个新的自定义元素。
• customElements.get(name)：用于获取已经注册的自定义元素。

定义自定义元素

定义自定义元素需要先创建一个构造函数，该构造函数继承 HTMLElement，然后使用 customElements.define() 方法注册：

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}
customElements.define('my-element', MyElement);

上述代码创建了一个名为 my-element 的自定义元素。注意：在自定义元素的名称中必须包含中划线，这是 Web 标准的要求。

设置属性

在构造函数中，您可以使用 this 关键字将属性添加到自定义元素上。在后续使用该元素时，这些属性将可供外部代码或其他 DOM 元素使用。

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.width = 100;
    this.height = 100;
  }
}
customElements.define('my-element', MyElement);

上述代码定义了两个属性，width 和 height，并将它们添加到了 MyElement 构造函数中。在下面的示例中，您将看到如何在使用自定义元素时访问这些属性。

使用自定义元素

要在 HTML 页面中使用自定义元素，只需要像使用内置元素一样使用它：

<!-- index.html -->
<my-element></my-element>
<script src="my-element.js"></script>

在自定义元素中添加属性后，可以通过添加属性到元素上并在 JavaScript 中使用 getAttribute() 方法访问它们。

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.width = this.getAttribute('width') ?? 100;
    this.height = this.getAttribute('height') ?? 100;
  }
}
customElements.define('my-element', MyElement);

在上述 MyElement 构造函数中，使用 getAttribute() 方法获取元素上的 width 和 height 属性。如果属性不存在，则使用默认值 100。

您还可以使用 setAttribute() 方法以代码方式设置自定义元素的属性：

const myElement = document.createElement('my-element');
myElement.setAttribute('width', '200');
myElement.setAttribute('height', '300');

上面的代码将创建一个新的 my-element 元素，并将其 width 和 height 属性设置为 200 和 300。

总结

Custom Elements API 是用于创建自定义元素的 Web API，通过 define() 方法定义自定义元素，然后在构造函数中使用 this 关键字向自定义元素添加属性，以便外部代码或其他 DOM 元素中可以使用它们。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0b8dcf6b2d6eab3befe88