0

今天我花了一些时间和 Lit 一起尝试制作一个简单的 WebComponent，它使一个 HTTP GET 到一个 URI，它返回一个完整的 HTML 文档，我想将这个 HTML 文档注入到 WebComponent 的影子 DOM 中；基本上，这个 WebComponent 充当了一个简单的代理，用于在我的网页上嵌入一个外部托管（但受信任）的 Web 片段。我遇到了几个问题：

  1. Lit 认为所有的 HTML 都是不安全的，所以我不得不用 Lit 的unsafeHTML指令来标记它。
  2. 然后，我注意到注入的 HTML 中没有任何脚本或链接标签被跟踪，因此我将传入的 HTML 解析为 HtmlDocument，找到所有脚本/链接标签，并使用“重新创建”它们并将它们document.createElement(...)返回到我的使成为（）。我现在注意到图像也没有出现。

我不喜欢抓取脚本/链接并重新创建它们并将它们插入我的 Web 组件，但我很好奇 - 处理这个联合/消费联合 HTML 页面/片段的正确方法是什么？

oEmbed 已经解决了这个问题吗？

使用不同的 WebComponent 库是否更简单？

在这一点上，这似乎比应该的要困难得多。

4

1 回答 1

0

我认为它与 WebComponents 无关，而是与 HTML5 规范有关。lit-html用于innerHTML创建元素。

使用 innerHTML 插入的脚本元素在插入时不会执行

仍然有执行JS的方法，但这与您的问题无关。

unsafeHTML(`<img src="triggerError" onerror="alert('BOOM')">`)

关于图像，可能是路径问题？

这应该有效：

unsafeHTML(`<img src='http://placehold.it/350x350'>`)
于 2021-10-13T12:24:12.280 回答