Web Components janë një seri API-jesh vendase të shfletuesit për ndërtimin e elementeve të personalizuar HTML të ripërdorshëm dhe të kapsuluara — të pavarur nga korniza dhe të bazuar në standarde. Tre teknologjitë kombinohen:
Web Components janë një seri API-jesh vendase të shfletuesit për ndërtimin e elementeve të personalizuar HTML të ripërdorshëm dhe të kapsuluara — të pavarur nga korniza dhe të bazuar në standarde. Tre teknologjitë kombinohen:
<template>, <slot>) — shënimi inert dhe i ripërdorshëm.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>
Stilet brenda shadow root janë të fokusuara — CSS-ja e faqes nuk mund të hyjë brenda, dhe CSS-ja e komponentës nuk mund të rrjedhë jashtë. Kjo zgjidh problemin e CSS-se globale në mënyrë vendase:
/* 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 ju lejojnë të ndërtoni miniaturë të ripërdorshme që funksionojnë në cilëndo kornizë (ose asnjë) me kapsuluara të vërteta të stileve dhe DOM-it — ideale për sistemet e dizajnit dhe mikro-frontends të ndarë midis ekipeve duke përdorur grupe të ndryshme.
Ky është mënyra se si biblioteka si Shoelace dërgojnë komponentet e pavarura nga korniza.
Kompromisët (API verbale, kompleksiteti SSR/styling) nënkuptojnë që zhvilluesit e aplikacioneve ende preferojnë React/Vue, por primitiva e platformës është e fuqishme dhe e bazuar në standarde.
Një bibliotekë pyetjesh intervistash IT me përgjigje të detajuara — nga Junior te Senior.
Dhuro