当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptWebComponents是什么？如何自定义HTML元素？

JavaScriptWebComponents是什么？如何自定义HTML元素？

2026-01-09 08:22:35 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript Web Components是什么？如何自定义HTML元素？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

Web Components 是浏览器原生支持的可复用、封装良好的自定义 HTML 元素，核心包括 customElements、HTMLElement 和 Shadow DOM；需继承 HTMLElement、含短横线命名、调用 customElements.define() 注册，并用 attachShadow 隔离样式与事件。

什么是Javascript的Web Components_如何使用Javascript创建自定义HTML元素？

Web Components 是什么？它不是框架，而是浏览器原生能力

Web Components 是一组浏览器内置的 API，让你能创建可复用、封装良好的自定义 HTML 元素。它不依赖 React 或 Vue，也不需要构建工具——只要现代浏览器（Chrome 67+、Firefox 63+、Safari 16.4+、Edge 79+）就支持。核心是三个接口：customElements、HTMLElement 和 Shadow DOM。其中 customElements.define() 是注册自定义元素的唯一入口，没调用它，元素就不会被识别。

如何用 `class` 定义并注册一个自定义元素？

必须继承 HTMLElement，且类名中必须包含短横线（-），比如 my-button 合法，MyButton 或 mybutton 会报错 Failed to execute 'define' on 'CustomElementRegistry': The name provided ('mybutton') is not a valid custom element name。

class MyButton extends HTMLElement {
  constructor() {
    super();
    // 必须调用 super()，否则 this 未初始化
    const shadow = this.attachShadow({ mode: 'open' });
    const button = document.createElement('button');
    button.textContent = this.getAttribute('label') || 'Click me';
    button.addEventListener('click', () => this.dispatchEvent(new Event('click', { bubbles: true })));
    shadow.appendChild(button);
  }
}

customElements.define('my-button', MyButton); // 名字必须小写+短横线

注册后就能直接在 HTML 中使用：。注意：注册必须在元素被解析前完成，否则会触发 Unknown custom element 警告（尤其在动态插入时）。

为什么 Shadow DOM 是关键？它隔离了样式和事件

不加 attachShadow()，你的自定义元素只是个空壳，样式和脚本会泄漏进全局作用域，和普通 div 没区别。加了之后，内部结构、CSS、事件默认不会穿透到宿主文档，也不会被宿主样式污染。常见误区：

mode: 'closed' 会让 shadowRoot 不可访问（连 this.shadowRoot 都是 null），调试困难，除非有强封装需求，否则用 'open'
想让宿主 CSS 影响内部元素？不行——得用 ::slotted 或 CSS 自定义属性（var(--color)）透传
子元素事件默认不冒泡出 Shadow DOM，需手动设 { bubbles: true } 才能在外层监听

生命周期回调里该做什么？别在 `connectedCallback` 里重复初始化

四个标准回调：constructor、connectedCallback、disconnectedCallback、attributeChangedCallback。重点：

constructor：只做最小初始化（如 super()、attachShadow、绑定事件），不能访问 this.innerHTML 或查询父节点
connectedCallback：元素被插入 DOM 时触发，适合发起网络请求、启动定时器；但可能被多次调用（移入移出），记得用 if (!this._initialized) 防重入
attributeChangedCallback：需在 observedAttributes 静态 getter 中声明监听哪些属性，比如 static get observedAttributes() { return ['disabled']; }，否则不会触发

复杂状态管理或异步渲染逻辑，建议封装成独立方法，避免把所有逻辑堆在回调里。

理论要掌握，实操不能落！以上关于《JavaScriptWebComponents是什么？如何自定义HTML元素？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！