องค์ประกอบ template: เนื้อหาที่ไม่มีการทำงาน

องค์ประกอบ template คืออะไร

การใช้ template เบื้องต้น

<template id="card-template">
  <div class="card">
    <h2 class="card-title"></h2>
    <p class="card-body"></p>
    <a class="card-link">Learn more</a>
  </div>
</template>

<script>
const tmpl = document.getElementById('card-template');
console.log(tmpl.content); // DocumentFragment
console.log(tmpl.content.querySelector('.card')); // The div node
// Not rendered on the page yet
</script>

template.content

const template = document.querySelector('#card-template');
const fragment = template.content;

// fragment is a DocumentFragment — a lightweight DOM container
// It is not attached to the document
// Modifying fragment does NOT affect the original template
// You must clone it before using it

การโคลน template

const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true);  // true = deep clone

// Modify the clone:
clone.querySelector('.card-title').textContent = 'HTML5 Guide';
clone.querySelector('.card-body').textContent = 'Learn HTML5 from scratch.';
clone.querySelector('.card-link').href = '/html5';

// Add to the page:
document.getElementById('card-list').appendChild(clone);

การแสดงรายการจาก template

<ul id="users"></ul>

<template id="user-tmpl">
  <li class="user">
    <strong class="user-name"></strong>
    <span class="user-role"></span>
  </li>
</template>

<script>
const tmpl = document.getElementById('user-tmpl');
const list = document.getElementById('users');

const users = [
  { name: 'Alice', role: 'Admin' },
  { name: 'Bob', role: 'Editor' },
];

users.forEach(user => {
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.user-name').textContent = user.name;
  clone.querySelector('.user-role').textContent = user.role;
  list.appendChild(clone);
});
</script>

เหตุใดจึงใช้ template แทน innerHTML

// innerHTML approach (less safe):
container.innerHTML = `<div>${userProvidedContent}</div>`;
// Risk: XSS if userProvidedContent is not sanitized

// template approach (safer):
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.name').textContent = userProvidedContent;
// textContent sets text only — HTML tags are not parsed
// No XSS risk

template กับข้อมูลแบบซ้อนกัน

<template id="post-tmpl">
  <article>
    <header>
      <h2 class="title"></h2>
      <time class="date" datetime=""></time>
    </header>
    <p class="excerpt"></p>
    <a class="read-more">Read more</a>
  </article>
</template>

<script>
function renderPost(post) {
  const clone = document.getElementById('post-tmpl').content.cloneNode(true);
  clone.querySelector('.title').textContent = post.title;
  clone.querySelector('.date').textContent = post.date;
  clone.querySelector('.date').dateTime = post.isoDate;
  clone.querySelector('.excerpt').textContent = post.excerpt;
  clone.querySelector('.read-more').href = post.url;
  return clone;
}
</script>

template จะไม่แสดงผล

<template id="hidden-tmpl">
  <script>alert('This runs when cloned, not when defined');</script>
  <img src="wont-load-yet.jpg" alt="Won't load until cloned">
</template>
<!-- The script and image are NOT activated until you clone and append the template -->
<!-- This makes templates safe for defining content without side effects -->

template เทียบกับ script type=text/html

<!-- Old pattern (script hack): -->
<script type="text/html" id="old-tmpl">
  <div class="card">...</div>
</script>
<script>
const html = document.getElementById('old-tmpl').innerHTML;
container.innerHTML = html;  // XSS risk!
</script>

<!-- Modern template: -->
<template id="card-tmpl">...</template>
<!-- Safer, semantic, no XSS risk -->

template ในไลบรารีคอมโพเนนต์

class UserCard extends HTMLElement {
  connectedCallback() {
    const tmpl = document.getElementById('user-card-tmpl').content.cloneNode(true);
    tmpl.querySelector('.name').textContent = this.getAttribute('name');
    this.appendChild(tmpl);
  }
}

ตรวจสอบอย่างรวดเร็ว

ทบทวน: องค์ประกอบ template