javascript 动态加载 Web 组件/HTML 导入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21607663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically load Web Components / HTML Imports?
提问by TruMan1
How would you go about dynamically loading a web component - in response to a url route change for example?
您将如何动态加载 Web 组件 - 例如响应 url 路由更改？
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?
我不会提前知道请求的组件，所以您可以简单地使用 JavaScript 编写 HTML 导入，然后将代码添加到页面中，或者这有什么影响吗？也许 Google Polymer 有帮助？
回答by Scott Miles
Considering just Custom Elements, you can call document.registerElementwhenever you want. So from that standpoint, you can dynamically load script using any well known method and have dynamic custom elements.
仅考虑自定义元素，您可以随时调用document.registerElement。因此，从这个角度来看，您可以使用任何众所周知的方法动态加载脚本并拥有动态自定义元素。
Now, with respect to HTML Imports:
现在，关于 HTML 导入：
could you simply use JavaScript to write the HTML import and then add the code to the page
您可以简单地使用 JavaScript 编写 HTML 导入，然后将代码添加到页面吗
Yes, that's the basic idea.
是的，这是基本的想法。
Recent versions of the HTML Imports polyfill support dynamic link tags. IOW, you can do
最新版本的 HTML 导入 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);
Also, Polymer has enhanced support for this feature, namely an imperative api like this:
此外，Polymer 增强了对此功能的支持，即像这样的命令式 api：
Polymer.import([some_href], function() {
// called back when some_href is completely loaded, including
// external CSS from templates
});
The first argument is an array, so you can ask for multiple hrefs.
第一个参数是一个数组，因此您可以请求多个 href。
回答by Matt2012
Hi I asked this question over at the polymer google groups. https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU
嗨，我在聚合物谷歌小组问过这个问题。 https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU
and was directed to this article
并被定向到这篇文章
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#instantiating
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#instantiating
This makes it clear you can instantiate an element on the fly by either adding the element to the dom or programatically. However this appears to imply that you've loaded the html imports at runtime. What I think we both want to achieve is loading the html imports (with additional css and js includes) using ajax and then add our element. I'm going to link back to the polymer support forum to see if I can get an answer over here.
这清楚地表明您可以通过将元素添加到 dom 或以编程方式即时实例化元素。但是，这似乎意味着您已经在运行时加载了 html 导入。我认为我们都想要实现的是使用 ajax 加载 html 导入（包含额外的 css 和 js），然后添加我们的元素。我将链接回聚合物支持论坛，看看我是否可以在这里得到答案。
