JavaScript Web组件与自定义元素-js教程-PHP中文网

JavaScript Web组件与自定义元素

夜晨

发布： 2025-11-01 09:48:01

原创

243人浏览过

自定义元素是Web组件的核心，通过JavaScript的customElements.define()方法可创建独立或扩展原生元素的组件，结合Shadow DOM实现样式与结构隔离，利用observedAttributes和attributeChangedCallback响应属性变化，从而构建高内聚、低耦合、不依赖框架的可复用Web组件。

javascript web组件与自定义元素

Web组件是一套允许开发者创建可重用、封装良好的自定义HTML元素的技术，而JavaScript在其中扮演核心角色。它让前端开发不再依赖框架就能实现组件化。自定义元素是Web组件的基石之一，通过JavaScript可以定义自己的HTML标签，并赋予其行为和结构。

什么是自定义元素？

自定义元素是Web平台的一部分，允许你定义新的HTML标签。这些标签可以像原生元素一样使用，同时拥有自己的逻辑和状态。浏览器通过customElements.define()方法注册新元素，该元素必须继承自HTMLElement或其子类。

例如，你可以创建一个名为<my-button>的按钮组件：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.textContent = "点击我";
    this.style.padding = "10px";
    this.style.background = "#007bff";
    this.style.color = "white";
    this.style.borderRadius = "4px";
    this.addEventListener("click", () => {
      alert("按钮被点击了！");
    });
  }
}

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

之后就可以在HTML中直接使用：<my-button></my-button>。

立即学习“Java免费学习笔记（深入）”；

自定义元素的类型

有两种类型的自定义元素：

自治自定义元素（Autonomous custom elements）：完全独立的新元素，继承自HTMLElement，比如上面的my-button。
定制内置元素（Customized built-in elements）：扩展已有HTML元素的功能。需要在define()时指定第三个参数{ extends: 'button' }，然后通过is属性使用。

例如，扩展原生按钮：

class FancyButton extends HTMLButtonElement {
  connectedCallback() {
    this.style.fontSize = "18px";
    this.style.background = "linear-gradient(blue, purple)";
  }
}

customElements.define("fancy-button", FancyButton, { extends: "button" });

使用方式为：<button is="fancy-button">炫彩按钮</button>。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

结合Shadow DOM实现封装

真正让Web组件强大的是Shadow DOM。它可以将样式和结构隔离于主文档之外，避免全局污染。

在构造函数中调用this.attachShadow({ mode: 'open' })即可启用Shadow DOM。

class UserProfile extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" });
    const name = this.getAttribute("name") || "匿名用户";

    this.shadow.innerHTML = `
     <style>
      .card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; }
      .name { font-size: 1.2em; color: #333; }
     </style>
     <div class="card">
      <div class="name">${name}</div>
     </div>
    `;
  }
}

customElements.define("user-profile", UserProfile);

现在每个<user-profile name="张三"></user-profile>都有独立样式，不会影响页面其他部分。

响应属性变化

为了让组件更灵活，通常需要监听属性变化。可以通过静态getterobservedAttributes指定要监控的属性，并实现attributeChangedCallback方法。

static get observedAttributes() {
  return ["name", "level"];
}

attributeChangedCallback(name, oldValue, newValue) {
  if (name === "name") {
    this.shadow.querySelector(".name").textContent = newValue;
  }
}

这样当外部修改name属性时，组件会自动更新显示内容。

基本上就这些。用好自定义元素加Shadow DOM，就能写出不依赖框架、高内聚、低耦合的组件。虽然没有React那样的JSX语法糖，但胜在标准、轻量、兼容现代浏览器。适合构建设计系统、工具库或渐进式增强项目。

以上就是JavaScript Web组件与自定义元素的详细内容，更多请关注php中文网其它相关文章！