de.hideout-lastation.com
Wie man HTML benutzt
&
Mit Schatten-DOM
HTML Slot ist einer der bemerkenswertesten Standards von W3C. Kombinieren Sie das mit einem anderen beeindruckenden W3C-Standard namens Templates, und Sie haben ein fabelhaftes Gebräu, mit dem Sie arbeiten können. Die Möglichkeit, HTML-Elemente mit JavaScript auf einer Seite zu erstellen und hinzuzufügen, ist eine notwendige und wichtige Aufgabe.
Dies ist nützlich, wenn ein Code-Snippet nur zu bestimmten Zeiten angezeigt werden soll oder wenn Sie nicht Hunderte von ähnlich strukturierten HTML-Elementen eingeben möchten, sondern den Prozess automatisieren möchten.
Das Erstellen von HTML-Elementen in JavaScript ist nicht so wünschenswert . Es ist mühsam, zu überprüfen und zu überprüfen, ob Sie alle Tags abgedeckt haben, sie in die richtige Reihenfolge gebracht haben, alles in allem, es gibt einfach zu viel zu tippen und zu verfolgen. Dieser Tumult hat jedoch eine Lösung gefunden, als die Tag erschien. Wenn etwas dynamisch zur Seite hinzugefügt werden muss, können Sie es in den Ordner einfügen Element.
In diesem Beitrag zeige ich Ihnen, wie Sie das verwenden können
Das und Stichworte
Das Das Tag enthält HTML-Code, der von Browsern erst dann gerendert wird, wenn er mithilfe von JavaScript ordnungsgemäß zum Dokument hinzugefügt wurde. Das
Ein Shadow-DOM ähnelt einem regulären DOM (dem Dokumentmodell, das aus HTML analysiert wird). Es erstellt einen Bereichsbaum (einen Schatten-DOM-Baum), der eine eigene Wurzel hat und auch einen eigenen Stil haben kann.
Wenn Sie den Schatten-DOM-Baum in ein Element im Hauptdokument einfügen - das Element wird dann als Schatten-Host bezeichnet -, werden alle untergeordneten Elemente des Schatten-Hosts, die mit dem slot Attribut markiert sind (nicht die gleichen wie oben erwähnt)
Das Shadow-DOM wird seit der Erstellung dieses Artikels (Juli 2017) nur in WebKit- und Blink-basierten Browsern unterstützt, Sie können jedoch jederzeit den aktuellen Status der Browserunterstützung auf CanIUse überprüfen.Einrichten des HTML
Immer noch verwirrend? Lassen Sie uns einen Code sehen, beginnend mit dem Element.
Innerhalb , Da ist ein In der Vorlage habe ich auch einige grundlegende Stile für die Tabelle hinzugefügt, mit der Wir werden es als Vorlage für die Erstellung einiger Tabellen verwenden, die einem Dokument hinzugefügt werden. Es gibt
und ) als Platzhalter für die Spaltentitel und Zellenwerte fungieren . Jeder Slot hat ein eindeutiges Namensattribut, das ihn identifiziert .