Koostalitlusvõimeliste veebikomponentide loomine, mis isegi Reactiga töötavad

Need meist, kes oleme olnud veebiarendajad rohkem kui paar aastat, on tõenäoliselt kirjutanud koodi rohkem kui ühe JavaScripti raamistiku abil. Kõikide valikuvõimalustega – React, Svelte, Vue, Angular, Solid – on see kõik, kuid vältimatu. Üks masendavamaid asju, millega raamistike vahel töötades kokku puutume, on kõigi nende madala taseme kasutajaliidese komponentide uuesti loomine: nupud, vahelehed, rippmenüüd jne. Eriti masendav on see, et tavaliselt määratleme need ühes raamistikus. , öelge React, kuid siis tuleb need ümber kirjutada, kui tahame Sveltes midagi ehitada. Või Vue. Või Solid. Ja nii edasi.

Kas poleks parem, kui saaksime need madalatasemelised kasutajaliidese komponendid üks kord raamistikuagnostiliselt määratleda ja seejärel raamistike vahel uuesti kasutada? Muidugi oleks! Ja me saame; veebikomponendid on tee. See postitus näitab teile, kuidas.

Praeguse seisuga on veebikomponentide SSR-lugu veidi puudu. Deklaratiivne vari-DOM (DSD) on see, kuidas veebikomponent renderdatakse serveripoolselt, kuid selle kirjutamise seisuga pole see integreeritud teie lemmikrakenduste raamistikega, nagu Next, Remix või SvelteKit. Kui see on teie jaoks nõutav, kontrollige kindlasti DSD viimast olekut. Aga muidu, kui SSR ei ole midagi, mida te kasutate, lugege edasi.

Esiteks natuke konteksti

Veebikomponendid on sisuliselt HTML-i elemendid, mille määrate ise, näiteks <yummy-pizza> või mis iganes, maast madalast. Neid käsitletakse siin CSS-Tricksis (sh Caleb Williamsi ulatuslik seeria ja ühe autor John Rhea), kuid käsitleme seda protsessi lühidalt. Põhimõtteliselt määratlete JavaScripti klassi ja pärisite selle HTMLElementja seejärel määrake veebikomponendi atribuudid, atribuudid ja stiilid ning loomulikult ka märgistus, mille see lõpuks teie kasutajatele renderdab.

Võimalus määratleda kohandatud HTML-i elemente, mis pole ühegi konkreetse komponendiga seotud, on põnev. Kuid see vabadus on ka piirang. Mis tahes JavaScripti raamistikust sõltumatu olemasolu tähendab, et te ei saa nende JavaScripti raamistikega tegelikult suhelda. Mõelge komponendile React, mis hangib mõned andmed ja seejärel mõned renderdab muu Reageerimiskomponent, edastab andmeid. See veebikomponendina tegelikult ei töötaks, kuna veebikomponent ei tea, kuidas Reacti komponenti renderdada.

Veebikomponendid paistavad eriti silma lehtede komponendid. Lehtede komponendid on viimane asi, mis komponendipuus renderdatakse. Need on komponendid, mis saavad osa rekvisiite ja renderdavad osa UI. Need on mitte komponendid, mis istuvad teie komponendipuu keskel, edastavad andmeid, määravad konteksti jne – lihtsalt tükid UI mis näeb välja sama, olenemata sellest, milline JavaScripti raamistik ülejäänud rakendust toidab.

Veebikomponent, mida loome

Selle asemel, et ehitada midagi igavat (ja tavalist), näiteks nuppu, ehitagem midagi veidi teistsugust. Minu laadimise post kaalusime uduste piltide eelvaate kasutamist, et vältida sisu ümbervoolu ja pakkuda kasutajatele piltide laadimise ajal korralikku kasutajaliidest. Vaatasime base64, mis kodeeris meie piltide häguseid, halvenenud versioone ja näitas seda oma kasutajaliideses tegeliku pildi laadimise ajal. Vaatasime ka uskumatult kompaktsete, uduste eelvaadete loomist, kasutades tööriista nimega Blurhash.

See postitus näitas teile, kuidas neid eelvaateid luua ja neid Reacti projektis kasutada. See postitus näitab teile, kuidas neid veebikomponendi eelvaateid kasutada, et neid saaks kasutada mistahes JavaScripti raamistik.

