必须监听slotchange事件，在回调中用slot.assignedNodes({flatten:true})扫描节点并为匹配元素绑定事件，且每次需清理旧监听器；所有DOM操作初始化逻辑须放在connectedCallback中。
自定义元素里怎么监听 slot 里的点击事件
slot 内容不属于 shadow DOM，直接在 this.shadowRoot 上监听 click 是捕获不到的——事件路径在 <slot> 边界就终止了。
- 必须监听
slotchange事件，在回调里调用slot.assignedNodes({ flatten: true })扫描新插入的节点 - 对返回的
NodeList中匹配目标（如button.action）的元素，逐个绑定addEventListener - 每次
slotchange都要先清理旧监听器，否则重复绑定导致多次触发 - 注意：
assignedNodes()不是响应式，也不会自动更新；DOM 变动后必须靠再次触发slotchange来重扫
connectedCallback 里该绑哪些事件
所有涉及 DOM 操作的初始化逻辑，都得放在 connectedCallback，而不是 constructor 或外部脚本里。否则常见问题包括：shadowRoot 为空、querySelector 返回 null、事件根本没挂上。
-
this.attachShadow({ mode: 'open' })必须在constructor或connectedCallback中执行，且只能调用一次 - 事件监听统一放
connectedCallback，并配合disconnectedCallback清理（尤其避免内存泄漏） - 如果组件可能被多次
append()同一实例，用WeakMap记录是否已初始化，防止重复 setup - 别依赖
document.querySelector('my-list')后再加事件——此时组件可能还没 upgrade 完，this.shadowRoot还是null
为什么 attributeChangedCallback 总不触发
它只响应 HTML 属性变更（setAttribute、removeAttribute、初始渲染时的属性），对 JS 属性赋值（如 el.disabled = true）完全无感。
- 必须在
static get observedAttributes()中显式声明要监听的属性名，漏一个就不会进回调 -
oldValue在首次初始化时为null，不能直接用===判断，建议用oldValue !== newValue - 布尔属性（如
checked）的newValue是字符串"true"或null，需手动转布尔 - 若希望 JS 属性与 HTML 属性同步，要在对应 setter 里主动调用
this.setAttribute()
复杂嵌套结构下如何避免选择器失效
深层嵌套 + 动态 slot 内容会让传统 CSS 选择器（如 main .card .content p）极易断裂——DOM 结构一变，查询就返回空。
立即学习“前端免费学习笔记（深入）”；
- 优先用语义标签替代无意义 wrapper div：
<header>、<nav>、<section>等自带层级含义，且不易被误删 - 避免
<main>套在<div>或<section>里，否则辅助技术识别错位，JS 查询范围偏移 - 动态内容批量插入时，用
DocumentFragment构建后再挂载，减少重排次数，也避免中间态 DOM 被错误查询到 - 对框架生成的包裹层（如
div[data-v-xxx]），可用display: contents让其退出渲染树，但注意兼容性（Safari 15.4+）和表单控件失焦风险
assignedNodes，就等于默认放弃对传入内容的交互控制——这点和普通组件库的 props 机制完全不同。 
