Web Components, yeniden kullanılabilir ve kapsüllü özel HTML öğeleri oluşturmak için yerel tarayıcı API'lerinin bir setidir — çerçeve-agnostik ve standartlara dayalı. Üç teknoloji birleştirilir:
Web Components, yeniden kullanılabilir ve kapsüllü özel HTML öğeleri oluşturmak için yerel tarayıcı API'lerinin bir setidir — çerçeve-agnostik ve standartlara dayalı. Üç teknoloji birleştirilir:
<template>, <slot>) — atıl, yeniden kullanılabilir işaretleme.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>
Shadow root içindeki stiller kapsamlıdır — sayfanın CSS'si içeri giremez ve bileşenin CSS'si dışarı sızamaz. Bu, genel CSS sorununu yerel olarak çözer:
/* 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, gerçek stil/DOM kapsüllemesi ile herhangi bir çerçevede (veya hiçbirinde) çalışan yeniden kullanılabilir widget'lar oluşturmanızı sağlar — tasarım sistemleri ve farklı yığınlar kullanan ekipler arasında paylaşılan mikro-uçlar için ideal.
Bu, Shoelace gibi kitaplıkların çerçeve-agnostik bileşenleri nasıl sunduğunun yoludur.
Dengeler (ayrıntılı API, SSR/stil karmaşıklığı) uygulama geliştiricilerinin yine de genellikle React/Vue tercih etmesi anlamına gelir, ancak platform ilkeli güçlü ve standartlara dayalıdır.