具有远程HTML导入的聚合物/ Web组件无法呈现

时间:2017-01-24 21:14:30

标签: polymer web-component

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

我的希望/假设是我能够将这些Web组件“构建”为单独的javascript和html文件(使用硫化和保鲜)然后我将能够托管生成的* .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问题时会发生)。

一个理论是,这是一个计时问题,并且在Javascript启动之前HTML导入还没有完成渲染(即使我在脚本标记中指定了“defer”)。

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

有人知道会发生什么事吗?

1 个答案:

答案 0 :(得分:1)

允许加载远程Web组件,我已经完成了一些项目。组件的用户应执行以下操作:

  1. 如有必要,
  2. 加载网络组件polyfill
  3. HTML-import your built components
  4. 在其网页中使用自定义元素
  5. 您应该在用户导入的HTML文件中包含硫化JS,而不是在用户的HTML页面中直接引用。