html自定义元素无法解决跨域问题，其内部fetch仍受cors限制；真正生效的是服务器返回的access-control-allow-origin等响应头，前端封装无法绕过浏览器同源策略。
HTML 自定义元素本身不能解决跨域问题，也不能绕过 CORS 限制；它只是封装 UI 的手段，跨域资源加载逻辑仍需遵循浏览器同源策略和响应头规则。
自定义元素里用 fetch 加载跨域 API 会直接被拦
很多人以为把 fetch 封进 <user-card></user-card> 就能“隐藏”跨域逻辑，实际毫无作用。只要组件内部发起跨域 fetch 或 XMLHttpRequest，浏览器照样校验响应头：
- 控制台报错：
Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present - Network 面板里能看到请求发出去了，但 Response Headers 里没有
Access-Control-Allow-Origin - 即使组件用了 Shadow DOM 隔离样式，也完全不影响 CORS 校验——那是网络层的事，跟 DOM 结构无关
<img>、<script></script> 等标签在自定义元素里照常跨域，但有前提
自定义元素可以安全内嵌原生支持跨域的标签，但必须注意它们是否需要 JS 读取内容：
-
<img src="https://cdn.example.com/avatar.jpg?x-oss-process=image/resize,p_40">：能显示，不触发 CORS（除非加crossorigin） -
<img src="https://cdn.example.com/avatar.jpg?x-oss-process=image/resize,p_40" crossorigin="anonymous">：触发 CORS，服务端必须返回Access-Control-Allow-Origin: *，否则后续用canvas.drawImage()会报 “Tainted canvas” -
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>：默认不触发 CORS，但若你在组件里试图通过document.scripts读取其内容或捕获错误堆栈，就会失败
想让自定义元素真正“跨域加载并使用数据”，唯一可靠路径是服务端配头
前端无法靠改 HTML 或封装逻辑绕过限制。如果你的 <api-table url="https://api.other.com/users"></api-table> 要工作，必须确保：
- 服务端对
GET https://api.other.com/users的响应中包含：Access-Control-Allow-Origin: https://your-app.com（不能是*，如果前端带 cookie） - 如果组件内部用了
credentials: 'include'，服务端还必须返回：Access-Control-Allow-Credentials: true - 如果组件发的是
POST或带Authorization头，服务端得响应预检（OPTIONS），且包含：Access-Control-Allow-Methods: POST、Access-Control-Allow-Headers: Authorization
容易被忽略的坑：自定义元素生命周期里发请求的时机
在 connectedCallback 里直接 fetch 很常见，但要注意：
- 如果组件被多次
append又remove，connectedCallback可能反复触发，导致重复请求——没做防抖或取消机制的话，后端可能被刷爆 - 如果组件属性（如
url）是异步设置的，connectedCallback执行时值可能还是空或默认值，得监听attributeChangedCallback - Shadow DOM 里插入的
<iframe src="https://other.com/embed"></iframe>不触发 CORS，但 JS 访问其window仍受同源策略限制，且目标页必须主动设X-Frame-Options或Content-Security-Policy: frame-ancestors
真正卡住人的从来不是怎么写 customElements.define，而是搞不清哪一步该由前端控制、哪一步死磕服务端。比如你发现 <img crossorigin> 在组件里不生效，第一反应不该是换框架，而是抓包看那个图片 URL 的响应头有没有 Access-Control-Allow-Origin——没有就找后端加，别在 HTML 里打转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
