Laden Sie Web-Komponenten/HTML-Importe dynamisch?

Question

Wie würden Sie eine Webkomponente dynamisch laden - beispielsweise als Reaktion auf eine URL-Routenänderung?

Ich weiß nicht, die angeforderte Komponente im Voraus, also könnten Sie einfach JavaScript verwenden, um den HTML-Import zu schreiben und dann den Code der Seite hinzufügen, oder gibt es Auswirkungen auf diese? Vielleicht hilft Google Polymer?

Answer 1

Wenn Sie nur benutzerdefinierte Elemente in Betracht ziehen, können Sie jederzeit document.registerElement anrufen. Von diesem Standpunkt aus können Sie das Skript mit einer beliebigen bekannten Methode dynamisch laden und dynamische benutzerdefinierte Elemente verwenden.

nun mit Bezug auf HTML-Importe:

können Sie einfach JavaScript verwenden, um den HTML-Import zu schreiben und dann der Code zur

Ja, das ist die Grundidee Seite hinzufügen.

Aktuelle Versionen des HTML Imports-Polyfills unterstützen dynamische Link-Tags. IOW, können Sie

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); 

auch tun hat Polymer verbesserte Unterstützung für diese Funktion, nämlich eine zwingende api wie folgt aus:

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

Das erste Argument ist ein Array, so können Sie für mehrere hrefs fragen .

Answer 2

Hallo Ich habe diese Frage über die Polymer Google-Gruppen gestellt. https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU

und wurde zu diesem Artikel gerichtet

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

Dies macht es klar, dass Sie ein Element im laufenden Betrieb entweder durch Hinzufügen des Elements zum Dom oder programmatisch instanziieren. Dies deutet jedoch darauf hin, dass Sie die HTML-Importe zur Laufzeit geladen haben. Was ich denke, dass wir beide erreichen wollen, ist das Laden der HTML-Importe (mit zusätzlichen CSS- und JS-Includes) unter Verwendung von Ajax und dann das Hinzufügen unseres Elements. Ich werde zurück zum Polymer-Support-Forum gehen, um zu sehen, ob ich hier eine Antwort bekommen kann.