shadow dom 不因宿主隐藏而暂停逻辑执行；dom节点、定时器、事件、样式计算均照常运行，需开发者主动监听可见性变化并清理副作用。
Shadow DOM 本身不处理宿主元素隐藏（如 display: none、visibility: hidden 或 hidden 属性）时的内部逻辑——它既不会暂停脚本执行，也不会自动冻结事件监听、定时器或数据响应。内部逻辑是否运行，完全取决于开发者如何编写和组织代码。
宿主隐藏对 Shadow DOM 内部的实际影响
宿主元素被隐藏，只影响渲染层，不影响 JavaScript 执行环境：
-
DOM 节点依然存在且可访问：即使
<my-card style="display: none"></my-card>，其this.shadowRoot仍可正常查询、修改、绑定事件； -
定时器与异步任务照常运行：
setTimeout、requestAnimationFrame、fetch回调等不受影响； - 事件仍可触发和冒泡：内部按钮点击仍会派发事件（哪怕宿主不可见），只是用户看不到反馈；
-
样式计算照常进行：CSS 变量、继承属性、
:host状态匹配都持续生效，只是最终渲染被浏览器跳过。
需要主动干预的关键逻辑点
若组件内部有依赖可视状态的行为（如动画、轮询、焦点管理），必须显式监听宿主可见性变化：
-
用
IntersectionObserver监测进入/离开视口：适用于懒加载、滚动触发动画等场景； -
监听
slotchange+ 检查offsetParent或getComputedStyle(host).display：简单判断是否被设为none； -
在
attributeChangedCallback中响应hidden属性变更：配合static observedAttributes = ['hidden']； -
避免在
connectedCallback中启动长期任务：改用按需激活（例如首次slotchange后启动轮询）。
常见误操作与建议
不要假设“隐藏 = 暂停”，也不应依赖 CSS 隐藏来控制逻辑生命周期：
-
❌ 错误：在
connectedCallback里直接setInterval(this.pollData, 5000)，却不提供停止机制； -
❌ 错误：用
visibility: hidden试图阻止某个子组件渲染，但其内部connectedCallback仍执行并注册全局监听器； -
✅ 建议：封装一个
isConnectedAndVisible()工具方法，在关键逻辑前校验； -
✅ 建议：在
disconnectedCallback清理所有副作用（定时器、事件监听、MutationObserver），这是更可靠的生命周期钩子。
