必须继承htmlelement，constructor中调用super()并attachshadow({mode:'closed'})，标签名含连字符（如my-card），用:host和实现样式隔离与内容分发，通过observedattributes和attributechangedcallback响应属性变化，派发composed:true的customevent通信。
直接用 customElements.define() 注册一个带 Shadow DOM 的自定义元素，比写一堆 class 和 JS 逻辑更干净、可复用、无样式污染——这是现代 HTML 卡片组件的正确起点。
怎么定义基础卡片类并注册为自定义元素
必须继承 HTMLElement，在 constructor() 里调用 super()，再用 this.attachShadow({ mode: 'closed' }) 创建隔离 DOM。注册时标签名必须含连字符（如 my-card），否则浏览器会拒绝：
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'closed' });
shadow.innerHTML = `
<style>
:host { display: block; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-body { padding: 1rem; }
</style><div class="card-body">
<slot name="title"></slot><slot></slot>
</div>
`;
}
}
customElements.define('my-card', MyCard);
-
:host是关键，它让样式只作用于自定义元素自身，不穿透进 Shadow DOM 内部 -
<slot></slot>不是占位符，而是内容分发入口；加name="title"就能精准接收<my-card><h3 slot="title">标题</h3> <p>正文</p></my-card> - 别在
connectedCallback里重复创建 Shadow DOM，它只应在constructor中初始化一次
怎么让卡片支持属性配置和响应式行为
靠 attributeChangedCallback 监听属性变化，配合 static get observedAttributes() 声明监听列表。比如想通过 size="large" 控制内边距，就别用 JS 手动查 DOM 改 class：
static get observedAttributes() {
return ['size', 'variant'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'size') {
this.shadowRoot.querySelector('.card-body').style.padding = newValue === 'large' ? '1.5rem' : '1rem';
}
}
- 属性值始终是字符串，
size="large"和size=large效果一样，但前者语义更明确 - 不要在
attributeChangedCallback里调用this.setAttribute()，否则会触发无限循环 - 响应式断点建议交给 CSS 自己处理（比如用
@media (max-width: 768px)在 Shadow DOM 内写媒体查询），而不是在 JS 里判断window.innerWidth
为什么不能用 innerHTML 直接注入用户内容
直接拼接 HTML 字符串进 shadow.innerHTML 会丢失事件绑定、破坏语义、且无法防 XSS——哪怕你信任数据源，也该用 slot 分发或 document.createElement 安全插入：
-
<my-card><button onclick="alert(1)">危险</button></my-card>中的onclick在 Shadow DOM 内不会执行，这是安全特性，不是 bug - 如果真要渲染富文本，用
DOMPurify.sanitize()处理后再塞进shadowRoot.querySelector('.card-body').appendChild(...) - 别给
<slot></slot>加innerHTML，它本身就会自动投影内容；强行覆盖会切断插槽连接
怎么和外部页面通信又不打破封装
用 CustomEvent 派发事件，外部监听即可。比如点击“操作按钮”后通知父级刷新列表：
const btn = this.shadowRoot.querySelector('button');
btn.addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('action', {
detail: { id: this.getAttribute('data-id') },
bubbles: true,
composed: true
}));
});
-
bubbles: true让事件能冒泡到 Light DOM -
composed: true是关键，它让事件能穿透 Shadow DOM 边界，否则外部document.querySelector('my-card').addEventListener('action', ...)根本收不到 - 避免在自定义元素里直接调用外部函数（如
window.parentCallback()），这会让组件强依赖运行环境
真正难的不是写完这个类，而是决定哪些逻辑该留在组件内、哪些该由使用者控制——比如图片加载失败的 fallback，应该用 <slot name="fallback"></slot> 让使用者自己提供，而不是在组件里硬编码一个 onerror 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
