Web Components adalah satu set API asli browser untuk membangun elemen HTML kustom yang dapat digunakan kembali dan dienkapsulasi — independen kerangka kerja dan berbasis standar. Tiga teknologi bergabung:
Web Components adalah satu set API asli browser untuk membangun elemen HTML kustom yang dapat digunakan kembali dan dienkapsulasi — independen kerangka kerja dan berbasis standar. Tiga teknologi bergabung:
<template>, <slot>) — penanda inert dan dapat digunakan kembali.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
Gaya di dalam shadow root adalah berscopus — CSS halaman tidak dapat menjangkau ke dalam, dan CSS komponen tidak dapat bocor ke luar. Ini menyelesaikan masalah CSS global secara alami:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components memungkinkan Anda membangun widget yang dapat digunakan kembali yang bekerja di kerangka kerja apa pun (atau tidak ada) dengan enkapsulasi gaya/DOM yang sebenarnya — ideal untuk sistem desain dan mikro-frontend yang dibagikan antar tim yang menggunakan tumpukan berbeda.
Ini adalah bagaimana perpustakaan seperti Shoelace mengirimkan komponen yang agnostik kerangka kerja.
Pertukaran (API verbose, kompleksitas SSR/styling) berarti pengembang aplikasi masih lebih suka React/Vue, tetapi primitif platform sangat kuat dan berbasis standar.