Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<template>: Das Content Template-Element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2015⁩.

* Some parts of this feature may have varying levels of support.

Das <template> HTML Element dient als Mechanismus zum Halten von HTML Fragmenten, die entweder später über JavaScript verwendet oder sofort in den Shadow DOM generiert werden können.

Attribute

Dieses Element enthält die globalen Attribute.

shadowrootmode

Erzeugt einen Shadow Root für das Elternelement. Es ist eine deklarative Version der Element.attachShadow() Methode und akzeptiert die gleichen aufzählbaren Werte.

open: Macht den internen Shadow Root DOM für JavaScript zugänglich (empfohlen für die meisten Anwendungsfälle).
closed: Verbirgt den internen Shadow Root DOM vor JavaScript.

Hinweis: Der HTML-Parser erstellt ein ShadowRoot Objekt im DOM für das erste <template> in einem Knoten, wenn dieses Attribut auf einen zulässigen Wert gesetzt ist. Wenn das Attribut nicht gesetzt ist, oder nicht auf einen zulässigen Wert gesetzt ist — oder wenn schon ein ShadowRoot deklarativ im selben Elternelement erzeugt wurde — dann wird ein HTMLTemplateElement konstruiert. Ein HTMLTemplateElement kann nach dem Parsen nicht nachträglich in einen Shadow Root umgewandelt werden, beispielsweise durch Setzen von HTMLTemplateElement.shadowRootMode.

Hinweis: Sie könnten das nicht standardisierte shadowroot Attribut in älteren Tutorials und Beispielen finden, das früher in Chrome 90-110 unterstützt wurde. Dieses Attribut wurde inzwischen entfernt und durch das standardisierte shadowrootmode Attribut ersetzt.

shadowrootclonable

Setzt den Wert der clonable Eigenschaft eines mittels dieses Elements erzeugten ShadowRoot auf true. Wenn gesetzt, wird ein Klon des Shadow-Hosts (des Elternelements dieses <template>), der mit Node.cloneNode() oder Document.importNode() erstellt wurde, einen Shadow Root in der Kopie enthalten.

shadowrootdelegatesfocus

Setzt den Wert der delegatesFocus Eigenschaft eines mittels dieses Elements erzeugten ShadowRoot auf true. Wenn dies gesetzt ist und ein nicht fokussierbares Element im Shadow-Baum ausgewählt wird, wird der Fokus an das erste fokussierbare Element im Baum delegiert. Der Wert ist standardmäßig false.

shadowrootserializable

Setzt den Wert der serializable Eigenschaft eines mittels dieses Elements erzeugten ShadowRoot auf true. Falls gesetzt, kann der Shadow Root serialisiert werden, indem die Methoden Element.getHTML() oder ShadowRoot.getHTML() mit dem Parameter options.serializableShadowRoots auf true gesetzt aufgerufen werden. Der Wert ist standardmäßig false.

Verwendungshinweise

Dieses Element hat keinen erlaubten Inhalt, da alles, was in der HTML-Quelle darin verschachtelt ist, nicht wirklich zu den Kindern des <template> Elements wird. Die Node.childNodes Eigenschaft des <template> Elements ist immer leer, und Sie können auf den genannten verschachtelten Inhalt nur über die spezielle content Eigenschaft zugreifen. Wenn Sie jedoch Node.appendChild() oder ähnliche Methoden auf das <template> Element anwenden, fügen Sie tatsächlich Kinder in das <template> Element selbst ein, was ein Verstoß gegen dessen Inhaltsmodell ist und das DocumentFragment, das von der content Eigenschaft zurückgegeben wird, nicht tatsächlich aktualisiert.

Aufgrund der Art und Weise, wie das <template> Element analysiert wird, sind alle innerhalb des Templates befindlichen öffnenden und schließenden Tags <html>, <head> und <body> Syntaxfehler und werden vom Parser ignoriert, sodass <template><head><title>Test</title></head></template> dasselbe ist wie <template><title>Test</title></template>.

Es gibt zwei Hauptarten, das <template> Element zu verwenden.

Template-Dokumentfragment

Standardmäßig wird der Inhalt des Elements nicht gerendert. Die entsprechende HTMLTemplateElement Schnittstelle enthält eine standardmäßige content Eigenschaft (ohne entsprechendes Inhalts-/Markup-Attribut). Diese content Eigenschaft ist schreibgeschützt und enthält ein DocumentFragment, das den durch das Template dargestellten DOM-Teilbaum enthält. Dieses Fragment kann mit der cloneNode Methode geklont und in den DOM eingefügt werden.

Seien Sie vorsichtig beim Verwenden der content Eigenschaft, da das zurückgegebene DocumentFragment unerwartetes Verhalten zeigen kann. Für weitere Details siehe den Abschnitt Vermeidung von DocumentFragment-Fallstricken unten.

Deklarativer Shadow DOM

