Web Components არის ბრაუზერის მშობლიური API-ების ნაკრები, რომელიც განკუთვნილია თავის მიერ გამოგონილი, ხელმეორედ გამოსაყენებელი HTML ელემენტების შესაქმნელად — ჩარჩოს დამოუკიდებელი და სტანდარტზე დაფუძნებული. სამი ტექნოლოგია ერთდება:
Web Components არის ბრაუზერის მშობლიური API-ების ნაკრები, რომელიც განკუთვნილია თავის მიერ გამოგონილი, ხელმეორედ გამოსაყენებელი HTML ელემენტების შესაქმნელად — ჩარჩოს დამოუკიდებელი და სტანდარტზე დაფუძნებული. სამი ტექნოლოგია ერთდება:
<template>, <slot>) — უინერტი, ხელმეორედ გამოსაყენებელი მარკირება.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-ის შიგნით სტილები დამსაზღვრულია — გვერდის CSS არ შეიძლება შიგნით შედიოდეს, ხოლო კომპონენტის CSS გარედან არ შეიძლება ჟონდეს. ეს აჩრდილებს გლობალური 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 საშუალებას გიძლევთ შექმნათ ხელმეორედ გამოსაყენებელი ვიჯეტები, რომლებიც მუშაობენ ნებისმიერ ჩარჩოში (ან არცერთში) რეალური სტილის/DOM ინკაფსულაციით — იდეალურია დიზაინის სისტემებისა და მიკრო-ფრონტენდებისთვის, რომლებიც გაზიარებული აქვთ განსხვავებული სტეკების გამოყენებელი გუნდებით.
ასე აწვდის Shoelace-ის ხელმეორედ გამოსაყენებელი კომპონენტებს.
კომპრომისები (ვერბოზული API, SSR/სტილის სირთულე) ნიშნავს, რომ აპლიკაციის შემქმნელი ხშირად კვლავ ამჯობინებს React/Vue-ს, მაგრამ პლატფორმის პრიმიტივი ძლევამტკიცე და სტანდარტზე დაფუძნებულია.