动态加载Web组件/HTML导入？

Question

当需要动态加载Web组件时，例如响应URL路径的更改，您该如何操作？

我事先不知道请求的组件，因此是否可以使用JavaScript编写HTML导入并将代码添加到页面中，或者会有影响？也许Google Polymer可以帮助处理这个问题？

- TruMan1

Answer 1

就 Custom Elements 而言，您可以随时调用 document.registerElement。从这个角度来看，您可以使用任何众所周知的方法动态加载脚本并拥有动态自定义元素。

现在，关于 HTML Imports：

你是否可以简单地使用 JavaScript 编写 HTML 导入，然后将代码添加到页面中？

是的，这是基本思路。

HTML 导入的最近版本支持动态链接标签。也就是说，您可以执行以下操作：

var link = document.createElement('link');
link.setAttribute('rel', 'import');
link.setAttribute('href', some_href);
link.onload = function() {
  // do stuff with import content
};
document.body.appendChild(link);

此外，Polymer增强了对该功能的支持，即提供了如下命令式API：

Also, Polymer has enhanced support for this feature, namely an imperative api like this:

Polymer.import([some_href], function() {
  // called back when some_href is completely loaded, including
  // external CSS from templates
});

第一个参数是一个数组，因此您可以请求多个href。

- Scott Miles

---

如果您正在构建Chrome扩展/应用程序，则需要使用前者而不是后者，因为存在此问题：https://github.com/Polymer/polymer/issues/810 - dipole_moment

Answer 2

你好，我在polymer的谷歌讨论组中提出了这个问题。 https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU

然后我被引导到了这篇文章。

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#instantiating

这明确说明您可以通过将元素添加到DOM或以编程方式来实例化元素。但是，这似乎意味着您已经在运行时加载了HTML导入。我们想要实现的是使用AJAX加载HTML导入（包含其他CSS和JS引用），然后添加我们的元素。我将链接回polymer支持论坛，以便在此处获取答案。

- Matt2012

---

抱歉重新激活这个问题：但是你在这方面有进一步的进展吗？ - user2983883