当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptWebComponents实战指南

JavaScriptWebComponents实战指南

2026-01-25 22:08:41 0浏览收藏

大家好，我们又见面了啊~本文《JavaScript Web Components实用教程》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

构建可复用组件需封装、独立与易集成，Web Components 提供原生支持。1. 使用 Custom Elements 定义自定义标签，通过 customElements.define() 注册继承 HTMLElement 的类，实现自定义元素；2. 结合 Shadow DOM 隔离样式与结构，在构造函数中调用 attachShadow() 并设置 shadowRoot.innerHTML，避免全局污染；3. 支持属性与事件，通过 observedAttributes 监听属性变化，attributeChangedCallback 触发更新，dispatchEvent 派发事件实现交互；4. 组件可在任意项目中使用，不依赖框架，适合设计系统共享，关键在于属性同步、事件通信和样式封装。

如何利用JavaScript的Web Components构建可复用组件？

构建可复用组件的关键在于封装、独立性和易集成。JavaScript 的 Web Components 技术提供了一套浏览器原生支持的 API，让你可以创建自定义 HTML 元素，并在任何框架或无框架项目中使用。以下是具体实现方式。

使用 Custom Elements 创建自定义标签

Custom Elements 允许你定义自己的 HTML 标签，这是构建可复用组件的基础。

通过 customElements.define() 方法注册一个类继承自 HTMLElement 的组件：

class MyButton extends HTMLElement {
  connectedCallback() {
    if (!this.rendered) {
      this.innerHTML = ``;
      this.rendered = true;
    }
  }
}

customElements.define('my-button', MyButton);

之后就可以在 HTML 中直接使用：提交。

结合 Shadow DOM 实现样式和结构隔离

Shadow DOM 能将组件的 DOM 和 CSS 封装起来，避免全局污染。

在组件构造函数中挂载 Shadow Root：

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const title = this.getAttribute('title') || '默认标题';
    this.shadowRoot.innerHTML = `

${title}

`;
}
}

customElements.define('my-card', MyCard);

使用时内容可通过插入：姓名：张三。

支持属性与事件，提升交互能力

为了让组件更灵活，应响应属性变化并对外派发事件。

利用 static get observedAttributes() 监听属性变更：

class MyInput extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['label', 'value'];
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (oldValue === newValue) return;
    this.render();
  }

  render() {
    const label = this.getAttribute('label') || '输入框';
    const value = this.getAttribute('value') || '';
    this.shadowRoot.innerHTML = `
     ${label}:
    `;
    this.shadowRoot.querySelector('input').addEventListener('input', e => {
      this.dispatchEvent(new CustomEvent('change', { detail: e.target.value }));
      this.setAttribute('value', e.target.value);
     });
  }

  connectedCallback() {
    this.render();
  }
}

customElements.define('my-input', MyInput);

外部可监听事件：。

基本上就这些。Web Components 不依赖任何框架，适合打造设计系统或跨项目共享组件。只要注意属性同步、事件通信和样式封装，就能写出真正可复用的元素。不复杂但容易忽略细节。

到这里，我们也就讲完了《JavaScriptWebComponents实战指南》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！