Web Components sunt un set de API-uri native ale browserului pentru construirea elementelor HTML personalizate, reutilizabile și încapsulate — independente de framework și bazate pe standarde. Trei tehnologii se combină:
Web Components sunt un set de API-uri native ale browserului pentru construirea elementelor HTML personalizate, reutilizabile și încapsulate — independente de framework și bazate pe standarde. Trei tehnologii se combină:
<template>, <slot>) — markup inert și reutilizabil.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>
Stilurile din interior rădăcinii umbrei sunt scoped — CSS-ul paginii nu poate intra înăuntru, iar CSS-ul componentei nu poate scăpa afară. Aceasta rezolvă nativ problema CSS-ului global:
/* 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 vă permit să construiți widgeturi reutilizabile care funcționează în orice framework (sau niciunul) cu adevărată încapsulare de stil/DOM — ideal pentru sisteme de design și micro-frontends partajate între echipe care utilizează stack-uri diferite.
Aceasta este modul în care biblioteci precum Shoelace livreaza componente independente de framework.
Compromisurile (API verbose, complexitate SSR/styling) înseamnă că dezvoltatorii de aplicații încă preferă adesea React/Vue, dar primitiva de platformă este puternică și bazată pe standarde.
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
Donează