跳到主要内容

HTML 自定义元素

介绍​

HTML 自定义元素（Custom Elements）是 Web 组件技术的一部分，它允许开发者创建自己的 HTML 标签，并为其定义行为和样式。通过自定义元素，你可以将复杂的 UI 逻辑封装成独立的组件，从而提升代码的可维护性和可扩展性。

自定义元素是 Web 标准的一部分，现代浏览器都支持这一特性。它们可以像普通的 HTML 元素一样使用，但具有自定义的功能和样式。

创建自定义元素​

要创建一个自定义元素，你需要使用 JavaScript 的 class 语法，并继承自 HTMLElement 类。然后，通过 customElements.define() 方法将自定义元素注册到浏览器中。

基本示例​

以下是一个简单的自定义元素示例，它会在页面上显示一条消息：

javascript
class MyGreeting extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const p = document.createElement('p');
    p.textContent = 'Hello, World!';
    shadow.appendChild(p);
  }
}

customElements.define('my-greeting', MyGreeting);

在 HTML 中使用这个自定义元素：

html
<my-greeting></my-greeting>

输出：

Hello, World!

解释​

  1. class MyGreeting extends HTMLElement: 定义一个名为 MyGreeting 的类，它继承自 HTMLElement。
  2. constructor(): 在构造函数中初始化元素。我们使用 attachShadow 方法创建了一个 Shadow DOM，并将其模式设置为 open，这意味着外部 JavaScript 可以访问 Shadow DOM。
  3. customElements.define('my-greeting', MyGreeting): 将自定义元素注册为 <my-greeting> 标签。

生命周期回调​

自定义元素有四个生命周期回调方法，你可以在这些方法中执行特定的操作：

  • connectedCallback(): 当元素被插入到 DOM 中时调用。
  • disconnectedCallback(): 当元素从 DOM 中移除时调用。
  • attributeChangedCallback(): 当元素的属性被添加、移除或更改时调用。
  • adoptedCallback(): 当元素被移动到新的文档时调用。

示例：使用生命周期回调​

javascript
class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `<p>Element added to DOM</p>`;
  }

  disconnectedCallback() {
    console.log('Element removed from DOM');
  }
}

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

在 HTML 中使用这个自定义元素：

html
<my-element></my-element>

输出：

Element added to DOM

当你从 DOM 中移除 <my-element> 时，控制台会输出 Element removed from DOM。

实际应用场景​

自定义元素非常适合用于创建可重用的 UI 组件。例如，你可以创建一个自定义的按钮组件，它包含特定的样式和行为：

javascript
class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background-color: #4CAF50;
          color: white;
          padding: 10px 20px;
          border: none;
          border-radius: 5px;
          cursor: pointer;
        }
        button:hover {
          background-color: #45a049;
        }
      </style>
      <button><slot></slot></button>
    `;
  }
}

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

在 HTML 中使用这个自定义按钮：

html
<my-button>Click Me</my-button>

输出：

[一个绿色的按钮，显示 "Click Me"]

解释​

  • <slot>: <slot> 元素用于在自定义元素中插入外部内容。在这个例子中，<slot> 会被替换为 Click Me。

总结​

HTML 自定义元素是创建可重用 Web 组件的强大工具。通过自定义元素，你可以将复杂的 UI 逻辑封装成独立的组件，从而提升代码的可维护性和可扩展性。自定义元素支持生命周期回调，允许你在元素的不同阶段执行特定的操作。

附加资源​

练习​

  1. 创建一个自定义元素 <my-counter>，它显示一个计数器，并提供一个按钮来增加计数。
  2. 修改 <my-button> 组件，使其支持 disabled 属性，并在按钮被禁用时改变样式。
提示

在完成练习时，尝试使用 Shadow DOM 和生命周期回调方法来增强你的自定义元素。