Web组件，可以请求另一个HTML URL并将其注入到它的影子DOM中

Question

我今天花了一些时间与Lit尝试做一个简单的WebComponent，使HTTP GET到一个URI，返回一个完全形成的HTML文档，我想注入说HTML文档到WebComponent的影子DOM;基本上，这个WebComponent作为一个简单的代理，在我的网页上嵌入一个外部托管的(但受信任的)web片段。我遇到了一些问题:

1. Lit认为所有的HTML都是不安全的，所以我不得不用Lit的unsafeHTML指令来标记它。
然后，我注意到注入的HTML中的脚本或链接标签都没有被遵循，所以我将传入的HTML解析为HtmlDocument，找到所有的脚本/链接标签，并"重新创建";他们使用document.createElement(...)，并返回他们在我的渲染()。我现在注意到图像也没有显示。

我不喜欢抓取脚本/链接，重新创建它们，把它们塞进我的web组件，但我很好奇-什么是正确的方法来处理这个联合/消费联合的HTML页面/片段?

这个问题已经解决了吗?

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

这似乎比现在要困难得多。

Answer 1

我认为这与WebComponents关系不大，而是与HTML5规范有关。lit-html使用innerHTML创建元素。

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

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

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

关于图像,它可能是一个路径问题?

这个应该可以工作:

unsafeHTML(`<img src='http://placehold.it/350x350'>`)