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

Question

您将如何动态加载Web组件 - 例如,响应URL路由更改？

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

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.