Template element (عنصر قالب)

عنصر داخلی <template> به عنوان محلی برای ذخیره‌ی قالب‌های نشانه‌گذاری HTML استفاده می‌شود. مرورگر محتوای آن را نادیده می‌گیرد Ùˆ تنها اعتبار نحوی آن را بررسی می‌کند، اما ما می‌توانیم با استفاده از JavaScript به آن دسترسی پیدا کنیم Ùˆ برای ساخت سایر عناصر از آن استفاده کنیم. در تئوری، می‌توانیم هر عنصر نامرئی دیگری را در HTML برای ذخیره‌ی کد HTML قرار دهیم. پس Ú†Ù‡ چیزی <template> را خاص می‌کند؟ اول از همه، محتوای آن می‌تواند هر HTML معتبری باشد، حتی اگر معمولاً نیاز به یک تگ محاط‌کننده داشته باشد. برای مثال، می‌توانیم یک ردیف جدول <tr>را داخل آن قرار دهیم:

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

معمولاً اگر سعی کنیم تگ <tr> را داخل مثلاً یک <div> قرار دهیم، مرورگر ساختار نامعتبر DOM را تشخیص می‌دهد Ùˆ آن را “اصلاح” می‌کند؛ یعنی به‌طور خودکار یک <table> به اطراف آن اضافه می‌کند. اما این چیزی نیست Ú©Ù‡ ما بخواهیم. در عوض، <template> دقیقاً همان چیزی را Ú©Ù‡ درونش قرار می‌دهیم، بدون تغییر Ù†Ú¯Ù‡ می‌دارد.

ما حتی می‌توانیم استایل‌ها Ùˆ اسکریپت‌ها را نیز داخل <template> قرار دهیم:

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

مرورگر محتوای درون <template> را «خارج از سند» در نظر می‌گیرد: استایل‌ها اعمال نمی‌شوند، اسکریپت‌ها اجرا نمی‌شوند، تگ <video autoplay> پخش نمی‌شود Ùˆ غیره.

وقتی این محتوا را وارد سند (document) کنیم، فعال می‌شود (استایل‌ها اعمال می‌شوند، اسکریپت‌ها اجرا می‌شوند و غیره).

وارد کردن template

محتوای یک template از طریق ویژگی content آن در دسترس است Ú©Ù‡ یک DocumentFragment محسوب می‌شود — نوع خاصی از گره DOM.

می‌توانیم با آن مانند هر گره‌ی دیگری از DOM رفتار کنیم، با یک تفاوت خاص: زمانی Ú©Ù‡ آن را در جایی قرار می‌دهیم، فقط فرزندانش وارد سند می‌شوند، نه خود DocumentFragment.

برای مثال:

<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>

بیایید یک مثال از Shadow DOM را از فصل قبلی با استفاده از <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>

در خط (*)ØŒ زمانی Ú©Ù‡ tmpl.content را Ú©Ù¾ÛŒ کرده Ùˆ درج می‌کنیم، از آنجایی Ú©Ù‡ یک DocumentFragment است، فرزندان آن (یعنی <style> Ùˆ <p>) به جای خودش درج می‌شوند.

این عناصر، Shadow DOM را تشکیل می‌دهند:

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

خلاصه

برای جمع‌بندی:

• محتوای <template> می‌تواند هر HTML با ساختار نحوی صحیح باشد.
• محتوای <template> به‌عنوان «خارج از سند» در نظر گرفته می‌شود، بنابراین روی چیزی تأثیر نمی‌گذارد.
• ما می‌توانیم از طریق JavaScript به template.content دسترسی پیدا کنیم Ùˆ با Ú©Ù¾ÛŒ کردن آن، در یک کامپوننت جدید استفاده‌اش کنیم.

تگ <template> ویژگی‌های منحصربه‌فردی دارد، زیرا:

• مرورگر ساختار نحوی HTML داخل آن را بررسی می‌کند (برخلاف استفاده از رشته قالب درون اسکریپت).
• …اما همچنان اجازه می‌دهد Ú©Ù‡ از هر تگ HTML در سطح بالا استفاده شود، حتی تگ‌هایی Ú©Ù‡ بدون تگ‌های محصورکننده منطقی نیستند (مثل <tr>).
• وقتی محتوا وارد سند شود، تعاملی می‌شود: اسکریپت‌ها اجرا می‌شوند، ویدیوهای <video autoplay> پخش می‌شوند Ùˆ غیره.

عنصر <template> به‌خودی‌خود هیچ مکانیزمی برای تکرار، اتصال داده‌ها (data binding) یا جایگزینی متغیرها ندارد، اما می‌توانیم این قابلیت‌ها را بر روی آن پیاده‌سازی کنیم.