Kuid me peame kõndima enne, kui saame joosta, nii et me käime kõigepealt läbi millegi tühise ja rumalat, et näha täpselt, kuidas veebikomponendid töötavad.

Kõik selles postituses koostab vaniljevõrgu komponente ilma tööriistadeta. See tähendab, et koodil on veidi ülevaatust, kuid seda peaks olema suhteliselt lihtne jälgida. Tööriistad nagu Lit or Trafarett on mõeldud veebikomponentide ehitamiseks ja neid saab kasutada suure osa sellest katlaplaadist eemaldamiseks. Kutsun teid üles neid kontrollima! Kuid selle postituse jaoks eelistan ma veidi rohkem plaati vastutasuks selle eest, et ei pea tutvustama ja õpetama teist sõltuvust.

Lihtne loenduri komponent

Ehitame klassikaline JavaScripti komponentide "Tere maailm": loendur. Renderdame väärtuse ja nupu, mis seda väärtust suurendab. Lihtne ja igav, kuid see võimaldab meil vaadata võimalikult lihtsat veebikomponenti.

Veebikomponendi koostamiseks tuleb esimese sammuna teha JavaScripti klass, mis pärib HTMLElement:

class Counter extends HTMLElement {}

Viimane samm on veebikomponendi registreerimine, kuid ainult siis, kui me pole seda veel registreerinud:

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

Ja loomulikult renderdage see:

<counter-wc></counter-wc>

Ja kõik vahepealne seisneb selles, et paneme veebikomponendi tegema seda, mida me tahame. Üks levinud elutsükli meetod on connectedCallback, mis käivitub, kui meie veebikomponent lisatakse DOM-i. Võiksime seda meetodit kasutada mis tahes soovitud sisu renderdamiseks. Pidage meeles, et see on JS-klass, mis pärineb HTMLElement, mis tähendab meie this väärtus on veebikomponendi element ise koos kõigi tavaliste DOM-i manipuleerimismeetoditega, mida te juba teate ja armastate.

Kõige lihtsamal juhul saame teha järgmist:

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

… mis töötab hästi.

Tõelise sisu lisamine

Lisame kasulikku interaktiivset sisu. Meil on vaja a <span> praeguse arvu väärtuse hoidmiseks ja a <button> loenduri suurendamiseks. Praegu loome selle sisu oma konstruktoris ja lisame selle siis, kui veebikomponent on tegelikult DOM-is:

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();
}

Kui olete DOM-i käsitsi loomisest väga kurnatud, pidage meeles, et saate seadistada innerHTMLvõi isegi looge mallielement üks kord oma veebikomponentide klassi staatilise atribuudina, kloonige see ja sisestage uute veebikomponentide eksemplaride sisu. Tõenäoliselt on mõned muud võimalused, millele ma ei mõtle, või võite alati kasutada veebikomponentide raamistikku, näiteks Lit or Trafarett. Kuid selle postituse puhul jätkame selle lihtsana.

Edasi liikudes vajame seadistatavat JavaScripti klassi atribuuti nimega value

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

See on lihtsalt standardklassi atribuut koos määrajaga koos teise atribuudiga väärtuse hoidmiseks. Üks lõbus pöördepunkt on see, et ma kasutan nende väärtuste jaoks privaatset JavaScripti klassi atribuutide süntaksit. See tähendab, et keegi väljaspool meie veebikomponenti ei saa kunagi neid väärtusi puudutada. See on standardne JavaScript mida toetavad kõik kaasaegsed brauserid, nii et ärge kartke seda kasutada.

Või helistage julgelt _value kui eelistad. Ja lõpuks meie update meetod:

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

See töötab!

Ilmselgelt pole see kood, mida soovite mastaapselt säilitada. Siin on täis töötav näide kui soovite lähemalt vaadata. Nagu ma ütlesin, on sellised tööriistad nagu Lit ja Stencil loodud selle lihtsamaks muutmiseks.

Lisan veel mõned funktsioonid

See postitus ei ole sügav sukeldumine veebikomponentidesse. Me ei kata kõiki API-sid ja elutsükleid; me isegi ei kata varjujuured või pilud. Nendel teemadel on lõputult sisu. Minu eesmärk on pakkuda piisavalt korralik sissejuhatus, et tekitada huvi, ja kasulikud juhised tegelikult kasutamine veebikomponendid populaarsete JavaScripti raamistikega, mida te juba teate ja armastate.

Selleks täiustame veidi oma loenduri veebikomponenti. Võtame selle vastu a color atribuut, et juhtida kuvatava väärtuse värvi. Ja laseme sellel ka nõustuda increment atribuut, nii et selle veebikomponendi tarbijad saavad seda korraga suurendada 2, 3, 4 võrra. Ja nende olekumuutuste juhtimiseks kasutame oma uut loendurit Svelte'i liivakastis – jõuame mõne aja pärast Reactini.

Alustame sama veebikomponendiga nagu varem ja lisame värviatribuudi. Meie veebikomponendi konfigureerimiseks atribuuti aktsepteerima ja sellele vastama lisame staatilise atribuudi observedAttributes atribuut, mis tagastab atribuudid, mida meie veebikomponent kuulab.

static observedAttributes = ["color"];

Kui see on paigas, võime lisada a attributeChangedCallback elutsükli meetod, mis käivitatakse alati, kui mõni jaotises loetletud atribuutidest on täidetud observedAttributes on määratud või värskendatud.

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

Nüüd värskendame oma update meetod selle tegelikuks kasutamiseks:

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

Lõpetuseks lisame oma increment Vara:

increment = 1;

Lihtne ja tagasihoidlik.

Svelte loenduri komponendi kasutamine

Kasutagem seda, mida me just tegime. Läheme oma Svelte rakenduse komponenti ja lisame midagi sellist:

<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>

Ja see toimib! Meie loendur renderdab, suurendab ja rippmenüü värskendab värvi. Nagu näete, renderdame oma Svelte'i mallis atribuudi color ja kui väärtus muutub, tegeleb Svelte helistamisega setAttribute meie aluseks olevas veebikomponendi eksemplaris. Siin pole midagi erilist: see on sama, mille atribuutide puhul juba tehakse mistahes HTML element.

Asjad muutuvad veidi huvitavaks increment prop. See on mitte atribuut meie veebikomponendis; see on veebikomponendi klassi rekvisiit. See tähendab, et see tuleb seadistada veebikomponendi eksemplaris. Olge minuga, sest asjad muutuvad mõne aja pärast palju lihtsamaks.

Esiteks lisame oma Svelte'i komponendile mõned muutujad:

let increment = 1;
let wcInstance;

Meie loenduri komponendi jõuallikas võimaldab teil suurendada 1 või 2 võrra:

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

Aga, teoorias, peame hankima oma veebikomponendi tegeliku eksemplari. See on sama, mida teeme alati, kui lisame a ref koos Reactiga. Svelte'iga on see lihtne bind:this direktiiv:

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

Nüüd kuulame meie Svelte'i mallis oma komponendi juurdekasvumuutuja muudatusi ja määrame selle aluseks oleva veebikomponendi atribuudi.

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

Saate seda katsetada läbi sellel live demol.

Ilmselgelt ei taha me seda teha iga veebikomponendi või rekvisiidi puhul, mida peame haldama. Kas poleks tore, kui saaksime lihtsalt sättida increment otse meie veebikomponendis, märgistuses, nagu tavaliselt komponentide rekvisiitide puhul, ja teil on see, teate, lihtsalt töötage? Teisisõnu, oleks tore, kui saaksime kõik kasutusviisid kustutada wcInstance ja kasutage selle asemel seda lihtsamat koodi:

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

Tuleb välja, et saame. See kood töötab; Svelte tegeleb kogu selle jalatööga meie eest. Vaadake seda selles demos. See on peaaegu kõigi JavaScripti raamistike tavaline käitumine.

Miks ma siis näitasin teile veebikomponendi rekvisiidi käsitsi seadistamise viisi? Kaks põhjust: kasulik on mõista, kuidas need asjad töötavad, ja hetk tagasi ütlesin, et see töötab peaaegu kõigi JavaScripti raamistike puhul. Kuid on üks raamistik, mis hullumeelselt ei toeta veebikomponentide seadistusi, nagu me just nägime.

React on hoopis teine ​​loom

Reageerige. Planeedi populaarseim JavaScripti raamistik ei toeta põhilist koostoimet veebikomponentidega. See on hästi tuntud probleem, mis on Reactile ainuomane. Huvitav on see, et see on tegelikult Reacti eksperimentaalses harus fikseeritud, kuid mingil põhjusel ei liidetud seda versiooni 18. Sellegipoolest saame siiski jälgida selle edenemist. Ja saate seda ise proovida a live demo.

