当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript自定义元素与Web组件教程

JavaScript自定义元素与Web组件教程

2025-11-17 23:35:35 0浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript自定义元素与Web组件详解》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

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

JavaScript Web组件与自定义元素

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

什么是自定义元素？

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

例如，你可以创建一个名为的按钮组件：

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中直接使用：。

自定义元素的类型

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

自治自定义元素（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" });

使用方式为：。

结合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 = `

${name}

`;
}
}

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

现在每个都有独立样式，不会影响页面其他部分。

响应属性变化

为了让组件更灵活，通常需要监听属性变化。可以通过静态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组件教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！