JavaScript中的Web Components是什么_它如何创建可复用的自定义元素呢

Web Components 是浏览器原生支持的、由 Custom Elements、Shadow DOM、HTML Templates 和 ES Modules 四部分组成的技术标准，用于创建封装良好、样式隔离、与框架无关的可复用自定义元素。

Web Components 是浏览器原生支持的一套技术标准，用来创建封装良好、可复用、与框架无关的自定义 HTML 元素。它不是某个库或框架的产物，而是由 HTML Templates、Custom Elements、Shadow DOM 和 ES Modules 共同组成的规范集合。

核心四部分：各司其职

Web Components 并非单一 API，而是四个关键技术的组合：

• Custom Elements：定义新 HTML 标签（如 <my-button></my-button>）并绑定 JS 行为
• Shadow DOM：为元素提供独立的 DOM 树和样式作用域，实现真正的样式隔离
• HTML Templates（<template></template>）：声明不立即渲染的结构片段，供后续克隆使用
• ES Modules：支持以模块方式导入/导出组件，便于组织和复用

创建一个可复用的自定义元素（示例）

下面是一个带默认文本、点击计数、样式隔离的 <counter-button></counter-button>：

// counter-button.js
class CounterButton extends HTMLElement {
  constructor() {
    super();
    // 创建 Shadow DOM（自动开启样式隔离）
    const shadow = this.attachShadow({ mode: 'open' });
<pre class='brush:php;toolbar:false;'>// 定义模板结构（可提前写在 <template> 中，这里直接构建）
const template = document.createElement('template');
template.innerHTML = `
  <style>
    button { background: #007bff; color: white; border: none; padding: 8px 16px; }
    .count { margin-left: 8px; font-weight: bold; }
  </style>
  <button>
    <slot name="label">Click me</slot>
    <span class="count">0</span>
  </button>
`;

// 克隆模板内容到 Shadow DOM
shadow.appendChild(template.content.cloneNode(true));

// 初始化计数器状态
this.count = 0;
this.$button = shadow.querySelector('button');
this.$countEl = shadow.querySelector('.count');

// 绑定事件
this.$button.addEventListener('click', () => {
  this.count++;
  this.$countEl.textContent = this.count;
  // 可选：派发自定义事件，供外部监听
  this.dispatchEvent(new CustomEvent('count-change', { detail: this.count }));
});

登录后复制

}

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

标签： css vue react javascript java html js node 浏览器 app edge safa