Falls das <template> Element das shadowrootmode Attribut mit dem Wert open oder closed enthält, erzeugt der HTML-Parser sofort einen Shadow DOM. Das Element wird im DOM durch seinen Inhalt ersetzt, der in einem ShadowRoot eingewickelt und an das Elternelement angehängt wird. Dies ist das deklarative Äquivalent zum Aufruf von Element.attachShadow(), um einem Element einen Shadow Root anzuhängen.

Falls das Element einen anderen Wert für shadowrootmode hat oder das shadowrootmode Attribut nicht besitzt, erzeugt der Parser ein HTMLTemplateElement. In ähnlicher Weise wird bei mehreren deklarativen Shadow Roots nur der erste durch einen ShadowRoot ersetzt — nachfolgende Instanzen werden als HTMLTemplateElement Objekte geparsed.

Beispiele

Generierung von Tabellenzeilen

Wir beginnen mit dem HTML-Teil des Beispiels.

html

<table id="producttable">
 <thead>
 <tr>
 <td>UPC_Code</td>
 <td>Product_Name</td>
 </tr>
 </thead>
 <tbody>
 <!-- existing data could optionally be included here -->
 </tbody>
</table>
<template id="productrow">
 <tr>
 <td class="record"></td>
 <td></td>
 </tr>
</template>

Zuerst haben wir eine Tabelle, in die wir später Inhalte mit JavaScript-Code einfügen werden. Danach kommt das Template, welches die Struktur eines HTML-Fragments beschreibt, das eine einzelne Tabellenzeile darstellt.

Nachdem die Tabelle erstellt und das Template definiert wurde, verwenden wir JavaScript, um Zeilen in die Tabelle einzufügen, wobei jede Zeile mithilfe des Templates als Grundlage erstellt wird.

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ("content" in document.createElement("template")) {
 // Instantiate the table with the existing HTML tbody
 // and the row with the template
 const tbody = document.querySelector("tbody");
 const template = document.querySelector("#productrow");
 // Clone the new row and insert it into the table
 const clone = template.content.cloneNode(true);
 let td = clone.querySelectorAll("td");
 td[0].textContent = "1235646565";
 td[1].textContent = "Stuff";
 tbody.appendChild(clone);
 // Clone the new row and insert it into the table
 const clone2 = template.content.cloneNode(true);
 td = clone2.querySelectorAll("td");
 td[0].textContent = "0384928528";
 td[1].textContent = "Acme Kidney Beans 2";
 tbody.appendChild(clone2);
} else {
 // Find another way to add the rows to the table because
 // the HTML template element is not supported.
}

Das Ergebnis ist die ursprüngliche HTML-Tabelle, der über JavaScript zwei neue Zeilen hinzugefügt wurden:

table {
 background: black;
}
table td {
 background: white;
}

[フレーム]

Implementierung eines deklarativen Shadow DOM

In diesem Beispiel ist zu Beginn der Auszeichnung eine versteckte Support-Warnung enthalten. Diese Warnung wird später über JavaScript angezeigt, wenn der Browser das shadowrootmode Attribut nicht unterstützt. Danach folgen zwei <article> Elemente, die jeweils verschachtelte <style> Elemente mit unterschiedlichem Verhalten enthalten. Das erste <style> Element ist global für das gesamte Dokument. Das zweite ist auf den Shadow Root beschränkt, der anstelle des <template> Elements aufgrund des Vorhandenseins des shadowrootmode Attributs erzeugt wird.

html

<p hidden>
 ⛔ Your browser doesn't support <code>shadowrootmode</code> attribute yet.
</p>
<article>
 <style>
 p {
 padding: 8px;
 background-color: wheat;
 }
 </style>
 <p>I'm in the DOM.</p>
</article>
<article>
 <template shadowrootmode="open">
 <style>
 p {
 padding: 8px;
 background-color: plum;
 }
 </style>
 <p>I'm in the shadow DOM.</p>
 </template>
</article>

const isShadowRootModeSupported = Object.hasOwn(
 HTMLTemplateElement.prototype,
 "shadowRootMode",
);
document
 .querySelector("p[hidden]")
 .toggleAttribute("hidden", isShadowRootModeSupported);

[フレーム]

Deklarativer Shadow DOM mit delegiertem Fokus

Dieses Beispiel demonstriert, wie shadowrootdelegatesfocus auf einen Shadow Root angewendet wird, der deklarativ erstellt wurde, und den Effekt, den dies auf den Fokus hat.

Der Code deklariert zuerst einen Shadow Root innerhalb eines <div> Elements, indem das <template> Element mit dem shadowrootmode Attribut verwendet wird. Dies zeigt sowohl ein nicht fokussierbares <div> Element mit Text als auch ein fokussierbares <input> Element an. Es verwendet auch CSS, um Elemente mit :focus blau zu gestalten und das normale Styling des Host-Elements festzulegen.

