HTML Web Components Custom Elements Shadow DOM

Ringkasan

Web Components memungkinkan elemen HTML custom dengan enkapsulasi style via Shadow DOM — tanpa framework.

Konsep Dasar

• Custom Elements: <my-card> didaftarkan via customElements.define.
• Shadow DOM: membungkus DOM & style agar tidak bocor ke luar.
• Template: <template>/cloneNode untuk markup reusable.
• Slots: <slot> untuk menyisipkan konten dari luar.

Cara Kerja / Struktur

js

class MyCard extends HTMLElement {
  connectedCallback(){
    const root = this.attachShadow({mode:'open'});
    root.innerHTML =