HTMLTemplateElement.htmlFor — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTemplateElement.htmlFor

Beschreibung

Die Eigenschaft htmlFor spiegelt das HTML-Attribut for eines <template>-Elements als String wider. Sie gehört zum Vorschlag Declarative Partial Updates (Streaming-Aktualisierung von Seitenteilen in beliebiger Reihenfolge). Der Wert ist der Name eines Processing-Instruction-Markers im Dokument (z. B. <?marker name="profil">). Diese Stelle wird vom Parser durch den Inhalt des Templates ersetzt.

So kann der Server zuerst das Grundgerüst einer Seite mit Platzhaltern ausliefern. Die teuren Teile wie Datenbankabfragen oder Empfehlungen schickt er später im selben HTML-Stream als <template for="…"> nach. JavaScript ist dafür nicht nötig: Der Browser setzt den Inhalt beim Parsen an der richtigen Stelle ein.

Weil der Attributname for in JavaScript ein reserviertes Wort ist, heißt die DOM-Eigenschaft wie bei HTMLLabelElement.htmlFor und HTMLOutputElement.htmlFor eben htmlFor. Lesen gibt den Attributwert zurück oder einen leeren String, wenn das Attribut fehlt. Schreiben setzt das Attribut.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des for-Attributs, also der Name bzw. die ID des Ziel-Markers. Ein leerer String, wenn das Attribut nicht gesetzt ist.

Beispiele

Attributwert lesen und ändern

const tpl = document.createElement('template');
console.log(JSON.stringify(tpl.htmlFor)); // noch kein Attribut

tpl.htmlFor = 'warenkorb';
console.log(tpl.htmlFor);
console.log(tpl.getAttribute('for'));

"" warenkorb warenkorb

Streaming-Platzhalter im HTML (serverseitig ausgeliefert)

// So könnte das vom Server gestreamte HTML aussehen:
const html = `
  <main>
    <h1>Dashboard</h1>
    <?marker name="statistik">
  </main>
  <!-- ... später im selben Stream ... -->
  <template for="statistik">
    <section>Umsatz heute: 1.234 €</section>
  </template>
`;

// Kontrolle im Browser: welche Templates warten auf welchen Marker?
document.querySelectorAll('template[for]').forEach((t) => {
  console.log(`Template ersetzt Marker: ${t.htmlFor}`);
});

Template ersetzt Marker: statistik

Unterstützung prüfen

const unterstuetzt = 'htmlFor' in HTMLTemplateElement.prototype;
console.log(unterstuetzt
  ? 'Declarative Partial Updates verfügbar'
  : 'Nicht verfügbar – Fallback mit JavaScript nötig');

Nicht verfügbar – Fallback mit JavaScript nötig

// Wichtig · Fallstricke

Experimentell: Die Funktion ist ein WICG-Vorschlag und bisher nicht standardisiert. Die Syntax der Processing Instructions (<?marker>, <?start>/<?end>) und die genaue Bedeutung können sich noch ändern. In Produktionscode nur mit Feature-Erkennung und Fallback verwenden.
Den Inhalt ersetzt der HTML-Parser. Wenn Sie htmlFor nachträglich per Skript setzen, wird dadurch nach heutigem Stand der Vorschlag nicht automatisch ersetzt.
Browser ohne Unterstützung behandeln das Template wie ein normales, inaktives <template>. Der Inhalt erscheint dann nicht, und der Platzhalter bleibt stehen.
Nicht verwechseln mit HTMLLabelElement.htmlFor: Dort verweist for auf die ID eines Formularelements, hier auf den Namen eines Markers.
Sicherheit: Der Inhalt, der eingesetzt wird, ist normales HTML aus dem Dokumentstrom. Daten von Nutzern müssen serverseitig maskiert werden wie jedes andere HTML, sonst droht XSS.

Siehe auch

HTMLTableCellElement.vAlign HTMLTemplateElement.content HTMLTemplateElement.shadowRootMode HTMLTemplateElement.shadowRootClonable HTMLTemplateElement.shadowRootDelegatesFocus