javascript Web组件是什么_如何创建自定义HTML元素？

JavaScript Web组件是浏览器原生API，用于创建可复用、封装良好的自定义HTML元素，基于Custom Elements、Shadow DOM和HTML Templates标准，无需依赖React或Vue等框架。

JavaScript Web组件是一套浏览器原生支持的API，用来创建可复用、封装良好的自定义HTML元素。它不是框架，不依赖React或Vue，而是基于标准（Custom Elements、Shadow DOM、HTML Templates），让开发者能像用<button></button>或<input>一样直接使用<my-slider></my-slider>或<date-picker></date-picker>这类自定义标签。

什么是自定义元素（Custom Element）

自定义元素是Web Components的核心之一，指通过customElements.define()注册的、带连字符（-）的HTML标签名（如user-card）。浏览器会识别它为合法元素，并允许你控制它的结构、样式和行为。

关键规则：

• 名字必须包含短横线（-），不能是单个单词（myp非法，my-p合法）
• 不能与现有HTML标签重名（如p、article）
• 必须继承HTMLElement或其子类（如HTMLButtonElement）

如何定义一个基础自定义元素

最简步骤：声明类 → 定义元素 → 使用标签。例如做一个显示欢迎语的<hello-world></hello-world>：

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

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>Hello, ${this.getAttribute('name') || 'World'}!</p>`;
  }
}
customElements.define('hello-world', HelloWorld);

登录后复制

然后在HTML中直接写：<hello-world name="Alice"></hello-world>，页面就会渲染出“Hello, Alice!”。

常用生命周期回调：

标签： vue react javascript java html js node 浏览器 app html元素