Izdelava interoperabilnih spletnih komponent, ki delujejo celo z Reactom

Tisti med nami, ki smo spletni razvijalci že več kot nekaj let, smo verjetno pisali kodo z uporabo več kot enega ogrodja JavaScript. Z vsemi možnostmi – React, Svelte, Vue, Angular, Solid – je vse prej kot neizogibno. Ena izmed bolj frustrirajočih stvari, s katerimi se moramo soočiti pri delu v različnih ogrodjih, je ponovno ustvarjanje vseh tistih komponent uporabniškega vmesnika na nizki ravni: gumbov, zavihkov, spustnih menijev itd. Kar je še posebej frustrirajoče, je, da jih bomo običajno imeli definirane v enem ogrodju , recimo React, potem pa jih je treba prepisati, če želimo nekaj zgraditi v Svelte. Ali Vue. Ali Solid. In tako naprej.

Ali ne bi bilo bolje, če bi te komponente uporabniškega vmesnika na nizki ravni definirali enkrat, na način, ki ni odvisen od ogrodja, in jih nato ponovno uporabili med ogrodji? Seveda bi! In lahko; spletne komponente so pot. Ta objava vam bo pokazala, kako.

Zaenkrat zgodba SSR za spletne komponente nekoliko manjka. Deklarativni senčni DOM (DSD) je način, kako se spletna komponenta upodablja na strani strežnika, vendar od tega pisanja ni integrirana z vašimi najljubšimi aplikacijskimi okviri, kot so Next, Remix ali SvelteKit. Če je to za vas zahteva, ne pozabite preveriti najnovejšega stanja DSD. Če pa SSR ne uporabljate, berite naprej.

Najprej nekaj konteksta

Spletne komponente so v bistvu elementi HTML, ki jih definirate sami, npr <yummy-pizza> ali kar tako, od tal. Povsod jih pokriva tukaj na CSS-Tricks (vključno z obsežna serija Caleba Williamsa in eden od John Rhea), vendar se bomo na kratko sprehodili skozi postopek. V bistvu definirate razred JavaScript in ga podedujete HTMLElement, nato pa določite vse lastnosti, atribute in sloge, ki jih ima spletna komponenta, in seveda oznako, ki jo bo na koncu prikazala vašim uporabnikom.

Možnost definiranja elementov HTML po meri, ki niso vezani na nobeno določeno komponento, je vznemirljiva. Toda ta svoboda je tudi omejitev. Če obstajate neodvisno od katerega koli ogrodja JavaScript, pomeni, da s temi ogrodji JavaScript ne morete zares komunicirati. Pomislite na komponento React, ki pridobi nekaj podatkov in jih nato nekaj upodobi druga Komponenta React, ki posreduje podatke. To v resnici ne bi delovalo kot spletna komponenta, saj spletna komponenta ne ve, kako upodobiti komponento React.

Spletne komponente se še posebej odlikujejo komponente listov. Komponente listov so zadnja stvar, ki se upodobi v drevesu komponent. To so komponente, ki prejmejo nekaj rekvizitov in nekatere upodabljajo UI. To so ne komponente, ki sedijo na sredini drevesa komponent, posredujejo podatke, nastavljajo kontekst itd. – samo čisti kosi UI ki bo videti enako, ne glede na to, kateri okvir JavaScript poganja preostali del aplikacije.

Spletna komponenta, ki jo gradimo

Namesto da zgradimo nekaj dolgočasnega (in običajnega), kot je gumb, zgradimo nekaj malce drugačnega. V mojem zadnja objava preučili smo uporabo zamegljenih predogledov slik, da bi preprečili preoblikovanje vsebine in zagotovili spodoben uporabniški vmesnik za uporabnike med nalaganjem naših slik. Ogledali smo si base64, ki kodira zamegljene, poslabšane različice naših slik, in to prikazuje v našem uporabniškem vmesniku, medtem ko se nalaga prava slika. Preučili smo tudi ustvarjanje neverjetno kompaktnih, zamegljenih predogledov z orodjem, imenovanim Blurhash.

Ta objava vam je pokazala, kako ustvariti te predoglede in jih uporabiti v projektu React. Ta objava vam bo pokazala, kako uporabiti te predoglede iz spletne komponente, da jih lahko uporabijo kaj ogrodje JavaScript.

Toda preden lahko tečemo, moramo hoditi, zato se bomo najprej sprehodili skozi nekaj trivialnega in neumnega, da bomo natančno videli, kako delujejo spletne komponente.

