Web Components 是一套创建可重用、独立自定义 HTML 元素的技术，由 Custom Elements、Shadow DOM 和 HTML Templates 三项核心技术组成；通过它们可封装组件的结构、样式与行为，实现跨框架复用。示例中定义了 my-card 自定义元素，利用 Shadow DOM 隔离作用域，template 声明模板内容，并通过 observedAttributes 监听属性变化以实现动态更新，适用于构建高内聚、低耦合的 UI 组件库。
Web Components 是一套可以让开发者创建可重用、独立、自定义 HTML 元素的技术。它不依赖任何框架，原生支持现代浏览器，是实现组件化开发的重要方式之一。在 JavaScript 中使用 Web Components，能让你像使用 <button> 或 <input> 一样，定义自己的标签并封装样式、结构和行为。
Web Components 由三项核心技术组成：
这些技术共同作用，使你能够构建出真正解耦、可移植的 UI 组件。
通过 Custom Elements API，你可以注册一个新标签。下面是一个简单的例子：
立即学习“Java免费学习笔记（深入）”；
<pre class="brush:php;toolbar:false;">
class MyCard extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM 来封装内部结构
const shadow = this.attachShadow({ mode: 'open' });
// 定义模板
const template = document.createElement('template');
template.innerHTML = `
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
font-family: sans-serif;
background: #f9f9f9;
}
h3 { color: #333; }
p { color: #555; }
</style>
<div class="card">
<h3><slot name="title">默认标题</slot></h3>
<p><slot name="content">默认内容</slot></p>
</div>
`;
// 将模板内容插入 Shadow DOM
shadow.appendChild(template.content.cloneNode(true));
}
}
// 注册自定义元素
customElements.define('my-card', MyCard);
之后就可以在 HTML 中使用：
<pre class="brush:php;toolbar:false;"> <my-card> <span slot="title">欢迎使用 Web Components</span> <span slot="content">这是一个可复用的卡片组件。</span> </my-card>
Shadow DOM 是 Web Components 的核心之一。它创建了一个独立的作用域，确保组件内的 CSS 不会污染全局样式，同时外部样式也不会意外影响组件内部。
在上面的例子中，this.attachShadow({ mode: 'open' }) 创建了一个开放的 Shadow Root。设置为 'closed' 后，外部无法访问该 Shadow DOM，适合更高封装需求。
你可以通过 shadowRoot 属性操作内部节点（仅限 mode: 'open'）：
<pre class="brush:php;toolbar:false;">
const card = document.querySelector('my-card');
console.log(card.shadowRoot); // 可访问
为了让组件更灵活，通常需要支持属性传值和响应变化。可以通过 observedAttributes 和静态 getter 实现：
<pre class="brush:php;toolbar:false;">
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;
}
}
}
然后这样使用：
<pre class="brush:php;toolbar:false;"> <my-card title="重要通知" color="red"></my-card>
当属性变化时，attributeChangedCallback 会被触发，实现动态更新。
基本上就这些。Web Components 提供了干净、标准的组件化方案，适合构建设计系统、跨框架组件库或嵌入式小工具。虽然学习曲线略陡，但一旦掌握，就能写出真正独立、可维护的 UI 模块。
以上就是JavaScript中的Web Components入门_javascript组件化的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
167
收藏
