Question

如何动态加载Web组件 - 例如，响应网址路由更改？

我不会提前知道所请求的组件，所以你可以简单地使用JavaScript来编写HTML导入，然后将代码添加到页面中，或者是否有这样的含义？也许谷歌聚合物有帮助吗？

Answer 1

只考虑自定义元素，您可以随时拨打document.registerElement。因此，从这个角度来看，您可以使用任何众所周知的方法动态加载脚本，并拥有动态自定义元素。

现在，关于HTML Imports：

你可以简单地用JavaScript编写HTML导入然后添加页面的代码

是的，这是基本的想法。

最近版本的HTML Imports polyfill支持动态链接标记。 IOW，你可以做到

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：

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

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

Answer 2

您好我在聚合物谷歌小组提出了这个问题。 https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU

并被引导到这篇文章

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

这清楚地表明，您可以通过将元素添加到dom或以编程方式实例化实例化元素。但是，这似乎意味着您已经在运行时加载了html导入。我认为我们都希望实现的是使用ajax加载html导入（使用额外的css和js包含）然后添加我们的元素。我将链接回聚合物支持论坛，看看我是否可以在这里得到答案。

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

2 个答案: