HTML / Web Components үндэс

Web Components үндэс

Web Components бол браузерт суурилсан технологи бөгөөд дахин ашиглах боломжтой захиалгат HTML элемент үүсгэх боломж олгодог. Ямар нэг framework шаардахгүй — цэвэр JavaScript, HTML, CSS-ээр л хийнэ.

Web Components гурван үндсэн технологиос бүрдэнэ:

Custom Elements — өөрийн <my-card> гэх мэт шинэ HTML tag үүсгэнэ.

Shadow DOM — компонентын дотоод DOM-г гаднаас тусгаарлана. Стиль "нэвчихгүй".

HTML Template — <template> ба <slot> — шаблон бэлтгэх механизм.

Custom Element үүсгэх

Custom element үүсгэхийн тулд HTMLElement-г өргөтгөсөн JavaScript класс бичнэ.

html

<!-- index.html -->
<hello-world name="Болд"></hello-world>

<script>
  class HelloWorld extends HTMLElement {
    // Элемент DOM-д нэмэгдэхэд дуудагдана
    connectedCallback() {
      const name = this.getAttribute('name') || 'дэлхий';
      this.innerHTML = `<p>Сайн уу, ${name}!</p>`;
    }
  }

  // Браузерт шинэ tag бүртгэнэ — нэр дор заавал зураас (-) агуулна
  customElements.define('hello-world', HelloWorld);
</script>

Хөтчид <hello-world name="Болд"> бичихэд <p>Сайн уу, Болд!</p> болж харагдана.

Shadow DOM — тусгаарлалт

Shadow DOM нь компонентын дотоод DOM-г гаднаас нуудаг. Тус компонентын CSS нь хуудасны бусад элементэд нөлөөлөхгүй, мөн гаднаас ч нөлөөлөгдөхгүй.

html

<color-badge color="green" label="Амжилт"></color-badge>

<script>
  class ColorBadge extends HTMLElement {
    connectedCallback() {
      // Shadow root үүсгэнэ — 'open' бол JS-ээс хандаж болно
      const shadow = this.attachShadow({ mode: 'open' });

      const color = this.getAttribute('color') || 'gray';
      const label = this.getAttribute('label') || '';

      // Shadow DOM дотор стиль бичнэ — гадагшаа "нэвчихгүй"
      shadow.innerHTML = `
        <style>
          span {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 9999px;
            background: ${color};
            color: white;
            font-size: 14px;
          }
        </style>
        <span>${label}</span>
      `;
    }
  }

  customElements.define('color-badge', ColorBadge);
</script>

template ба slot ашиглах

<template> нь браузер задлан шинжилдэг боловч дэлгэцэнд харуулдаггүй шаблон юм. <slot> нь компонент ашиглагч нь агуулга дамжуулах "нүх" юм.

html

<!-- Шаблон — хуудсанд харагдахгүй -->
<template id="card-template">
  <style>
    .card {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 16px;
      margin: 8px;
    }
    h2 { margin: 0 0 8px; }
  </style>
  <div class="card">
    <!-- slot: ашиглагчаас ирэх агуулга орно -->
    <h2><slot name="title">Гарчиггүй</slot></h2>
    <p><slot name="body">Агуулга байхгүй</slot></p>
  </div>
</template>

<!-- Компонент ашиглах -->
<info-card>
  <span slot="title">HTML курс</span>
  <span slot="body">Вэбийн бүтцийг сурна.</span>
</info-card>

<script>
  class InfoCard extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({ mode: 'open' });
      // Шаблоныг хуулбарлан shadow DOM-д нэмнэ
      const template = document.getElementById('card-template');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }

  customElements.define('info-card', InfoCard);
</script>

Lifecycle callback-ууд

Custom element-д дөрвөн тусгай callback байдаг:

javascript

class MyElement extends HTMLElement {
  // DOM-д нэмэгдэхэд
  connectedCallback() {
    console.log('Элемент нэмэгдлэн');
  }

  // DOM-оос хасагдахад
  disconnectedCallback() {
    console.log('Элемент хасагдлан');
  }

  // Attribute өөрчлөгдөхөд — observedAttributes жагсаалтад байгаа attribute-д л дуудагдана
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`${name}: ${oldValue} → ${newValue}`);
  }

  // Аль attribute-г ажиглах
  static get observedAttributes() {
    return ['color', 'label'];
  }
}

Web Components хэзээ ашиглах вэ?

Web Components нь React, Vue гэх мэт framework-гүйгээр дахин ашиглагдах UI блок хийхэд тохиромжтой. Гэхдээ өнөөдөр ихэнх томоохон төсөл framework ашигладаг тул Web Components-г голдуу дизайн систем, widget, эсвэл framework-аас хамааралгүй компонент хийхэд ашигладаг.

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

HTML-ийн гүйцэтгэлийн оновчлолыг судална — script defer/async, preload, prefetch, lazy loading зэрэг хуудасны ачаалах хурдад нөлөөлдөг аргуудыг үзнэ.

← Өмнөх хичээлtemplate ба slot element Дараах хичээл →HTML гүйцэтгэлийн оновчлол