Vse, kar je v tej objavi, bo zgradilo vanilla spletne komponente brez kakršnega koli orodja. To pomeni, da bo koda nekoliko šablonska, vendar bi ji moralo biti relativno enostavno slediti. Orodja kot Lit or Šablona so zasnovani za gradnjo spletnih komponent in jih je mogoče uporabiti za odstranitev večjega dela tega predloga. Vabim vas, da jih preverite! Toda za to objavo bi raje imel malo več šablon v zameno za to, da mi ne bi bilo treba uvajati in poučevati še ene odvisnosti.

Preprosta komponenta števca

Zgradimo klasični »Hello World« komponent JavaScript: števec. Upodobili bomo vrednost in gumb, ki poveča to vrednost. Preprosto in dolgočasno, vendar nam bo omogočilo, da si ogledamo najpreprostejšo možno spletno komponento.

Za izdelavo spletne komponente je prvi korak izdelava razreda JavaScript, ki deduje od HTMLElement:

class Counter extends HTMLElement {}

Zadnji korak je registracija spletne komponente, vendar le, če je še nismo registrirali:

if (!customElements.get("counter-wc")) { customElements.define("counter-wc", Counter);
}

In ga seveda upodobi:

<counter-wc></counter-wc>

In vse vmes je, da spletno komponento naredimo, kar želimo. Ena pogosta metoda življenjskega cikla je connectedCallback, ki se sproži, ko je naša spletna komponenta dodana v DOM. To metodo bi lahko uporabili za upodabljanje katerekoli vsebine, ki bi jo želeli. Ne pozabite, da je to dedovanje razreda JS HTMLElement, kar pomeni naše this vrednost je sam element spletne komponente z vsemi običajnimi metodami manipulacije DOM, ki jih že poznate in imate radi.

Najenostavneje bi lahko naredili tole:

class Counter extends HTMLElement { connectedCallback() { this.innerHTML = "<div style='color: green'>Hey</div>"; }
} if (!customElements.get("counter-wc")) { customElements.define("counter-wc", Counter);
}

... kar bo delovalo v redu.

Dodajanje prave vsebine

Dodajmo nekaj uporabnih, interaktivnih vsebin. Potrebujemo a <span> za shranjevanje trenutne vrednosti števila in a <button> za povečanje števca. Za zdaj bomo to vsebino ustvarili v našem konstruktorju in jo dodali, ko bo spletna komponenta dejansko v DOM:

