pin_drop当前位置:知识文库 ❯ 图文
高级技巧：HTML Web Compon - 详细教程与实战指南
教程简介
Web Components是W3C制定的一套浏览器原生组件化标准，包括Custom Elements（自定义元素）、Shadow DOM（影子DOM）、HTML Templates（HTML模板）和HTML Imports（已废弃，被ES Modules替代）。Web Components允许开发者创建可复用的自定义元素，具有封装的样式和行为，可以在任何框架中使用。本教程将深入讲解Web Components的核心技术，包括Custom Elements生命周期、Shadow DOM样式隔离、HTML Templates、Slot分发、属性反射、事件转发、组件通信以及实际组件开发案例。
核心概念
Web Components四大核心技术
Custom Elements生命周期
语法与用法
Custom Elements
代码示例
// 定义自定义元素
class MyButton extends HTMLElement {
// 观察的属性列表
static get observedAttributes() {
return ['disabled', 'variant'];
}
constructor() {
super();
// 创建Shadow DOM
this.attachShadow({ mode: 'open' });
// 初始化状态
this._disabled = false;
}
// 生命周期：元素插入DOM
connectedCallback() {
this.render();
this.addEventListeners();
}
// 生命周期：元素移除DOM
disconnectedCallback() {
this.removeEventListeners();
}
// 生命周期：属性变化
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
switch (name) {
case 'disabled':
this._disabled = newValue !== null;
this.updateDisabled();
break;
case 'variant':
this.updateVariant();
break;
}
}
// 属性反射（getter/setter）
get disabled() {
return this.hasAttribute('disabled');
}
set disabled(value) {
if (value) {
this.setAttribute('disabled', '');
} else {
this.removeAttribute('disabled');
}
}
get variant() {
return this.getAttribute('variant') || 'primary';
}
set variant(value) {
this.setAttribute('variant', value);
}
render() {
this.shadowRoot.innerHTML = `
<style>
:host {
display: inline-block;
}
button {
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
font-family: inherit;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.primary { background: #4A90D9; color: white; }
.secondary { background: #95a5a6; color: white; }
.danger { background: #e74c3c; color: white; }
</style>
<button class="${this.variant}" ?disabled="${this._disabled}">
<slot></slot>
</button>
`;
}
addEventListeners() {
this._clickHandler = () => {
if (!this._disabled) {
this.dispatchEvent(new CustomEvent('my-click', {
bubbles: true,
composed: true,
detail: { variant: this.variant }
}));
}
};
this.shadowRoot.querySelector('button')
.addEventListener('click', this._clickHandler);
}
removeEventListeners() {
if (this.shadowRoot.querySelector('button')) {
this.shadowRoot.querySelector('button')
.removeEventListener('click', this._clickHandler);
}
}
updateDisabled() {
const btn = this.shadowRoot.querySelector('button');
if (btn) btn.disabled = this._disabled;
}
updateVariant() {
const btn = this.shadowRoot.querySelector('button');
if (btn) btn.className = this.variant;
}
}
// 注册自定义元素
customElements.define('my-button', MyButton);Shadow DOM
代码示例
// 创建Shadow DOM
const shadow = this.attachShadow({ mode: 'open' });
// mode: 'open' - 可通过element.shadowRoot访问
// mode: 'closed' - 不可从外部访问
// Shadow DOM中的样式不会影响外部
shadow.innerHTML = `
<style>
/* 这些样式只在Shadow DOM内生效 */
.inner { color: red; }
:host { display: block; } /* 选择自定义元素本身 */
:host([disabled]) { opacity: 0.5; } /* 基于属性选择 */
::slotted(p) { color: blue; } /* 选择插槽内容 */
</style>
<div class="inner">Shadow DOM内容</div>
<slot></slot>
`;Slot分发
代码示例
<!-- 组件定义 -->
<template id="card-template">
<style>
.card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.card-header { padding: 1rem; background: #f5f5f5; }
.card-body { padding: 1rem; }
.card-footer { padding: 1rem; border-top: 1px solid #eee; }
::slotted(h2) { margin: 0; }
</style>
<div class="card">
<div class="card-header"><slot name="header">默认标题</slot></div>
<div class="card-body"><slot>默认内容</slot></div>
<div class="card-footer"><slot name="footer">默认页脚</slot></div>
</div>
</template>
<!-- 组件使用 -->
<my-card>
<h2 slot="header">卡片标题</h2>
<p>卡片内容</p>
<span slot="footer">卡片页脚</span>
</my-card>事件转发
代码示例
// 自定义事件转发（穿透Shadow DOM边界）
this.dispatchEvent(new CustomEvent('my-event', {
bubbles: true, // 允许冒泡
composed: true, // 穿透Shadow DOM边界
detail: { // 自定义数据
value: this.value
}
}));
// 监听
element.addEventListener('my-event', (e) => {
console.log(e.detail.value);
});代码示例
示例1：可复用Toast通知组件
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components - Toast组件</title>
</head>
<body>
<h1>Toast通知组件</h1>
<p>点击按钮显示不同类型的Toast通知：</p>
<button onclick="showToast('success', '操作成功！')">成功通知</button>
<button onclick="showToast('error', '操作失败，请重试。')">错误通知</button>
<button onclick="showToast('info', '这是一条提示信息。')">信息通知</button>
<button onclick="showToast('warning', '请注意，此操作不可撤销。')">警告通知</button>
<!-- Toast容器 -->
<toast-container id="toastContainer"></toast-container>
<script>
// Toast容器组件
class ToastContainer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
:host {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
}
</style>
<slot></slot>
`;
}
addToast(type, message, duration = 3000) {
const toast = document.createElement('toast-item');
toast.setAttribute('type', type);
toast.setAttribute('duration', duration);
toast.textContent = message;
this.appendChild(toast);
toast.addEventListener('toast-close', () => {
toast.remove();
});
}
}
// Toast单项组件
class ToastItem extends HTMLElement {
static get observedAttributes() {
return ['type', 'duration'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
this._timer = null;
}
connectedCallback() {
this.render();
this.startTimer();
this.shadowRoot.querySelector('.close-btn')
.addEventListener('click', () => this.close());
}
disconnectedCallback() {
if (this._timer) clearTimeout(this._timer);
}
get type() {
return this.getAttribute('type') || 'info';
}
get duration() {
return parseInt(this.getAttribute('duration')) || 3000;
}
render() {
const colors = {
success: { bg: '#d4edda', border: '#27ae60', text: '#155724', icon: '✓' },
error: { bg: '#f8d7da', border: '#e74c3c', text: '#721c24', icon: '✗' },
info: { bg: '#e8f4fd', border: '#4A90D9', text: '#0c5460', icon: 'i' },
warning: { bg: '#fff3cd', border: '#f39c12', text: '#856404', icon: '!' }
};
const c = colors[this.type] || colors.info;
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.toast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 6px;
border-left: 4px solid ${c.border};
background: ${c.bg};
color: ${c.text};
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
min-width: 280px;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: ${c.border};
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
flex-shrink: 0;
}
.message { flex: 1; }
.close-btn {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: ${c.text};
opacity: 0.5;
padding: 0;
line-height: 1;
}
.close-btn:hover { opacity: 1; }
</style>
<div class="toast">
<span class="icon">${c.icon}</span>
<span class="message"><slot></slot></span>
<button class="close-btn">×</button>
</div>
`;
}
startTimer() {
this._timer = setTimeout(() => this.close(), this.duration);
}
close() {
this.dispatchEvent(new CustomEvent('toast-close', {
bubbles: true,
composed: true
}));
}
}
// 注册组件
customElements.define('toast-container', ToastContainer);
customElements.define('toast-item', ToastItem);
// 使用函数
function showToast(type, message) {
document.getElementById('toastContainer').addToast(type, message);
}
</script>
</body>
</html>示例2：模态框组件
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components - 模态框组件</title>
<style>
body { font-family: -apple-system, sans-serif; padding: 2rem; }
button { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; background: #4A90D9; color: white; }
</style>
</head>
<body>
<h1>模态框组件</h1>
<button onclick="document.getElementById('modal1').open()">打开模态框</button>
<my-modal id="modal1" title="确认操作">
<p>您确定要执行此操作吗？此操作不可撤销。</p>
<button slot="actions" onclick="document.getElementById('modal1').close()">取消</button>
<button slot="actions" onclick="alert('已确认');document.getElementById('modal1').close()">确认</button>
</my-modal>
<script>
class MyModal extends HTMLElement {
static get observedAttributes() {
return ['title', 'open'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
this._lastFocused = null;
}
get isOpen() {
return this.hasAttribute('open');
}
open() {
this.setAttribute('open', '');
}
close() {
this.removeAttribute('open');
}
connectedCallback() {
this.render();
this.shadowRoot.querySelector('.overlay')
.addEventListener('click', (e) => {
if (e.target.classList.contains('overlay')) this.close();
});
this.shadowRoot.querySelector('.close-btn')
.addEventListener('click', () => this.close());
}
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'open') {
if (newVal !== null) {
this._lastFocused = document.activeElement;
this.shadowRoot.querySelector('.overlay').style.display = 'flex';
this.shadowRoot.querySelector('.close-btn').focus();
document.addEventListener('keydown', this._escHandler = (e) => {
if (e.key === 'Escape') this.close();
});
} else {
this.shadowRoot.querySelector('.overlay').style.display = 'none';
document.removeEventListener('keydown', this._escHandler);
if (this._lastFocused) this._lastFocused.focus();
}
this.dispatchEvent(new CustomEvent('modal-change', {
bubbles: true, composed: true,
detail: { open: newVal !== null }
}));
}
}
render() {
this.shadowRoot.innerHTML = `
<style>
.overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal {
background: white;
border-radius: 8px;
padding: 0;
max-width: 500px;
width: 90%;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid #eee;
}
.modal-header h2 { margin: 0; font-size: 1.25rem; }
.close-btn {
background: none; border: none;
font-size: 1.5rem; cursor: pointer;
padding: 0; line-height: 1;
}
.modal-body { padding: 1.5rem; }
.modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
::slotted([slot="actions"]) {
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
</style>
<div class="overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<div class="modal">
<div class="modal-header">
<h2 id="modal-title">${this.getAttribute('title') || '对话框'}</h2>
<button class="close-btn" aria-label="关闭">×</button>
</div>
<div class="modal-body"><slot></slot></div>
<div class="modal-footer"><slot name="actions"></slot></div>
</div>
</div>
`;
}
}
customElements.define('my-modal', MyModal);
</script>
</body>
</html>浏览器兼容性
注意事项与最佳实践
类名必须包含连字符：自定义元素名必须包含连字符（如my-button），不能是单个单词
constructor中不要操作DOM：constructor中只能初始化状态和创建Shadow DOM
使用observedAttributes：只有列在observedAttributes中的属性才会触发attributeChangedCallback
属性反射：重要的属性应通过getter/setter与HTML属性同步
事件使用composed:true：自定义事件需要设置composed:true才能穿透Shadow DOM
提供默认样式：使用:host设置组件的默认样式
使用CSS自定义属性：通过CSS自定义属性提供样式定制接口
避免使用closed模式：closed模式的Shadow DOM调试困难
使用form-associated：需要参与表单的组件应实现ElementInternals
渐进增强：确保组件在不支持Web Components的浏览器中有合理的回退
代码规范示例
代码示例
// 规范：Web Components模板
class MyComponent extends HTMLElement {
static get observedAttributes() {
return ['value', 'disabled'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
this._value = '';
}
get value() { return this._value; }
set value(v) {
this._value = v;
this.setAttribute('value', v);
}
connectedCallback() { this.render(); }
disconnectedCallback() { /* 清理 */ }
attributeChangedCallback(name, oldVal, newVal) {
if (oldVal === newVal) return;
// 处理属性变化
}
render() {
this.shadowRoot.innerHTML = `
<style>
:host { display: block; }
/* 组件样式 */
</style>
<!-- 组件内容 -->
<slot></slot>
`;
}
}
customElements.define('my-component', MyComponent);常见问题与解决方案
问题1：Shadow DOM中的样式被外部影响
解决方案：Shadow DOM天然隔离外部样式，但CSS自定义属性可以穿透。
代码示例
/* 外部可以设置自定义属性 */
my-component {
--primary-color: #e74c3c;
}
/* Shadow DOM内部使用 */
:host {
--primary-color: #4A90D9; /* 默认值 */
color: var(--primary-color);
}问题2：组件内部事件外部无法监听
解决方案：使用composed:true和bubbles:true。
代码示例
this.dispatchEvent(new CustomEvent('my-event', {
bubbles: true,
composed: true,
detail: { data: this._data }
}));问题3：Slot内容样式无法控制
解决方案：使用::slotted()选择器，但只能选择直接子元素。
代码示例
::slotted(p) { color: blue; }
::slotted(.highlight) { background: yellow; }总结
Web Components是浏览器原生的组件化方案，具有框架无关、样式隔离、可复用等优势。通过本教程的学习，你应该掌握了：
Custom Elements生命周期：constructor、connectedCallback等回调的使用
Shadow DOM：样式隔离、:host、::slotted选择器
Slot分发：具名插槽和默认插槽
属性反射：getter/setter与HTML属性的同步
事件转发：composed:true穿透Shadow DOM边界
组件通信：自定义事件和属性传递
Web Components适合开发可跨框架复用的基础组件库，是前端组件化的重要技术方向。
常见问题
问题1：Shadow DOM中的样式被外部影响？
Shadow DOM天然隔离外部样式，但CSS自定义属性可以穿透。
问题2：组件内部事件外部无法监听？
使用composed:true和bubbles:true。
问题3：Slot内容样式无法控制？
使用::slotted()选择器，但只能选择直接子元素。
标签：
DOM
HTML
CSS
Web组件
组件
模板
模块
本文由小确幸生活整理发布，转载请注明出处
本文涉及AI创作
内容由AI创作，请仔细甄别
