如何实现可请求外部HTML并注入shadow DOM的Web Component？

正确实现聚合外部受信任HTML片段的方案 #

• 优先解决资源路径问题：图片加载失败的核心原因是返回HTML中的相对路径是相对于目标请求URI的，而非你当前站点的访问路径。拿到HTML字符串后，先以请求的原始URI作为基准路径，批量替换所有资源的相对路径为绝对路径：包括<img>的src属性、<link>的href属性、<script>的src属性、以及内联<style>中的url()资源，可直接用new URL(相对路径, 原始请求URI)快速完成路径转换。
• 脚本执行的标准处理逻辑：unsafeHTML注入的脚本不执行是浏览器原生安全限制，和Lit框架无关，不需要在render()方法里手动创建元素返回。正确的处理时机是在Lit的updated生命周期钩子中，等unsafeHTML已经把内容插入shadow DOM后，遍历shadow DOM下的所有script标签，逐个复制原标签的所有属性、文本内容，创建新的script元素替换原标签即可触发执行。
• 样式兼容调整：如果外部HTML的样式依赖全局上下文，可将外部样式表通过adoptedStyleSheets挂载到当前shadow root上，解决shadow DOM的样式隔离导致的样式失效问题。

oEmbed适用性说明 #

oEmbed是通用嵌入标准，仅在你要嵌入的目标站点主动提供oEmbed接口时可用。符合规范的oEmbed接口会直接返回路径完全处理好的可嵌入HTML片段，无需你自行处理路径、脚本问题，能大幅降低开发成本。但如果目标站点不支持oEmbed，该方案无法使用，仍需自行处理HTML内容。

更换WebComponent库的作用 #

你遇到的问题均为浏览器原生的安全限制、WebComponent的原生隔离特性导致，和使用的上层框架无关。无论切换到Stencil、Svelte等其他WebComponent开发库，都仍然会遇到相同的底层问题，更换库无法简化实现难度。 #

内容的提问来源于stack exchange，提问作者empire29