什么是JavaScript Web Component_如何创建自定义HTML元素

JavaScript Web Component 是浏览器原生 API，由 Custom Elements、Shadow DOM 和 HTML Templates 组成，用于创建可复用、封装良好的自定义元素；需继承 HTMLElement、命名含短横线、用 customElements.define() 注册，并通过 observedAttributes 和 attributeChangedCallback 实现响应式更新，Shadow DOM 提供样式隔离，template 标签提升结构可维护性。

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

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

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

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

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

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

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

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

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

标签： css vue react javascript java html js node 浏览器 app 作用域 html元