Dynamically load Web Components / HTML Imports?

微笑、不失礼 提交于 2019-11-29 04:08:30
Scott Miles

Considering just Custom Elements, you can call document.registerElement whenever you want. So from that standpoint, you can dynamically load script using any well known method and have dynamic custom elements.

Now, with respect to HTML Imports:

could you simply use JavaScript to write the HTML import and then add the code to the page

Yes, that's the basic idea.

Recent versions of the HTML Imports polyfill support dynamic link tags. IOW, you can do

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.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.

Hi I asked this question over at the polymer google groups. https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU

and was directed to this article

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!