Ich benutze seit einiger Zeit benutzerdefinierte Elemente v1 über ein Polyfill . Chrome 54 (die erste Version mit einer nativen v1-Implementierung) hat beim Initialisieren meiner Elemente Fehler ausgelöst:
DOMException: Fehler beim Ausführen von 'createElement' in 'Document': Das Ergebnis darf keine untergeordneten Elemente enthalten
Die problematische Zeile ist einfach:
%Vor%Die native Implementierung von Chrome scheint Spezifikationsanforderungen zu erzwingen, die das Polyfill nicht erfüllt. Gemäß dem Abschnitt " Anforderungen für benutzerdefinierte Elementkonstruktoren " der Spezifikation:
Das Element darf keine Attribute oder untergeordneten Elemente erhalten, da dies die Erwartungen von Konsumenten verletzt, die die Methoden createElement oder createElementNS verwenden.
Das Element, das ich erstellen wollte, fügte sich selbst in seinem Konstruktor hinzu.
Die Lösung sollte den Empfehlungen der Spezifikation folgen:
Im Allgemeinen sollte die Arbeit so weit wie möglich auf ConnectedCallback verschoben werden - insbesondere auf Arbeiten, bei denen Ressourcen abgerufen oder gerendert werden. Beachten Sie jedoch, dass connectedCallback mehr als einmal aufgerufen werden kann, so dass jede Initialisierungsoperation, die wirklich einmalig ist, einen Guard benötigt, um zu verhindern, dass sie zweimal ausgeführt wird.
Das heißt, fügen Sie untergeordnete Elemente in dem verbundenen Rückruf hinzu, und verwenden Sie ein Flag, um sicherzustellen, dass das Element nur bei erster Verbindung initialisiert wird.
Tags und Links custom-element