10

How would you go about dynamically loading a web component - in response to a url route change for example?

I won't know the requested component ahead of time, so could you simply use JavaScript to write the HTML import and then add the code to the page, or are there implications with this? Perhaps Google Polymer helps?

4

2 回答 2

12

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

现在，关于 HTML 导入：

您能否简单地使用 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。

于 2014-02-08T17:20:09.693 回答
3

嗨，我在聚合物谷歌小组问过这个问题。 https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU

并被定向到这篇文章

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

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

于 2014-02-07T12:22:52.073 回答