如何使用 Custom Elements 实现可嵌入的 Web 组件-JavaScript中文网-JavaScript教程资源分享门户

什么是 Custom Elements

Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 元素，包括它们的行为和样式。这些自定义元素可以像原生 HTML 元素一样使用，并且可以在不同的页面和应用程序之间重复使用。

Custom Elements API 包括两个部分：

自定义元素定义：使用 window.customElements.define() 方法定义一个自定义元素。
生命周期回调：自定义元素有一些生命周期回调，可以在元素被创建、插入文档、属性被更改或被移除时执行一些操作。

如何创建 Custom Elements

下面是一个简单的 Custom Elements 示例，它创建了一个自定义元素 <my-element>，并在元素被创建时向控制台输出一条消息：

class MyElement extends HTMLElement {
  constructor() {
    super();
    console.log('MyElement created');
  }
}

window.customElements.define('my-element', MyElement);

上面的代码使用 class 关键字定义了一个 MyElement 类，它继承了 HTMLElement 类。在 constructor 方法中，我们调用了 super() 方法，这样我们就可以访问 HTMLElement 的属性和方法。

接下来，我们使用 window.customElements.define() 方法定义了一个名为 my-element 的自定义元素，并将 MyElement 类作为第二个参数传递。

如何使用 Custom Elements

使用自定义元素非常简单，只需要在 HTML 中使用自定义元素的标签即可。下面是一个使用 <my-element> 标签的示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Custom Elements Demo</title>
  </head>
  <body>
    <my-element></my-element>
    <script src="my-element.js"></script>
  </body>
</html>

在上面的示例中，我们在 <body> 中使用了 <my-element> 标签，并在 <script> 中引入了 my-element.js 文件，这个文件包含了我们定义的 MyElement 类。

当我们打开这个 HTML 文件时，我们会在浏览器的控制台中看到一条消息，这是因为我们在 MyElement 类的构造函数中输出了一条消息。

如何给 Custom Elements 添加属性和方法

我们可以给自定义元素添加属性和方法，让它们具有更多的行为和功能。下面是一个示例，它给 <my-element> 元素添加了一个 message 属性和一个 logMessage() 方法：

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    console.log('MyElement created');
  }

  get message() {
    return this.getAttribute('message');
  }

  set message(value) {
    this.setAttribute('message', value);
  }

  logMessage() {
    console.log(this.message);
  }
}

window.customElements.define('my-element', MyElement);

在上面的代码中，我们添加了一个 get 和一个 set 方法来访问 message 属性。在 logMessage() 方法中，我们输出了 message 属性的值。

现在，我们可以在 HTML 中使用 message 属性和 logMessage() 方法了：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Custom Elements Demo</title>
  </head>
  <body>
    <my-element message="Hello, world!"></my-element>
    <script src="my-element.js"></script>
    <script>
      const elem = document.querySelector('my-element');
      elem.logMessage(); // 输出 "Hello, world!"
    </script>
  </body>
</html>

在上面的示例中，我们在 <my-element> 标签中添加了一个 message 属性，并在 JavaScript 中调用了 logMessage() 方法。

使用 Custom Elements 创建可嵌入的 Web 组件

使用 Custom Elements，我们可以轻松地创建可嵌入的 Web 组件，这些组件可以在不同的页面和应用程序之间重复使用。下面是一个使用 Custom Elements 创建可嵌入的按钮组件的示例：

// javascriptcn.com 代码示例
class MyButton extends HTMLElement {
  static get observedAttributes() {
    return ['disabled'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        button {
          background-color: #0074d9;
          color: white;
          border: none;
          border-radius: 3px;
          padding: 6px 12px;
          font-size: 14px;
          cursor: pointer;
        }

        button[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }
      </style>
      <button><slot></slot></button>
    `;
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

  attributeChangedCallback(name, oldValue, newValue) {
    const button = this.shadowRoot.querySelector('button');
    if (name === 'disabled' && newValue !== null) {
      button.setAttribute('disabled', '');
    } else {
      button.removeAttribute('disabled');
    }
  }

  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(value) {
    if (value) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }
}

window.customElements.define('my-button', MyButton);

在上面的代码中，我们创建了一个名为 MyButton 的自定义元素，并添加了一个 disabled 属性。在 constructor 方法中，我们创建了一个 Shadow DOM，并通过插入一个模板元素来定义按钮的样式和 HTML 结构。

在 attributeChangedCallback() 方法中，我们检测 disabled 属性的变化，并更新按钮的 disabled 属性。在 get 和 set 方法中，我们访问和设置 disabled 属性。

现在，我们可以在 HTML 中使用 <my-button> 标签来创建按钮：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Custom Elements Demo</title>
  </head>
  <body>
    <my-button>Click me</my-button>
    <my-button disabled>Disabled button</my-button>
    <script src="my-button.js"></script>
  </body>
</html>

在上面的示例中，我们创建了两个按钮，一个是可用的，一个是禁用的。我们还引入了 my-button.js 文件，这个文件包含了我们定义的 MyButton 类。

总结

Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 元素，并为这些元素添加属性和方法，创建可嵌入的 Web 组件。使用 Custom Elements，我们可以轻松地创建可重复使用的组件，使我们的开发工作更加高效和便捷。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6562f16dd2f5e1655dcae3f4