html

<div>
 <template shadowrootmode="open">
 <style>
 :host {
 display: block;
 border: 1px dotted black;
 padding: 10px;
 margin: 10px;
 }
 :focus {
 outline: 2px solid blue;
 }
 </style>
 <div>Clickable Shadow DOM text</div>
 <input type="text" placeholder="Input inside Shadow DOM" />
 </template>
</div>

Der zweite Codeblock ist identisch, außer dass das shadowrootdelegatesfocus Attribut gesetzt wird, das den Fokus an das erste fokussierbare Element im Baum delegiert, wenn ein nicht fokussierbares Element im Baum ausgewählt wird.

html

<div>
 <template shadowrootmode="open" shadowrootdelegatesfocus>
 <style>
 :host {
 display: block;
 border: 1px dotted black;
 padding: 10px;
 margin: 10px;
 }
 :focus {
 outline: 2px solid blue;
 }
 </style>
 <div>Clickable Shadow DOM text</div>
 <input type="text" placeholder="Input inside Shadow DOM" />
 </template>
</div>

Zuletzt verwenden wir das folgende CSS, um ein rotes Rahmen um das übergeordnete <div> Element zu legen, wenn es den Fokus hat.

css

div:focus {
 border: 2px solid red;
}

Die Ergebnisse sind unten gezeigt. Wenn das HTML zuerst gerendert wird, haben die Elemente kein Styling, wie auf dem ersten Bild gezeigt. Für den Shadow Root, der nicht shadowrootdelegatesfocus gesetzt hat, können Sie überall außer dem <input> klicken und der Fokus ändert sich nicht (wenn Sie das <input> Element auswählen, sieht es aus wie auf dem zweiten Bild).

[画像:Screenshot des Codes ohne gesetzten Fokus]

Für den Shadow Root mit gesetztem shadowrootdelegatesfocus wählt ein Klick auf den Text (der nicht fokussierbar ist) das <input> Element aus, da dies das erste fokussierbare Element im Baum ist. Dies fokussiert auch das Elternelement, wie unten gezeigt.

[画像:Screenshot des Codes, bei dem das Element fokussiert ist]

Vermeidung von DocumentFragment-Fallstricken

Wenn ein DocumentFragment Wert übergeben wird, verschieben Node.appendChild und ähnliche Methoden nur die Kindknoten dieses Wertes in den Zielknoten. Daher ist es normalerweise vorzuziehen, Ereignishandler an die Kinder eines DocumentFragment zu binden, anstatt an das DocumentFragment selbst.

Betrachten Sie das folgende HTML und JavaScript:

HTML

html

<div id="container"></div>
<template id="template">
 <div>Click me</div>
</template>

JavaScript

const container = document.getElementById("container");
const template = document.getElementById("template");
function clickHandler(event) {
 event.target.append(" — Clicked this div");
}
const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);
const secondClone = template.content.cloneNode(true);
secondClone.children[0].addEventListener("click", clickHandler);
container.appendChild(secondClone);

Ergebnis

Da firstClone ein DocumentFragment ist, werden beim Aufruf von appendChild nur die Kinder zu container hinzugefügt; die Ereignishandler von firstClone werden nicht kopiert. Im Gegensatz dazu wird, weil ein Ereignishandler zum ersten Kindknoten von secondClone hinzugefügt wird, der Ereignishandler kopiert, wenn appendChild aufgerufen wird, und das Klicken darauf funktioniert wie erwartet.

[フレーム]

Technische Zusammenfassung

Inhaltskategorien	Metadatenelemente, Funktionselemente, Phrasenelemente, skriptunterstützende Elemente
Erlaubter Inhalt	Nichts (siehe Verwendungshinweise)
Tag-Auslassung	Keine, sowohl das öffnende als auch das schließende Tag sind erforderlich.
Erlaubte Eltern	Jedes Element, das Metadatenelemente, Phrasenelemente oder skriptunterstützende Elemente akzeptiert. Ebenfalls erlaubt als Kind eines `<colgroup>` Elements, das kein `span` Attribut hat.
Implizierte ARIA-Rolle	Keine entsprechende Rolle
Erlaubte ARIA-Rollen	Keine `role` erlaubt
DOM-Schnittstelle	[`HTMLTemplateElement`](/de/docs/Web/API/HTMLTemplateElement)

Spezifikationen

Specification
HTML # the-template-element

Browser-Kompatibilität

Siehe auch

part und exportparts HTML Attribute
<slot> HTML Element
:has-slotted, :host, :host(), und :host-context() CSS Pseudoklassen
::part und ::slotted CSS Pseudoelemente
ShadowRoot Schnittstelle
Verwendung von Templates und Slots
CSS Scoping Modul
Deklarativer Shadow DOM (mit HTML) in Using Shadow DOM
Deklarativer Shadow DOM auf web.dev (2023)

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden