javascript Web组件是什么_如何创建自定义HTML元素？-js教程-PHP中文网

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

夢幻星辰

发布： 2025-12-15 18:12:54

原创

748人浏览过

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

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

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）。浏览器会识别它为合法元素，并允许你控制它的结构、样式和行为。

关键规则：

名字必须包含短横线（-），不能是单个单词（mydiv非法，my-div合法）
不能与现有HTML标签重名（如div、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!”。

常用生命周期回调：

企业软件介绍主页html模板

一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。

350

查看详情

connectedCallback：元素插入DOM时触发（适合初始化）
disconnectedCallback：从DOM移除时触发（适合清理定时器、事件监听）
attributeChangedCallback：监听属性变化（需配合observedAttributes静态属性）
adoptedCallback：元素被移动到新document时触发（少见）

用Shadow DOM封装样式和结构

避免样式污染和结构干扰，推荐在connectedCallback中附加Shadow DOM：

class AlertBox extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        .alert { padding: 12px; background: #ffebee; border-left: 4px solid #f44336; }
      </style>
      <div class="alert"><slot></slot></div>
    `;
  }
}
customElements.define('alert-box', AlertBox);

登录后复制

<slot></slot>用于内容分发——把外部写的文字（如<alert-box>系统错误</alert-box>）投射进Shadow内部。

注意：mode: 'open'表示可通过element.shadowRoot访问；设为'closed'则无法从外部JS读取Shadow内容（更封闭，但调试不便）。

结合HTML模板提升可维护性

把结构写在<template></template>标签里，便于复用和阅读：

<template id="card-template">
  <div class="card">
    <h3><slot name="title">默认标题</slot></h3>
    <p><slot name="content">默认内容</slot></p>
  </div>
</template>

<script>
const template = document.getElementById('card-template').content;
class CardElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
  }
}
customElements.define('user-card', CardElement);
</script>

登录后复制

这样HTML结构和JS逻辑分离，改样式或结构不用动JS代码，也方便多人协作。

基本上就这些。Web组件不复杂但容易忽略细节——比如连字符规则、Shadow DOM模式选择、属性监听的声明方式。写多了你会发现，它比写一堆

+ JS初始化更干净、更接近HTML本来的样子。

以上就是javascript Web组件是什么_如何创建自定义HTML元素？的详细内容，更多请关注php中文网其它相关文章！