Web Components 是一套创建可重用、独立自定义 HTML 元素的技术，由 Custom Elements、Shadow DOM 和 HTML Templates 三项核心技术组成；通过它们可封装组件的结构、样式与行为，实现跨框架复用。示例中定义了 my-card 自定义元素，利用 Shadow DOM 隔离作用域，template 声明模板内容，并通过 observedAttributes 监听属性变化以实现动态更新，适用于构建高内聚、低耦合的 UI 组件库。
Web Components 是一套可以让开发者创建可重用、独立、自定义 HTML 元素的技术。它不依赖任何框架，原生支持现代浏览器，是实现组件化开发的重要方式之一。在 JavaScript 中使用 Web Components，能让你像使用 或 一样，定义自己的标签并封装样式、结构和行为。
什么是 Web Components？
Web Components 由三项核心技术组成：
Custom Elements：允许你定义新的 HTML 标签。 Shadow DOM：提供封装能力，让组件的样式和结构与页面其他部分隔离。 HTML Templates（ 和 ）：用于声明组件的可复用模板内容。
这些技术共同作用，使你能够构建出真正解耦、可移植的 UI 组件。
如何创建一个自定义元素
通过 Custom Elements API，你可以注册一个新标签。下面是一个简单的例子：
立即学习“Java免费学习笔记（深入）”；
class MyCard extends HTMLElement { constructor() { super(); // 创建 Shadow DOM 来封装内部结构 const shadow = this.attachShadow({ mode: 'open' }); // 定义模板 const template = document.createElement('template'); template.innerHTML = ` .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; font-family: sans-serif; background: #f9f9f9; } h3 { color: #333; } p { color: #555; } 默认标题
默认内容
`; // 将模板内容插入 Shadow DOM shadow.appendChild(template.content.cloneNode(true)); }}// 注册自定义元素customElements.define('my-card', MyCard);
之后就可以在 HTML 中使用：
欢迎使用 Web Components 这是一个可复用的卡片组件。
理解 Shadow DOM 的作用
Shadow DOM 是 Web Components 的核心之一。它创建了一个独立的作用域，确保组件内的 CSS 不会污染全局样式，同时外部样式也不会意外影响组件内部。
在上面的例子中，this.attachShadow({ mode: ‘open’ }) 创建了一个开放的 Shadow Root。设置为 ‘closed’ 后，外部无法访问该 Shadow DOM，适合更高封装需求。
你可以通过 shadowRoot 属性操作内部节点（仅限 mode: ‘open’）：
const card = document.querySelector('my-card');console.log(card.shadowRoot); // 可访问
组件通信与属性响应
为了让组件更灵活，通常需要支持属性传值和响应变化。可以通过 observedAttributes 和静态 getter 实现：
class MyCard extends HTMLElement { static get observedAttributes() { return ['title', 'color']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'title') { // 更新 slot 内容或内部结构 const titleSlot = this.shadowRoot.querySelector('[slot="title"]'); if (titleSlot) { titleSlot.textContent = newValue; } } if (name === 'color') { this.shadowRoot.querySelector('.card').style.borderColor = newValue; } }}
然后这样使用：
当属性变化时，attributeChangedCallback 会被触发，实现动态更新。
基本上就这些。Web Components 提供了干净、标准的组件化方案，适合构建设计系统、跨框架组件库或嵌入式小工具。虽然学习曲线略陡，但一旦掌握，就能写出真正独立、可维护的 UI 模块。
以上就是JavaScript中的Web Components入门_javascript组件化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533953.html
微信扫一扫 
支付宝扫一扫 