Lahenduseks on muidugi kasutada a ref, haarake veebikomponendi eksemplar ja määrake käsitsi increment kui see väärtus muutub. See näeb välja selline:

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> );
}

Nagu arutasime, pole selle iga veebikomponendi atribuudi jaoks käsitsi kodeerimine lihtsalt skaleeritav. Kuid kõik pole veel kadunud, sest meil on paar võimalust.

1. valik: kasutage atribuute kõikjal

Meil on atribuudid. Kui klõpsasite ülal Reacti demol, increment rekvisiit ei töötanud, kuid värv muutus õigesti. Kas me ei saa kõike atribuutidega kodeerida? Kahjuks ei. Atribuutide väärtused võivad olla ainult stringid. See on siin piisavalt hea ja me jõuaksime selle lähenemisviisiga mõnevõrra kaugele. Numbrid nagu increment saab teisendada stringideks ja stringidest. Võiksime isegi JSON-i objekte stringifitseerida/parsida. Kuid lõpuks peame funktsiooni edastama veebikomponendile ja sel hetkel poleks meil valikuvõimalusi.

2. võimalus: mähkige see

On vana ütlus, et saate lahendada mis tahes arvutiteaduse probleemi, lisades kaudsuse taseme (v.a liiga paljude kaudsuse tasemete probleem). Nende rekvisiitide seadistamise kood on üsna etteaimatav ja lihtne. Mis siis, kui peidame selle raamatukokku? Targad inimesed Liti taga on üks lahendus. See teek loob teie jaoks uue Reacti komponendi pärast seda, kui olete sellele veebikomponendi andnud, ja loetleb vajalikud atribuudid. Kuigi ma olen tark, ei ole ma selle lähenemisviisi fänn.

Selle asemel, et veebikomponente üks-ühele vastendada käsitsi loodud Reacti komponentidega, eelistan ma lihtsalt üks Reageeri komponent, et me läbime oma veebikomponendi sildi nimi kuni (counter-wc meie puhul) – koos kõigi atribuutide ja atribuutidega – ning et see komponent meie veebikomponenti renderdaks, lisage ref, siis mõelge välja, mis on rekvisiit ja mis atribuut. See on minu arvates ideaalne lahendus. Ma ei tea raamatukogu, mis seda teeks, kuid selle loomine peaks olema lihtne. Anname proovi!

See on kasutus me otsime:

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

wcTag on veebikomponendi sildi nimi; ülejäänud on omadused ja atribuudid, mida soovime edasi anda.

Minu teostus näeb välja järgmine:

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);

Kõige huvitavam rida on lõpus:

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

Nii loome Reactis dünaamilise nimega elemendi. Tegelikult see on see, milleks React tavaliselt JSX-i edastab. Kõik meie divid on teisendatud createElement("div") kõned. Tavaliselt ei pea me seda API-d otse kutsuma, kuid see on olemas, kui seda vajame.

Peale selle tahame käivitada paigutusefekti ja läbida kõik rekvisiidid, mille oleme oma komponendile edastanud. Vaatame need kõik läbi ja kontrollime, kas see on vara, millel on a in Kontrollige, mis kontrollib nii veebikomponendi eksemplari objekti kui ka selle prototüübi ahelat, mis püüab kinni kõik klassi prototüübile sattunud getterid/seadistajad. Kui sellist omadust pole, eeldatakse, et see on atribuut. Mõlemal juhul määrame selle ainult siis, kui väärtus on tegelikult muutunud.

Kui te ei tea, miks me kasutame useLayoutEffect asemel useEffect, sest me tahame need värskendused kohe käivitada, enne kui meie sisu renderdatakse. Samuti pange tähele, et meil pole sõltuvusmassiivi useLayoutEffect; see tähendab, et tahame seda värskendust käivitada iga renderdus. See võib olla riskantne, kuna React kipub uuesti renderdama palju. Ma parandan seda, mähkides kogu asja sisse React.memo. See on sisuliselt selle kaasaegne versioon React.PureComponent, mis tähendab, et komponent renderdatakse uuesti ainult siis, kui mõni selle tegelikest rekvisiitidest on muutunud – ja see kontrollib lihtsa võrdsuse kontrolliga, kas see juhtus.

Ainus oht on see, et kui lähete otse läbi objekti rekvisiidist, mida muteerite, ilma uuesti määramata, ei näe te värskendusi. Kuid see on väga ebasoovitav, eriti Reacti kogukonnas, nii et ma ei muretseks selle pärast.

