自定义HTML元素（如<responsive-img>）不能替代原生<img>或<picture>实现响应式图片加载，因其不参与浏览器资源选择、解码优化与可访问性语义，且srcset/sizes等属性仅在<img>/<source>上生效，自定义标签上被忽略。
自定义 HTML 元素（如 <responsive-img>）不能替代原生 <img> 或 <picture> 实现响应式图片加载逻辑——它不参与浏览器的资源选择、解码优化或可访问性语义，强行用它“调度”图片只会破坏 srcset、sizes 和 media 的生效机制。
为什么自定义元素不能写 srcset/sizes 属性
浏览器只识别 <img> 和 <source> 上的 srcset 与 sizes；这些属性在自定义标签上完全被忽略，既不会触发资源选择，也不会影响 loading="lazy" 或 decoding="async" 行为。你写的 data-srcset 或 data-sizes 只是普通属性，需手动解析并赋值给内部原生标签。
- 自定义元素继承自
HTMLElement，不是HTMLImageElement，无法被渲染引擎当作图像载体处理 -
srcset的 w/x 描述符匹配、sizes的媒体查询计算、DPR 感知等全部由浏览器硬编码在<img>解析阶段完成 - 哪怕你监听
resize后 JS 切换img.src，也绕不开 CLS（布局偏移）、无宽高比预留、懒加载失效等问题
必须把所有响应式逻辑写在内部原生标签里
若要用自定义元素封装（比如统一加 CDN 参数、自动 fallback、埋点日志），它只能作为容器，且内部结构必须严格受限：
- 仅允许一个直接子节点：
<picture>或<img>，不可嵌套多层或加 wrapper<div> -
srcset、sizes、media、type全部写在<source>或<img>上，不能挪到自定义标签的属性中 - 动态生成
srcset字符串时，应在connectedCallback中拼好后直接赋值给img.srcset，而非靠 resize 事件反复重写 - 必须透传
alt、fetchpriority、decoding等语义属性到内部<img>，否则屏幕阅读器可能读不到描述
容易被忽略的兼容性断点
即使你完全按规范封装，以下三点仍会直接导致响应式失效：
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari（≤15.4）和部分 Android WebView 不支持
<source type="image/webp">，但支持srcset+sizes——所以每个<picture>必须配<source type="image/jpeg">或最终<img src="*.jpg">作兜底 -
sizes中的媒体查询必须与实际 CSS 布局完全一致：例如卡片内图片占 1/3 宽，且断点从768px开始，则sizes应为"(max-width: 768px) 100vw, 33.33vw"，不是硬写"100vw" - 旧版 Edge（EdgeHTML）解析
sizes时，媒体查询里有空格（如(max-width: 768px)）会导致整个属性失效；Safari 对 w 描述符的支持直到 12.1 才稳定
真正麻烦的从来不是怎么写自定义元素，而是 CSS 布局变了但 sizes 没同步更新，或者 srcset 提供的宽度候选值和实际渲染宽度不匹配——这些错位不会报错，只会悄悄加载两倍大的图。
