So verwenden Sie HTML & mit Schatten-DOM
HTML-Slot ist einer der bemerkenswertesten Standards von W3C. Kombinieren Sie das mit einem anderen beeindruckenden W3C-Standard Vorlagen, und Sie haben eine fantastische Zubereitung, mit der Sie arbeiten können. Fähig sein zu HTML-Elemente erstellen und hinzufügen zu einer Seite mit JavaScript ist eine notwendige und wichtige Aufgabe.
Dies ist nützlich, wenn ein Code-Snippet erforderlich ist erscheinen nur zu bestimmten Zeiten, oder wenn Sie nicht hunderte gleichartig strukturierte HTML-Elemente eingeben möchten, dies jedoch möchten Automatisieren Sie den Prozess.
Das Erstellen von HTML-Elementen in JavaScript ist nicht so wünschenswert. Es ist umständlich, dass Sie prüfen und erneut prüfen müssen, ob Sie alle Tags abgedeckt und in der richtigen Reihenfolge platziert haben. Alles in allem gibt es nur auch viel zu schreiben und zu verfolgen. Dieser Aufruhr jedoch, habe eine Lösung wenn der tag erschienen. Wenn etwas sein muss dynamisch zur Seite hinzugefügt, Sie können es in die Element.
In diesem Beitrag werde ich Ihnen zeigen, wie Sie das nutzen können Tags zusammen mit JavaScript an Erstellen Sie eine Mini-HTML-Tabellenfabrik das kann Hunderte von ähnlichen Tabellen erstellen und füllen.
Das
Das Tag enthält HTML-Code wird von Browsern nicht gerendert bis es ordnungsgemäß zum Dokument hinzugefügt wird, mithilfe von JavaScript. Das Element.
EIN Schatten-DOM ähnelt einem regulären DOM (das aus HTML geparste Dokumentmodell). Es erstellt einen Baum mit Umfang (ein Schatten-DOM-Baum), der hat eine Wurzel für sich und kann auch eine haben Stil für sich.
Wenn Sie den Shadow-DOM-Baum in ein Element im Hauptdokument einfügen, wird das Element als bezeichnet Schattenhost -, alle untergeordneten Elemente des Schattenhosts, die mit gekennzeichnet sind Slot Attribut (nicht dasselbe wie das zuvor genannte)
Die Shadow DOM, wie zum Zeitpunkt der Veröffentlichung dieses Artikels (Juli 2017), sind wird nur in WebKit- und Blink-basierten Browsern unterstützt Sie können jedoch jederzeit den aktuellen Status der Browser-Unterstützung auf CanIUse überprüfen.
HTML einrichten
Immer noch verwirrend? Lassen Sie uns einen Code sehen, beginnend mit dem Element.
Innerhalb In der Vorlage, Ich habe auch hinzugefügt einige grundlegende Stile für die Tabelle mit der , Da ist ein Gut als Blaupause verwenden zum einige Tabellen erstellen das wird einem Dokument hinzugefügt. Es gibt
und ) als Platzhalter fungieren für die Spaltenüberschriften und Zellenwerte. Jeder Slot hat ein Unikat Name Attribut das identifiziert es.