web components 复用关键在样式、逻辑和 dom 生命周期隔离；注册报错主因是类未继承 htmlelement、attachshadow 调用不当或重复定义；slotchange 用于动态响应插槽内容变化；props 支持需 attribute 与 property 双向同步。
Web Components 不是“必须用 class 写”或“必须用 HTML 模板字符串拼”，关键在于是否隔离了样式、逻辑和 DOM 生命周期——没做这三件事，封装出来的东西基本没法跨项目复用。
用 customElements.define() 注册时为什么报 “Failed to execute 'define'”
最常见原因是：类名没继承 HTMLElement，或者构造函数里调用了 this.attachShadow() 但没返回 shadowRoot（其实不用 return，但必须在 constructor 或 connectedCallback 里调）；还有就是同名组件重复定义——开发时热更新没清缓存，或者多个 bundle 同时加载了同一组件。
- 确保类定义完整：
class MyButton extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } } - 注册前加守卫：
if (!customElements.get('my-button')) customElements.define('my-button', MyButton); - 避免在模块顶层多次执行 define，尤其搭配 Vite/HMR 时，把 define 放到一个单独的入口函数里更稳
slot 和 slotchange 在什么场景下必须手动监听
当组件需要根据插槽内容动态调整布局（比如“有图标就左对齐，没图标就居中”），或者要读取插槽里的子元素数量/类型做渲染决策时，slotchange 就不能省。单纯靠 CSS 的 ::slotted(*) 做样式降级是不够的。
-
slotchange不会冒泡，得在 shadow root 里绑定：this.shadowRoot.querySelector('slot').addEventListener('slotchange', () => { /* 重新计算 */ }); - 首次渲染时插槽内容可能还没挂载，所以初始化逻辑最好放在
slotchange回调里，而不是connectedCallback - 注意：如果插槽内容是异步加载的（比如
<my-list><template>...</template></my-list>），slotchange可能触发多次，建议用setTimeout防抖或检查event.target.assignedNodes().length
如何让 Web Component 支持 React/Vue 的 props 传值而不破环原生语义
核心是把 attribute 变更映射为 property，再把 property 变更同步回 attribute——这样既能响应 el.foo = 'bar'，也能响应 el.setAttribute('foo', 'bar')，React/Vue 绑定时才不会丢值。
立即学习“Java免费学习笔记（深入）”；
- 用
static get observedAttributes()声明监听的 attribute 名，然后在attributeChangedCallback里更新内部 state - 在 setter 里调用
this.setAttribute()，但要加 guard 防止死循环：if (this._foo !== val) { this._foo = val; this.setAttribute('foo', val); } - 别直接在
attributeChangedCallback里操作 shadow DOM，先存 state，等render()统一更新，否则容易触发多次重排
真正难的不是写一个能跑的自定义标签，而是让它在 SSR 环境下不报错、在旧版 Safari 里不崩、被第三方框架包裹时不丢失事件冒泡路径——这些细节往往藏在 attribute 同步时机、adoptedCallback 的处理、以及 disabled 这类布尔属性的特殊转换规则里。
