HTMLTemplateElement: content-Eigenschaft
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.
Die content-Eigenschaft des HTMLTemplateElement-Interfaces gibt den Inhalt des <template>-Elements als ein DocumentFragment zurück. Das ownerDocument dieses Inhalts ist ein separates Document von demjenigen, das das <template>-Element selbst enthält — es sei denn, das enthaltende Dokument wurde eigens für den Zweck erstellt, Template-Inhalte zu halten.
Die Methoden Node.cloneNode() und Document.importNode() erstellen beide eine Kopie eines Knotens. Der Unterschied ist, dass importNode() den Knoten im Kontext des aufrufenden Dokuments klont, während cloneNode() das Dokument des zu klonenden Knotens verwendet. Der Dokumentkontext bestimmt das CustomElementRegistry für die Konstruktion von benutzerdefinierten Elementen. Aus diesem Grund sollte document.importNode() verwendet werden, um das content-Fragment zu klonen, damit benutzerdefinierte Element-Nachkommen mithilfe der Definitionen im aktuellen Dokument und nicht dem separaten Dokument, das den Template-Inhalt besitzt, konstruiert werden. Weitere Details finden Sie in den Beispielen auf der Seite zu Node.cloneNode().
Wert
Ein DocumentFragment.
Beispiele
Verwendung von importNode() mit Template-Inhalten
const templateElement = document.querySelector("#foo");
const documentFragment = document.importNode(templateElement.content, true);
// Now you can insert the documentFragment into the DOM
Das ownerDocument von Template-Inhalten
Für <template>-Elemente, die im Kontext eines normalen HTML-Dokuments erstellt werden, ist das ownerDocument des content ein separates, neu erstelltes Dokument:
const template = document.createElement("template");
console.log(template.content.ownerDocument === document); // false
console.log(template.content.ownerDocument.URL); // "about:blank"
Wenn das <template>-Element im Kontext eines Dokuments erstellt wird, das selbst für den Zweck des Haltens von Template-Inhalten erstellt wurde, dann ist das ownerDocument des content dasselbe wie das des enthaltenden Dokuments:
const template1 = document.createElement("template");
const docForTemplate = template1.content.ownerDocument;
const template2 = docForTemplate.createElement("template");
console.log(template2.content.ownerDocument === docForTemplate); // true
Spezifikationen
| Specification |
|---|
| HTML # dom-template-content-dev |