html本身不提供响应式组件封装能力，必须靠css+自定义元素协同控制；媒体查询作用于全局文档流而非组件作用域，无法实现真正的组件级响应。
直接说结论：HTML 本身不提供响应式组件封装能力，必须靠 CSS + 自定义元素协同控制；单纯用 <div> 或 <code><section></section> 加媒体查询，无法做到“组件级”响应——它只管布局，不管封装边界。
为什么不能只靠 media query 封装响应式组件
媒体查询作用于整个文档流，不是组件作用域。你在全局 CSS 里写 @media (max-width: 768px) { .card { flex-direction: column; } }，所有带 class="card" 的元素都会响应，哪怕它们在不同组件、不同上下文里。
常见错误是把一堆响应式规则塞进一个 class，然后到处复用 —— 结果改一处，全站“连锁抖动”。更糟的是，当组件被嵌套在另一个响应式容器里（比如 Grid 布局中），外层断点会干扰内部逻辑，导致尺寸错乱或重叠。
- media query 不感知组件挂载/卸载，也不随属性变化重新计算
- 无法绑定到自定义元素的 attribute（如
size="small"），只能靠 class 切换，易冲突 - 无法在 Shadow DOM 内部生效，除非显式透传断点值（比如用 CSS 变量传入
--breakpoint-sm）
customElements.define() 配合 CSS 自定义属性实现断点透传
真正能封装“组件级响应”的路径，是让自定义元素自己读取断点状态，并注入对应样式。关键不是写多少 media query，而是让组件知道“我现在处于什么断点”。
推荐做法：在根元素（ 或 ）上动态设置 CSS 变量，例如 style="--breakpoint: sm;"，再由组件通过 getComputedStyle(this).getPropertyValue('--breakpoint') 获取当前断点。
- 避免在
connectedCallback()里反复调用getComputedStyle，可缓存在this._breakpoint，并在window.addEventListener('resize', ...)中更新 - 在 Shadow DOM 的
<style></style>中用:host([data-breakpoint="sm"]) { ... }控制样式，比 media query 更精准 - 不要依赖
window.innerWidth做判断 —— 它不反映实际渲染宽度（比如缩放、iframe 场景下失真）
Shadow DOM 中如何安全使用 media query
Shadow DOM 默认隔离样式，但 media query 仍可生效，前提是它写在 shadowRoot 的 <style></style> 里，且目标选择器作用于 shadow 内部节点。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
例如，在 connectedCallback() 中注入：
this.shadowRoot.innerHTML = `
<style>
:host { display: block; }
.content { padding: 1rem; }
@media (max-width: 600px) {
.content { padding: 0.5rem; font-size: 0.9rem; }
}
</style><div class="content"><slot></slot></div>
`;
注意三点：
- media query 必须写在 shadowRoot 的
<style></style>内，外部样式表中的 media query 不会穿透 -
:host选择器可用，但:host-context(...)在多数浏览器中已弃用，别依赖 - 如果组件内含子组件（如
<my-button></my-button>），它的 Shadow DOM 会再次隔离，media query 不会跨层继承
组件内响应式逻辑该不该用 JavaScript 判断
应该，但仅限必要场景。比如一个折叠面板，在小屏自动展开、大屏默认收起，这种行为逻辑无法单靠 CSS 实现。
正确做法是在 connectedCallback() 和 attributeChangedCallback() 中结合断点状态做决策：
- 首次挂载时读取当前断点，设置初始
this._isOpen = this._breakpoint === 'sm'; - 监听
window.resize，但用requestAnimationFrame节流，避免高频触发 - 不要在每次 resize 里调用
this.shadowRoot.innerHTML = ...全量重写，只更新 class 或 style 属性 - 若组件支持
auto-resize属性，需在observedAttributes中声明，并在回调里重新评估断点逻辑
最易被忽略的点：组件的响应式行为必须和其生命周期对齐。比如用户切换主题后重设 CSS 变量，或页面从 iframe 切换到全屏，这些事件不会触发 resize，但可能改变有效断点 —— 这时候得靠 MutationObserver 监听根元素 style 变化，而不是只盯 window。
