Prvek šablony

Vestavěný <template> element slouží jako úložiště pro šablony značek HTML. Prohlížeč ignoruje jeho obsah, pouze kontroluje platnost syntaxe, ale můžeme k němu přistupovat a používat jej v JavaScriptu k vytváření dalších prvků.

Teoreticky bychom mohli vytvořit jakýkoli neviditelný prvek někde v HTML pro účely ukládání značek HTML. Co je zvláštního na <template> ?

Za prvé, jeho obsahem může být jakýkoli platný kód HTML, i když obvykle vyžaduje náležitou uzavírací značku.

Můžeme tam dát například řádek tabulky <tr> :

<template>
  <tr>
    <td>Contents</td>
  </tr>
</template>

Obvykle, když se pokusíme vložit <tr> uvnitř, řekněme, <div> , prohlížeč detekuje neplatnou strukturu DOM a „opraví“ ji, přidá <table> kolem. To není to, co chceme. Na druhou stranu <template> uchovává přesně to, co tam umístíme.

Styly a skripty můžeme vložit do <template> také:

<template>
  <style>
    p { font-weight: bold; }
  </style>
  <script>
    alert("Hello");
  </script>
</template>

Prohlížeč bere v úvahu <template> obsah „mimo dokument“:styly nejsou použity, skripty se nespouštějí, <video autoplay> není spuštěn atd.

Obsah se stane živým (použijí se styly, spustí se skripty atd.), když jej vložíme do dokumentu.

Vkládání šablony

Obsah šablony je dostupný v content vlastnost jako DocumentFragment – ​​speciální typ uzlu DOM.

Můžeme s ním zacházet jako s jakýmkoli jiným uzlem DOM, kromě jedné speciální vlastnosti:když ho někam vložíme, místo toho se vloží jeho potomci.

Například:

<template id="tmpl">
  <script>
    alert("Hello");
  </script>
  <div class="message">Hello, world!</div>
</template>

<script>
  let elem = document.createElement('div');

  // Clone the template content to reuse it multiple times
  elem.append(tmpl.content.cloneNode(true));

  document.body.append(elem);
  // Now the script from <template> runs
</script>

Přepišme příklad Shadow DOM z předchozí kapitoly pomocí <template> :

<template id="tmpl">
  <style> p { font-weight: bold; } </style>
  <p id="message"></p>
</template>

<div id="elem">Click me</div>

<script>
  elem.onclick = function() {
    elem.attachShadow({mode: 'open'});

    elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*)

    elem.shadowRoot.getElementById('message').innerHTML = "Hello from the shadows!";
  };
</script>

Na řádku (*) když klonujeme a vložíme tmpl.content , jako jeho DocumentFragment , jeho potomci (<style> , <p> ) jsou vloženy místo toho.

Tvoří stínový DOM:

<div id="elem">
  #shadow-root
    <style> p { font-weight: bold; } </style>
    <p id="message"></p>
</div>

Shrnutí

Abych to shrnul:

  • <template> obsah může být jakýkoli syntakticky správný kód HTML.
  • <template> obsah je považován za „mimo dokument“, takže na nic nemá vliv.
  • Máme přístup k template.content z JavaScriptu, naklonujte jej pro opětovné použití v nové komponentě.

<template> tag je zcela unikátní, protože:

  • Prohlížeč kontroluje syntaxi HTML uvnitř (na rozdíl od použití řetězce šablony ve skriptu).
  • …Ale stále umožňuje použití jakýchkoli značek HTML nejvyšší úrovně, dokonce i těch, které nedávají smysl bez správných obalů (např. <tr> ).
  • Obsah se stává interaktivním:běží skripty, <video autoplay> přehraje atd. při vložení do dokumentu.

<template> prvek neobsahuje žádné iterační mechanismy, datové vazby nebo substituce proměnných, ale můžeme je implementovat nad něj.