Web Components είναι ένα σύνολο εγγενών API προγράμματος περιήγησης για τη δημιουργία επαναχρησιμοποιήσιμων, ενθυλακωμένων προσαρμοσμένων στοιχείων HTML — framework-agnostic και βασισμένα σε πρότυπα. Τρεις τεχνολογίες συνδυάζονται:
Web Components είναι ένα σύνολο εγγενών API προγράμματος περιήγησης για τη δημιουργία επαναχρησιμοποιήσιμων, ενθυλακωμένων προσαρμοσμένων στοιχείων HTML — framework-agnostic και βασισμένα σε πρότυπα. Τρεις τεχνολογίες συνδυάζονται:
<template>, <slot>) — αδρανές, επαναχρησιμοποιήσιμο markup.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 είναι scoped — το CSS της σελίδας δεν μπορεί να εισέλθει, και το CSS του συστατικού δεν μπορεί να διαρρεύσει. Αυτό επιλύει το πρόβλημα του global CSS εγγενώς:
/* 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 σας επιτρέπουν να δημιουργήσετε επαναχρησιμοποιήσιμα widgets που λειτουργούν σε οποιοδήποτε framework (ή σε κανένα) με πραγματική ενθυλάκωση στυλ/DOM — ιδανικά για design systems και micro-frontends που μοιράζονται σε ομάδες που χρησιμοποιούν διαφορετικά stacks.
Έτσι βιβλιοθήκες όπως το Shoelace παραδίδουν framework-agnostic συστατικά.
Οι αντιστάθμιες (verbose API, πολυπλοκότητα SSR/styling) σημαίνουν ότι οι προγραμματιστές εφαρμογών συχνά εξακολουθούν να προτιμούν React/Vue, αλλά το platform primitive είναι ισχυρό και βασισμένο σε πρότυπα.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά