JavaScript Web Component是什么？如何自定义HTML元素

JavaScript Web Component 是浏览器原生支持的、无需框架即可构建可复用、强封装性自定义 HTML 元素的技术方案，由 Custom Elements（定义行为与生命周期）、Shadow DOM（实现样式与结构的真正隔离）和 HTML Templates（提升模板可维护性与性能）三大核心 API 协同工作；它让你像使用标准标签一样自由创建如 `` 这样的语义化组件，通过继承 `HTMLElement`、命名含短横线、`customElements.define()` 注册，并结合 `attributeChangedCallback` 响应属性变化、`attachShadow` 启用作用域隔离、`

JavaScript Web Component 是一套浏览器原生支持的 API，用于创建可复用、封装良好的自定义 HTML 元素。它不是框架，也不依赖第三方库，而是由 Custom Elements、Shadow DOM 和 HTML Templates 三部分组成，让开发者能像使用 或 <input> 那样，定义并使用自己的标签，比如 或 。

如何注册一个自定义元素（Custom Element）

必须继承 HTMLElement，并用 customElements.define() 注册。名称中必须包含短横线（-），这是强制规则，防止与未来 HTML 标准冲突。

• 定义类：例如 class MyCard extends HTMLElement { ... }
• 添加生命周期钩子：如 connectedCallback()（插入 DOM 时触发）、disconnectedCallback()（移除时）、attributeChangedCallback()（属性变更时）
• 注册：调用 customElements.define('my-card', MyCard)，之后就能在 HTML 中写

如何用 Shadow DOM 封装样式和结构

Shadow DOM 提供真正的作用域隔离——内部样式不会泄漏到外部，外部 CSS 也不会影响内部渲染，避免全局污染。

• 在 constructor() 或 connectedCallback() 中调用 this.attachShadow({ mode: 'open' })
• mode: 'open' 允许 JS 从外部访问 shadow root；'closed' 则禁止（一般不用）
• 把模板内容或手动创建的节点 append 到 this.shadowRoot，例如：this.shadowRoot.innerHTML = '

  Hello

  '

如何支持属性和响应式更新

自定义元素可通过 HTML 属性传参，并监听变化自动更新 UI。关键在于声明 observedAttributes 静态 getter 并实现 attributeChangedCallback。

• 在类中添加：static get observedAttributes() { return ['title', 'disabled']; }
• 在 attributeChangedCallback(name, oldValue, newValue) 中处理逻辑，比如更新 shadow 内容或切换 class
• 注意：只有已声明的属性才会触发该回调；布尔属性（如 disabled）值为 '' 或 null，需用 this.hasAttribute('disabled') 判断

如何用 HTML Template 提升可读性和性能

把结构和样式提前写在