HTML / template ба slot element

template ба slot element

Вэб хуудасны агуулга ихэнх тохиолдолд динамик байдаг — жагсаалтын зүйлс, картын дараалал, мессежийн жагсаалт зэргийг JavaScript-ээр үүсгэж дэлгэцэнд харуулдаг. <template> элемент нь энэ ажлыг цэвэр, хурдан хийх боломж олгодог.

<template> элемент гэж юу вэ?

<template> нь хуудас ачаалагдах үед дэлгэцэнд харагдахгүй боловч JavaScript-ээр хуулж ашиглах боломжтой HTML хэлбэрчлэлийг агуулдаг.

html
<!-- template нь дэлгэцэнд харагдахгүй -->
<template id="бүтээгдэхүүн-загвар">
  <div class="карт">
    <img class="зураг" src="" alt="" />
    <h3 class="нэр"></h3>
    <p class="үнэ"></p>
    <button class="сагс-товч">Сагсанд нэмэх</button>
  </div>
</template>

<!-- Карт энд гарна -->
<div id="бүтээгдэхүүн-жагсаалт"></div>

<template> доторх HTML нь:

  • Дэлгэцэнд харагдахгүй
  • Браузерийн зурах (render) процест оролцохгүй
  • Script болон style нь гүйцэтгэгдэхгүй
  • Хуулж ашиглахад бэлэн загвар болно

JavaScript-ээр клонлох

javascript
const загвар = document.getElementById("бүтээгдэхүүн-загвар");
const жагсаалт = document.getElementById("бүтээгдэхүүн-жагсаалт");

// Бүтээгдэхүүний өгөгдөл
const бүтээгдэхүүнүүд = [
  { нэр: "Цүнх", үнэ: "45,000 ₮", зураг: "цүнх.jpg" },
  { нэр: "Малгай", үнэ: "12,000 ₮", зураг: "малгай.jpg" },
  { нэр: "Гутал", үнэ: "78,000 ₮", зураг: "гутал.jpg" },
];

бүтээгдэхүүнүүд.forEach((бүтээгдэхүүн) => {
  // content.cloneNode(true) — template-ийн агуулгыг хуулна
  const клон = загвар.content.cloneNode(true);

  // Клоны дотор элементүүдийг олж утга оруулна
  клон.querySelector(".зураг").src = бүтээгдэхүүн.зураг;
  клон.querySelector(".зураг").alt = бүтээгдэхүүн.нэр;
  клон.querySelector(".нэр").textContent = бүтээгдэхүүн.нэр;
  клон.querySelector(".үнэ").textContent = бүтээгдэхүүн.үнэ;

  // Дэлгэцэнд нэмнэ
  жагсаалт.appendChild(клон);
});

cloneNode(true) нь true параметртэй бол бүх дотоод элементийг хамт хуулна — false бол зөвхөн гаднах элементийг хуулна.

template vs innerHTML

Template ашиглахгүйгээр innerHTML ашигласан бол:

javascript
// innerHTML — string-ийн нэгтгэл, XSS аюул, удаан
бүтээгдэхүүнүүд.forEach((б) => {
  жагсаалт.innerHTML += `
    <div class="карт">
      <h3>${б.нэр}</h3>
      <p>${б.үнэ}</p>
    </div>
  `;
});

<template> ашиглах нь дараах давуу талтай:

  • Аюулгүй — XSS халдлагад өртөхгүй, учир нь утга string биш DOM property-р оруулна
  • Хурдан — DOM-г шууд удирддаг, string parsing байхгүй
  • Цэвэр — HTML ба JavaScript тусдаа байна

Хоёр загвар хамт ашиглах жишээ

html
<!-- Мессежийн загвар -->
<template id="мессеж-загвар">
  <li class="мессеж">
    <span class="зохиогч"></span>
    <p class="текст"></p>
    <time class="цаг"></time>
  </li>
</template>

<!-- Алдааны мэдэгдлийн загвар -->
<template id="алдаа-загвар">
  <div class="алдаа-карт" role="alert">
    <strong class="алдаа-гарчиг"></strong>
    <p class="алдаа-тайлбар"></p>
  </div>
</template>

<ul id="мессеж-жагсаалт"></ul>
<div id="мэдэгдлүүд"></div>

<script>
  function мессеж нэмэх(зохиогч, текст) {
    const загвар = document.getElementById("мессеж-загвар");
    const клон = загвар.content.cloneNode(true);
    клон.querySelector(".зохиогч").textContent = зохиогч;
    клон.querySelector(".текст").textContent = текст;
    клон.querySelector(".цаг").textContent = new Date().toLocaleTimeString("mn-MN");
    document.getElementById("мессеж-жагсаалт").appendChild(клон);
  }

  мессеж нэмэх("Болд", "Сайн байна уу!");
  мессеж нэмэх("Дорж", "Сайн, та яаж байна?");
</script>

<slot> ба Shadow DOM — товч танилцуулга

<slot> нь Web Component технологийн нэг хэсэг бөгөөд Shadow DOM-тэй хамт ажилладаг. Shadow DOM нь HTML элементийн дотоод бүтцийг гаднаас тусгаарлах механизм юм.

javascript
// Энгийн custom element бүтээх
class МиниКарт extends HTMLElement {
  constructor() {
    super();
    // Shadow root үүсгэнэ
    const shadow = this.attachShadow({ mode: "open" });

    // Template-г Shadow DOM-д клонлоно
    const загвар = document.getElementById("карт-загвар");
    shadow.appendChild(загвар.content.cloneNode(true));
  }
}

customElements.define("мини-карт", МиниКарт);
html
<template id="карт-загвар">
  <style>
    /* Shadow DOM дотрын style гаднаас нөлөөлөхгүй */
    :host { display: block; border: 1px solid #1e293b; padding: 16px; }
  </style>
  <!-- slot нь гаднаас дамжуулсан HTML-г тавих газар -->
  <slot name="гарчиг"></slot>
  <slot></slot>
</template>

<!-- Custom element ашиглах -->
<мини-карт>
  <h3 slot="гарчиг">Бүтээгдэхүүний нэр</h3>
  <p>Тайлбар текст энд орно.</p>
</мини-карт>

<slot> болон Shadow DOM-г гүнзгийрүүлэн судлах нь дараагийн хичээлийн сэдэв — Web Components.

Дараагийн хичээлд:

Web Components технологийг судлана — Custom Element, Shadow DOM, Template-г нэгтгэн өөрийн HTML тагийг хэрхэн бүтээх талаар практикаар үзнэ.

← Өмнөх хичээлResponsive HTMLДараах хичээл →Web Components үндэс