constructor() { super(); const container = document.createElement('div'); this.valSpan = document.createElement('span'); const increment = document.createElement('button'); increment.innerText = 'Increment'; increment.addEventListener('click', () => { this.#value = this.#currentValue + 1; }); container.appendChild(this.valSpan); container.appendChild(document.createElement('br')); container.appendChild(increment); this.container = container;
} connectedCallback() { this.appendChild(this.container); this.update();
}

Če vas ročno ustvarjanje DOM resnično zmoti, ne pozabite, da lahko nastavite innerHTML, ali celo enkrat ustvarite element predloge kot statično lastnost vašega razreda spletne komponente, ga klonirajte in vstavite vsebino za nove primerke spletne komponente. Verjetno obstaja kakšna druga možnost, o kateri ne razmišljam, ali pa lahko vedno uporabite ogrodje spletne komponente, kot je Lit or Šablona. Toda za to objavo bomo še naprej preprosti.

Če nadaljujemo, potrebujemo nastavljivo lastnost razreda JavaScript named value

#currentValue = 0; set #value(val) { this.#currentValue = val; this.update();
}

To je samo standardna lastnost razreda z nastavilcem, skupaj z drugo lastnostjo, ki hrani vrednost. Ena zabavna poteza je, da za te vrednosti uporabljam sintakso lastnosti zasebnega razreda JavaScript. To pomeni, da se nihče zunaj naše spletne komponente ne more nikoli dotakniti teh vrednot. To je standardni JavaScript ki je podprt v vseh sodobnih brskalnikih, zato naj vas ne bo strah uporabiti.

Ali pa ga pokličite _value če vam je ljubše. In nenazadnje naš update metoda:

update() { this.valSpan.innerText = this.#currentValue;
}

Deluje!

Očitno to ni koda, ki bi jo želeli vzdrževati v velikem obsegu. Tukaj je polno delovni primer če si želite pobližje ogledati. Kot sem rekel, so orodja, kot sta Lit in Stencil, zasnovana tako, da to poenostavijo.

Dodajanje več funkcij

Ta objava ni globok potop v spletne komponente. Ne bomo pokrivali vseh API-jev in življenjskih ciklov; ne bomo niti pokrivali senčne korenine ali reže. O teh temah je neskončno veliko vsebin. Moj cilj tukaj je zagotoviti dovolj spodoben uvod, da vzbudi nekaj zanimanja, skupaj z nekaj uporabnimi smernicami o tem uporabo spletne komponente s priljubljenimi okviri JavaScript, ki jih že poznate in jih imate radi.

V ta namen nekoliko izboljšajmo našo spletno komponento števca. Sprejmimo a color atribut za nadzor barve prikazane vrednosti. In naj ga tudi sprejmemo increment lastnosti, tako da jo lahko uporabniki te spletne komponente povečajo za 2, 3, 4 naenkrat. In za spodbujanje teh sprememb stanja uporabimo naš novi števec v peskovniku Svelte – čez nekaj časa bomo prišli do Reacta.

Začeli bomo z isto spletno komponento kot prej in dodali barvni atribut. Če želite našo spletno komponento konfigurirati za sprejemanje in odzivanje na atribut, dodamo statiko observedAttributes lastnost, ki vrne atribute, ki jih posluša naša spletna komponenta.

static observedAttributes = ["color"];

Ko je to na mestu, lahko dodamo a attributeChangedCallback metoda življenjskega cikla, ki se bo zagnala vsakič, ko bo kateri od atributov, navedenih v observedAttributes so nastavljeni ali posodobljeni.

attributeChangedCallback(name, oldValue, newValue) { if (name === "color") { this.update(); }
}

Zdaj posodabljamo naše update način za dejansko uporabo:

update() { this.valSpan.innerText = this._currentValue; this.valSpan.style.color = this.getAttribute("color") || "black";
}

Nazadnje dodajmo našo increment lastnost:

increment = 1;

Preprosto in skromno.

Uporaba komponente števca v Svelte

Uporabimo, kar smo pravkar naredili. Šli bomo v našo komponento aplikacije Svelte in dodali nekaj takega:

<script> let color = "red";
</script> <style> main { text-align: center; }
</style> <main> <select bind:value={color}> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <counter-wc color={color}></counter-wc>
</main>

In deluje! Naš števec upodablja, poveča in spustni meni posodobi barvo. Kot lahko vidite, upodobimo barvni atribut v naši predlogi Svelte in ko se vrednost spremeni, Svelte poskrbi za klicanje setAttribute na našem osnovnem primerku spletne komponente. Tu ni nič posebnega: to je isto, kar že počne za atribute kaj element HTML.

Stvari postanejo nekoliko zanimive z increment prop. To je ne atribut na naši spletni komponenti; je podpora za razred spletne komponente. To pomeni, da ga je treba nastaviti na primerku spletne komponente. Potrpite z menoj, saj bodo stvari čez nekaj časa veliko preprostejše.

Najprej bomo naši komponenti Svelte dodali nekaj spremenljivk:

let increment = 1;
let wcInstance;

Naša močna komponenta števca vam bo omogočila povečanje za 1 ali 2:

<button on:click={() => increment = 1}>Increment 1</button>
<button on:click={() => increment = 2}>Increment 2</button>

Vendar, v teoriji, moramo dobiti dejanski primerek naše spletne komponente. To je ista stvar, ki jo naredimo vedno, ko dodamo a ref z Reactom. S Svelte je preprosto bind:this direktive:

<counter-wc bind:this={wcInstance} color={color}></counter-wc>

Zdaj v naši predlogi Svelte poslušamo spremembe spremenljivke inkrementa naše komponente in nastavimo osnovno lastnost spletne komponente.

$: { if (wcInstance) { wcInstance.increment = increment; }
}

Lahko ga preizkusite na tej predstavitvi v živo.

Očitno tega ne želimo narediti za vsako spletno komponento ali rekvizit, ki ga moramo upravljati. Ali ne bi bilo lepo, če bi lahko samo nastavili increment prav na naši spletni komponenti, v označevanju, kot običajno počnemo za komponente komponente, in jo imamo, veste, samo dela? Z drugimi besedami, lepo bi bilo, če bi lahko izbrisali vse uporabe wcInstance in namesto tega uporabite to preprostejšo kodo:

<counter-wc increment={increment} color={color}></counter-wc>

Izkazalo se je, da lahko. Ta koda deluje; Svelte opravi vse to delo namesto nas. Preverite v tej predstavitvi. To je standardno vedenje za skoraj vsa ogrodja JavaScript.

Zakaj sem vam torej pokazal ročni način nastavitve podpore spletne komponente? Dva razloga: koristno je razumeti, kako te stvari delujejo, in pred trenutkom sem rekel, da to deluje za "skoraj" vsa ogrodja JavaScript. Toda obstaja en okvir, ki noro ne podpira nastavitve prop spletne komponente, kot smo pravkar videli.

React je drugačna zver

Reagiraj. Najbolj priljubljeno ogrodje JavaScript na planetu ne podpira osnovnega delovanja s spletnimi komponentami. To je dobro znana težava, ki je edinstvena za React. Zanimivo je, da je to dejansko popravljeno v Reactovi eksperimentalni veji, vendar iz nekega razloga ni bilo združeno z različico 18. Kljub temu lahko še vedno spremljajte njegov napredek. In to lahko poskusite sami z a živo demo.

Rešitev je seveda uporaba a ref, zgrabite primerek spletne komponente in ročno nastavite increment ko se ta vrednost spremeni. Videti je takole:

import React, { useState, useRef, useEffect } from 'react';
import './counter-wc'; export default function App() { const [increment, setIncrement] = useState(1); const [color, setColor] = useState('red'); const wcRef = useRef(null); useEffect(() => { wcRef.current.increment = increment; }, [increment]); return ( <div> <div className="increment-container"> <button onClick={() => setIncrement(1)}>Increment by 1</button> <button onClick={() => setIncrement(2)}>Increment by 2</button> </div> <select value={color} onChange={(e) => setColor(e.target.value)}> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <counter-wc ref={wcRef} increment={increment} color={color}></counter-wc> </div> );
}

Kot smo razpravljali, tega ročnega kodiranja za vsako lastnost spletne komponente preprosto ni mogoče razširiti. Vendar še ni vse izgubljeno, saj imamo nekaj možnosti.

1. možnost: povsod uporabite atribute

Imamo atribute. Če ste zgoraj kliknili predstavitev React, increment prop ni deloval, vendar se je barva pravilno spremenila. Ali ne moremo vsega kodirati z atributi? Žal ne. Vrednosti atributov so lahko samo nizi. Tukaj je to dovolj dobro in s tem pristopom bi lahko prišli nekoliko daleč. Številke kot increment se lahko pretvori v in iz nizov. JSON bi lahko celo stringificirali/razčlenili objekte. Toda sčasoma bomo morali prenesti funkcijo v spletno komponento in takrat ne bomo imeli več možnosti.

2. možnost: zavijte

Obstaja star pregovor, da lahko rešite katero koli težavo v računalništvu z dodajanjem ravni posrednosti (razen težave s preveč stopnjami posrednosti). Koda za nastavitev teh rekvizitov je precej predvidljiva in preprosta. Kaj če ga skrijemo v knjižnico? Pametni ljudje za Lit imeti eno rešitev. Ta knjižnica za vas ustvari novo komponento React, potem ko ji dodelite spletno komponento in navedete lastnosti, ki jih potrebuje. Čeprav je pameten, nisem pristaš tega pristopa.

Namesto preslikave spletnih komponent ena proti ena v ročno ustvarjene komponente React imam raje samo ena Komponenta React, ki jo posredujemo naši spletni komponenti ime oznake do (counter-wc v našem primeru) — skupaj z vsemi atributi in lastnostmi — in da ta komponenta upodablja našo spletno komponento, dodajte ref, nato ugotovite, kaj je prop in kaj je atribut. To je po mojem mnenju idealna rešitev. Ne poznam knjižnice, ki bi to omogočala, vendar bi jo moralo biti preprosto ustvariti. Poskusimo!

To je Uporaba iščemo:

<WcWrapper wcTag="counter-wc" increment={increment} color={color} />

wcTag je ime oznake spletne komponente; ostalo so lastnosti in atributi, ki jih želimo posredovati.

Tako izgleda moja izvedba:

import React, { createElement, useRef, useLayoutEffect, memo } from 'react'; const _WcWrapper = (props) => { const { wcTag, children, ...restProps } = props; const wcRef = useRef(null); useLayoutEffect(() => { const wc = wcRef.current; for (const [key, value] of Object.entries(restProps)) { if (key in wc) { if (wc[key] !== value) { wc[key] = value; } } else { if (wc.getAttribute(key) !== value) { wc.setAttribute(key, value); } } } }); return createElement(wcTag, { ref: wcRef });
}; export const WcWrapper = memo(_WcWrapper);

Najbolj zanimiva vrstica je na koncu:

return createElement(wcTag, { ref: wcRef });

Tako ustvarimo element v Reactu z dinamičnim imenom. Pravzaprav je to tisto, v kar React običajno prevede JSX. Vsi naši divi so pretvorjeni v createElement("div") klice. Običajno nam tega API-ja ni treba poklicati neposredno, vendar je tam, ko ga potrebujemo.

Poleg tega želimo zagnati učinek postavitve in preleteti vsak rekvizit, ki smo ga posredovali naši komponenti. Pregledamo vse in preverimo, ali gre za lastnino z in check, ki preveri objekt primerka spletne komponente in njegovo prototipno verigo, ki bo ujela vse pridobivalnike/nastavljalce, ki se končajo s prototipom razreda. Če taka lastnost ne obstaja, se domneva, da je atribut. V obeh primerih jo nastavimo le, če se je vrednost dejansko spremenila.

Če se sprašujete, zakaj uporabljamo useLayoutEffect Namesto useEffect, ker želimo te posodobitve zagnati takoj, preden se naša vsebina upodobi. Upoštevajte tudi, da nimamo matrike odvisnosti useLayoutEffect; to pomeni, da želimo zagnati to posodobitev vsak render. To je lahko tvegano, saj se React nagiba k ponovnemu upodabljanju veliko. To izboljšam tako, da vso stvar zavijem React.memo. To je v bistvu sodobna različica React.PureComponent, kar pomeni, da bo komponenta ponovno upodobljena le, če se je kateri koli njen dejanski rekvizit spremenil – in preveri, ali se je to zgodilo s preprostim preverjanjem enakosti.

Edino tveganje pri tem je, da če posredujete objekt prop, ki ga mutirate neposredno brez ponovne dodelitve, ne boste videli posodobitev. Toda to je zelo odsvetovano, zlasti v skupnosti React, zato me to ne bi skrbelo.

Preden grem naprej, bi rad opozoril še na eno stvar. Morda ne boste zadovoljni s tem, kako izgleda uporaba. Ponovno se ta komponenta uporablja takole:

<WcWrapper wcTag="counter-wc" increment={increment} color={color} />

Natančneje, morda vam ne bo všeč posredovanje imena oznake spletne komponente v <WcWrapper> komponento in namesto tega raje @lit-labs/react zgornji paket, ki ustvari novo posamezno komponento React za vsako spletno komponento. To je povsem pošteno in spodbujam vas, da uporabite tisto, kar vam najbolj ustreza. Toda zame je ena prednost tega pristopa ta, da je enostavno odstrani. Če po nekem čudežu React združi pravilno ravnanje s spletnimi komponentami iz njihove eksperimentalne veje v main jutri bi lahko spremenili zgornjo kodo iz tega:

<WcWrapper wcTag="counter-wc" increment={increment} color={color} />

…za to:

<counter-wc ref={wcRef} increment={increment} color={color} />

Verjetno bi lahko celo napisali en sam codemod, da bi to naredili povsod, in nato izbrisali <WcWrapper> skupaj. Pravzaprav ne pozabite na to: globalno iskanje in zamenjava z RegEx bi verjetno delovala.

Izvajanje

Vem, zdi se, da je bilo treba potovati, da sem prišel. Če se spomnite, je bil naš prvotni cilj vzeti kodo za predogled slike, ki smo si jo ogledali v mojem zadnja objavain ga premaknite v spletno komponento, tako da ga je mogoče uporabiti v katerem koli ogrodju JavaScript. Reactovo pomanjkanje ustreznega medsebojnega delovanja je mešanici dodalo veliko podrobnosti. Toda zdaj, ko imamo dostojno znanje o tem, kako ustvariti spletno komponento in jo uporabljati, bo izvedba skorajda antiklimaktična.

Tukaj bom izpustil celotno spletno komponento in izpostavil nekaj zanimivih delov. Če ga želite videti v akciji, je tukaj a delujoč demo. Preklopil bo med mojimi tremi najljubšimi knjigami o mojih treh najljubših programskih jezikih. URL za vsako knjigo bo vsakič edinstven, tako da si lahko ogledate predogled, čeprav boste verjetno želeli zadušiti stvari na zavihku Omrežje DevTools, da boste resnično videli, kako se stvari dogajajo.

class BookCover extends HTMLElement { static observedAttributes = ['url']; attributeChangedCallback(name, oldValue, newValue) { if (name === 'url') { this.createMainImage(newValue); } } set preview(val) { this.previewEl = this.createPreview(val); this.render(); } createPreview(val) { if (typeof val === 'string') { return base64Preview(val); } else { return blurHashPreview(val); } } createMainImage(url) { this.loaded = false; const img = document.createElement('img'); img.alt = 'Book cover'; img.addEventListener('load', () => { if (img === this.imageEl) { this.loaded = true; this.render(); } }); img.src = url; this.imageEl = img; } connectedCallback() { this.render(); } render() { const elementMaybe = this.loaded ? this.imageEl : this.previewEl; syncSingleChild(this, elementMaybe); }
}

Najprej registriramo atribut, ki nas zanima, in se odzovemo, ko se spremeni:

static observedAttributes = ['url']; attributeChangedCallback(name, oldValue, newValue) { if (name === 'url') { this.createMainImage(newValue); }
}

To povzroči, da se ustvari naša slikovna komponenta, ki bo prikazana samo, ko je naložena:

createMainImage(url) { this.loaded = false; const img = document.createElement('img'); img.alt = 'Book cover'; img.addEventListener('load', () => { if (img === this.imageEl) { this.loaded = true; this.render(); } }); img.src = url; this.imageEl = img;
}

Nato imamo našo lastnost predogleda, ki je lahko naš niz predogleda base64 ali naš blurhash paket:

set preview(val) { this.previewEl = this.createPreview(val); this.render();
} createPreview(val) { if (typeof val === 'string') { return base64Preview(val); } else { return blurHashPreview(val); }
}

To se nanaša na katero koli pomožno funkcijo, ki jo potrebujemo:

function base64Preview(val) { const img = document.createElement('img'); img.src = val; return img;
} function blurHashPreview(preview) { const canvasEl = document.createElement('canvas'); const { w: width, h: height } = preview; canvasEl.width = width; canvasEl.height = height; const pixels = decode(preview.blurhash, width, height); const ctx = canvasEl.getContext('2d'); const imageData = ctx.createImageData(width, height); imageData.data.set(pixels); ctx.putImageData(imageData, 0, 0); return canvasEl;
}

In nenazadnje naš render metoda:

connectedCallback() { this.render();
} render() { const elementMaybe = this.loaded ? this.imageEl : this.previewEl; syncSingleChild(this, elementMaybe);
}

In nekaj pomožnih metod za povezovanje vsega skupaj:

export function syncSingleChild(container, child) { const currentChild = container.firstElementChild; if (currentChild !== child) { clearContainer(container); if (child) { container.appendChild(child); } }
} export function clearContainer(el) { let child; while ((child = el.firstElementChild)) { el.removeChild(child); }
}

Gre za nekoliko več kotlovnice, kot bi jo potrebovali, če bi to zgradili v ogrodju, a dobra stran je, da lahko to ponovno uporabimo v katerem koli ogrodju, ki ga želimo – čeprav bo React za zdaj potreboval ovoj, kot smo razpravljali .

Kvote in konci

Omenil sem že Litov React ovoj. Če pa ugotovite, da uporabljate Stencil, dejansko podpira a ločen izhodni cevovod samo za React. In tudi dobri ljudje pri Microsoftu ustvaril nekaj podobnega Litovemu ovoju, priložen knjižnici komponent Fast Web.

Kot sem že omenil, bodo vsa ogrodja brez imena React urejala nastavitev lastnosti spletne komponente namesto vas. Upoštevajte le, da imajo nekateri posebne okuse sintakse. Na primer, s Solid.js, <your-wc value={12}> vedno predvideva, da value je lastnost, ki jo lahko preglasite z attr predpona, kot <your-wc attr:value={12}>.

Zavijanje

Spletne komponente so zanimiv, pogosto premalo uporabljen del krajine spletnega razvoja. Pomagajo lahko zmanjšati vašo odvisnost od katerega koli posameznega ogrodja JavaScript z upravljanjem vašega uporabniškega vmesnika ali komponent »listov«. Medtem ko ustvarjanje teh kot spletnih komponent – ​​v nasprotju s komponentami Svelte ali React – ne bo tako ergonomsko, je dobra stran ta, da jih bo mogoče ponovno uporabiti na široko.

Izdelava interoperabilnih spletnih komponent, ki delujejo celo z Reactom prvotno objavljeno na CSS-triki. Moral bi prejemanje glasila.