具有远程 HTML 导入的 Polymer/Web 组件未呈现

Posted 2023-02-23

【中文标题】具有远程 HTML 导入的 Polymer/Web 组件未呈现

【英文标题】：Polymer/Web Components with remote HTML imports not rendering

【发布时间】：2017-06-09 21:31:50

【问题描述】：

我一直在创建几个基于 Polymer 的自定义 Web 组件，这些组件将允许第三方网站在他们的网站上嵌入我们网站的内容（想想美化的 iframe 或 Google 地图小部件）。我正在将我的组件从运行良好的本地开发环境移动到我们的远程测试环境。但是我遇到了一个问题，这让我想知道我是否误解了如何部署和调用 Web 组件。

我的希望/假设是我能够将这些 Web 组件“构建”到单独的 javascript 和 html 文件中（使用 vulcanize 和 crisper），然后我将能够托管生成的 *.js 和 *.html 文件在我的公共服务器上。想要在他们的网站上嵌入我网站的一些网站内容的人会通过引用我的 Javascript 文件来使用我的 web 组件，例如：

<script src="https://www.example.com/assets/developer/webcomponents/mycomponent.build.js"  defer="defer"></script>

到我的 HTML 文件：

<link rel="import" href="https://www.example.com/developer/webcomponents/mycomponent.html" />

不幸的是，我发现当我的 HTML 组件文件位于远程（与主机网页不在同一台服务器上）时，Web 组件将不会呈现。如果相同的 HTML 组件文件与主机网页位于同一服务器上，则 Web 组件呈现良好。我知道这听起来像是典型的 CORS 问题，但是我在远程服务器上启用了 CORS，并且在 Chrome 开发者控制台中没有看到任何错误消息（这通常发生在出现 CORS 问题时）。

一种理论认为这是一个时间问题，并且 HTML 导入在 Javascript 启动之前尚未完成渲染（即使我在脚本标签中指定了“延迟”）。

我的另一个怀疑是不允许加载远程 Web 组件。我还没有找到任何支持这一理论的文档，但我发现的所有示例似乎都在运行演示的同一台服务器上托管了 Web 组件 javascript 和 html 模板；虽然这可能只是为了方便演示。

有人知道会发生什么吗？

【参考方案1】：

允许加载远程 Web 组件，我已经通过几个项目做到了这一点。您的组件的用户应该执行以下操作：

如有必要，加载 Web 组件 polyfill HTML 导入您构建的组件 在他们的网页中使用自定义元素

硫化的 JS 应该由你包含在用户导入的 HTML 文件中，而不是在用户的 HTML 页面中直接引用。

【讨论】：

这个答案帮助我继续深入了解我是如何将 HTML 文件返回给客户端的。事实证明，我无意中添加了一个带有“inline; filename=xyz”值的 Content-Disposition 标头。删除此标头解决了问题。我同样可以确认允许加载远程 Web 组件；这是最初的问题。