Enne edasiliikumist tahaksin öelda veel ühe asja. Te ei pruugi kasutusviisiga rahul olla. Jällegi kasutatakse seda komponenti järgmiselt:

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

Täpsemalt ei pruugi teile meeldida veebikomponendi märgendi nime edastamine <WcWrapper> komponent ja eelistavad selle asemel @lit-labs/react ülaltoodud pakett, mis loob iga veebikomponendi jaoks uue individuaalse Reacti komponendi. See on täiesti õiglane ja soovitan teil kasutada seda, mis teile kõige mugavam on. Kuid minu jaoks on selle lähenemisviisi üheks eeliseks see, et seda on lihtne teha kustutama. Kui mingi ime läbi ühendab React korraliku veebikomponentide käsitsemise oma eksperimentaalsest harust main homme saate ülaltoodud koodi muuta järgmiselt:

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

…sellele:

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

Tõenäoliselt võiksite isegi kirjutada ühe koodimodi, et seda kõikjal teha, ja seejärel kustutada <WcWrapper> üldse. Tegelikult kriimustage see: globaalne otsing ja asendamine RegEx-iga toimiks tõenäoliselt.

Rakendamine

Ma tean, tundub, et siia jõudmiseks kulus teekond. Kui mäletate, oli meie algne eesmärk võtta pildi eelvaate kood, mida vaatasime minu lehel laadimise postja teisaldage see veebikomponenti, et seda saaks kasutada mis tahes JavaScripti raamistikus. Reacti korraliku koostöö puudumine lisas segule palju detaile. Kuid nüüd, kui meil on korralik käepide selle kohta, kuidas veebikomponenti luua ja seda kasutada, on rakendamine peaaegu kulminatsioonivastane.

Viskan siia kogu veebikomponendi ja kutsun esile mõned huvitavad tükid. Kui soovite seda näha, siis siin on a töötav demo. See lülitub minu kolme lemmikraamatu vahel minu kolmes lemmikprogrammeerimiskeeles. Iga raamatu URL on iga kord kordumatu, nii et näete eelvaadet, kuigi tõenäoliselt soovite oma DevToolsi vahekaardil olevaid asju piirata, et asju tõeliselt näha.

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); }
}

Esiteks registreerime meid huvitava atribuudi ja reageerime selle muutumisel:

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

See põhjustab meie pildikomponendi loomise, mis kuvatakse ainult laadimisel:

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;
}

Järgmisena on meil eelvaate atribuut, mis võib olla kas meie base64 eelvaate string või meie blurhash pakett:

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

See lükkab edasi mis tahes abifunktsiooni, mida me vajame:

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;
}

Ja lõpuks meie render meetod:

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

Ja mõned abimeetodid, kuidas kõike kokku siduda:

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); }
}

See on pisut suurem plaat, kui me selle raamistikus ehitame, kuid pluss on see, et saame seda uuesti kasutada mis tahes raamistikus – kuigi React vajab praegu ümbrist, nagu arutasime. .

Koefitsiendid ja lõpud

Olen juba maininud Liti React ümbrist. Kuid kui leiate, et kasutate Stencilit, toetab see tegelikult a eraldi väljundkonveier ainult Reacti jaoks. Ja seda on teinud ka Microsofti head inimesed lõi midagi sarnast Liti ümbrisega, mis on lisatud kiire veebikomponentide teegile.

Nagu mainisin, määravad kõik raamistikud, mille nime pole React, teie eest veebikomponentide atribuutide määramisega. Pange tähele, et mõnel on süntaksi eriline maitse. Näiteks Solid.js-iga <your-wc value={12}> eeldab seda alati value on omadus, mida saate alistada attr eesliide, nagu <your-wc attr:value={12}>.

Pakke kuni

Veebikomponendid on veebiarendusmaastiku huvitav, sageli alakasutatud osa. Need võivad aidata vähendada teie sõltuvust mis tahes JavaScripti raamistikust, haldades teie kasutajaliidest või "lehe" komponente. Kuigi nende loomine veebikomponentidena – erinevalt Svelte’i või Reacti komponentidest – ei ole nii ergonoomiline, on plussiks see, et need on laialdaselt korduvkasutatavad.

Koostalitlusvõimeliste veebikomponentide loomine, mis isegi Reactiga töötavad algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.