Web Components yra natyvių naršyklės API rinkinys, skirtas kurti pakartotinai naudojamus, hermetintu saugius pasirinktinės HTML elementus — nepriklausomai nuo karkaso ir pagrįsti standartais. Trys technologijos sujungiamos:
Web Components yra natyvių naršyklės API rinkinys, skirtas kurti pakartotinai naudojamus, hermetintu saugius pasirinktinės HTML elementus — nepriklausomai nuo karkaso ir pagrįsti standartais. Trys technologijos sujungiamos:
<template>, <slot>) — inertingas, pakartotinai panaudojamas žymėjimas.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>
Šešėlio šaknies stiliai yra riboti — puslapio CSS negali pasiekti viduje, o komponento CSS negali pasiklysti. Tai natyviai sprendžia pasaulinės CSS problemą:
/* 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 leidžia kurti pakartotinai naudojamus valdiklius, kurie veikia bet kuriame karkase (arba be jo) su tikru stiliaus/DOM hermtinu saugumu — idealus dizaino sistemoms ir mikro-iš priekio sudalytoms šalims, dalinimasis tarp komandų, naudojančių skirtingus steikus.
Tai yra būdas, kaip tokios bibliotekos kaip Shoelace pateikia nuo karkaso nepriklausomus komponentus.
Kompromisai (žodinga API, SSR/stilizavimo sudėtingumas) reiškia, kad programų kūrėjai vis dar mieliau naudoja React/Vue, tačiau platformos primityvus yra galingas ir grindžiamas standartais.
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
Paaukoti