不能直接用 封装第三方 api 组件，因其仅是静态 html 片段容器，不执行脚本、不发起请求、不响应属性变更；真正封装需用 custom elements 配合 shadow dom 实现请求、状态、错误处理与样式隔离。
不能直接用 <template></template> 封装第三方 API 组件——模板只管结构，不处理请求、状态、错误或跨域逻辑。真正要封装的是「调用行为 + UI 呈现」的组合体，得靠 Custom Elements 配合 Shadow DOM 才能隔离风险。
为什么 <template></template> 单独用不了第三方 API
<template></template> 是静态片段容器，不执行脚本、不发起网络请求、不响应属性变更。你把它当“HTML存档”可以，但指望它自动拉取 API 数据、渲染 loading 状态、重试失败请求，它做不到。
- 常见错误现象：
<template id="api-card"><div>{{data.name}}</div></template>—— 这个{{data.name}}不会自动替换，JS 不介入就只是纯文本 - 使用场景：仅适合预置结构 + 手动 JS 克隆 + 逐字段赋值（比如初始化时已知数据）
- 性能影响：每次克隆都要遍历节点找
data-bind，没缓存、无 diff，大数据量卡顿明显
必须用 Custom Element + Shadow DOM 接口封装
第三方 API 组件本质是「有副作用的 UI 控件」：它要发请求、等响应、处理 error、支持重试、暴露事件。这些只能在类里写进生命周期钩子。
-
connectedCallback()触发首次请求（但注意：它可能被反复调用，别在这里重复 fetch） - 用
static get observedAttributes()监听api-url、timeout等配置变更，触发attributeChangedCallback重新请求 - Shadow DOM 内写
<style></style>，避免你引入的 Font Awesome 或 Foundation 样式污染全局（否则按钮变蓝、图标错位全是它害的） - 示例关键行：
this.shadowRoot.innerHTML = `<style>/* 本地样式 */</style> <div class="loading">...</div>`—— 所有样式和结构锁死在 shadow 内
如何安全注入第三方 API 返回的 HTML 片段
有些 API（如富文本 CMS、邮件模板服务）直接返回 HTML 字符串。这类内容绝不能用 innerHTML = response.html 往 Shadow DOM 里塞——XSS 风险极高，且内联 <script></script> 会被执行。
- 正确做法：用
DOMPurify.sanitize(response.html)过滤后再插入this.shadowRoot - 禁止操作：
this.shadowRoot.innerHTML = untrustedHtml—— 即使你信任这个 API，中间 CDN 或代理也可能被劫持 - 兼容性注意：DOMPurify 在 IE11 下需 polyfill；若环境不允许，至少用
textContent替代，牺牲富文本保安全 - 路径风险：API 返回的
<img src="/avatar.jpg">是相对路径，Shadow DOM 不继承 base URL，得手动补全为https://api.example.com/avatar.jpg
属性设计与外部通信容易踩的坑
对外暴露的属性名不是随便起的。比如叫 data 就和原生 <img data-src> 冲突；叫 config 又太模糊，用户根本不知道该传对象还是 JSON 字符串。
- 推荐命名：
api-endpoint（kebab-case）、loading-text、error-retry—— 和 HTML 属性习惯一致 - 不要在
constructor里读取this.getAttribute('api-endpoint')—— 此时属性还没挂到元素上，返回null - 事件必须用
new CustomEvent('api-load', { detail: data })发出，别用dispatchEvent(new Event('load'))—— 后者没携带数据，调用方拿不到响应体 - 别忘了加
export default class ApiCard extends HTMLElement，否则 ES 模块环境下import进来无法注册
最常被忽略的一点：第三方 API 的 rate limit 和 auth header 必须由组件内部统一管理，而不是让用户每次都在 api-endpoint 里拼 ?token=xxx —— token 过期、刷新、轮换全得组件自己兜底，否则调用方一换环境就崩。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
