如何通过 JavaScript 的 Web Components 技术创建可复用的自定义元素？-js教程-PHP中文网

如何通过 JavaScript 的 Web Components 技术创建可复用的自定义元素？

狼影

发布： 2025-10-09 09:47:02

原创

937人浏览过

答案：Web Components 通过 Custom Elements、Shadow DOM 和 HTML Templates 封装可复用组件。首先定义继承 HTMLElement 的类并用 customElements.define() 注册自定义标签，实现基础行为；接着在构造函数中调用 attachShadow() 创建 Shadow DOM，隔离内部结构与样式，避免全局污染；然后结合 <template> 预定义组件模板，提升渲染性能与代码组织性；最后通过 observedAttributes() 监听属性变化，在 attributeChangedCallback 中响应更新，实现动态交互。示例包括 my-button、my-card、my-alert 和 my-toggle 等组件，支持内容分发（slot）和状态切换。该技术原生支持现代浏览器，适用于构建高内聚、低耦合的 UI 组件库，尤其适合跨项目复用和设计系统建设。

如何通过 javascript 的 web components 技术创建可复用的自定义元素？

使用 JavaScript 的 Web Components 技术创建可复用的自定义元素，核心在于结合 Custom Elements、Shadow DOM 和 HTML Templates 三大标准 API。这样可以封装样式、结构和行为，实现真正独立、可复用的组件。

定义并注册自定义元素

通过 customElements.define() 方法注册一个继承自 HTMLElement 的类，即可创建自定义 HTML 标签。

class MyButton extends HTMLElement { constructor() { super(); // 初始化逻辑 this.textContent = this.getAttribute('label') || '点击我'; this.style.padding = '10px 20px'; this.style.background = '#007bff'; this.style.color = 'white'; this.style.borderRadius = '4px'; this.style.cursor = 'pointer'; }

connectedCallback() { // 元素插入页面时绑定事件 this.addEventListener('click', () => { alert('按钮被点击！'); }); } }

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

之后就能在 HTML 中直接使用：<my-button label="提交"></my-button>

使用 Shadow DOM 封装内部结构

Shadow DOM 能隔离组件的样式和结构，避免与页面其他部分冲突。

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

class MyCard extends HTMLElement { constructor() { super(); // 创建影子根 const shadow = this.attachShadow({ mode: 'open' });

// 构建内部结构
const wrapper = document.createElement('div');
wrapper.innerHTML = `
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      background: #f9f9f9;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    h3 { margin-top: 0; color: #333; }
  </style>
  <div class="card">
    <h3>${this.getAttribute('title') || '默认标题'}</h3>
    <slot></slot> <!-- 支持内容分发 -->
  </div>
`;

shadow.appendChild(wrapper);

登录后复制

} }

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

用法示例：

通义万相

通义万相，一个不断进化的AI艺术创作大模型

596

查看详情

<my-card title="用户信息"> <p>姓名：张三</p> <p>年龄：25</p> </my-card>

结合 <template> 提升性能和组织性

将组件模板写在 <template> 中，可以提前声明结构，延迟渲染，提高效率。

<template id="my-alert-template"> <style> .alert { padding: 12px; margin: 10px 0; border-radius: 4px; background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } </style> <div class="alert"> <slot>默认提示信息</slot> </div> </template>

这样写更清晰，尤其适合复杂组件。

支持属性监听与状态更新

通过 static get observedAttributes() 监听属性变化，动态更新组件。

class MyToggle extends HTMLElement { static get observedAttributes() { return ['on']; }

constructor() { super(); this.attachShadow({ mode: 'open' }); this.render(); }

attributeChangedCallback(name, oldValue, newValue) { if (name === 'on') { this.render(); } }

render() { const isOn = this.hasAttribute('on'); this.shadowRoot.innerHTML = <button style=" background: ${isOn ? '#28a745' : '#dc3545'}; color: white; border: none; padding: 8px 16px; border-radius: 4px; "> ${isOn ? '开启' : '关闭'} </button> ; } }

customElements.define('my-toggle', MyToggle);

调用方式：<my-toggle on></my-toggle> 或通过 JS 修改属性触发更新。

基本上就这些。Web Components 原生支持现代浏览器，无需框架也能构建高复用、低耦合的 UI 组件，特别适合设计系统或跨项目共享组件。不复杂但容易忽略细节，比如 Shadow DOM 的样式隔离机制和 slot 使用规范。掌握后能显著提升前端工程化能力。

以上就是如何通过 JavaScript 的 Web Components 技术创建可复用的自定义元素？的详细内容，更多请关注php中文网其它相关文章！