Hvordan bygge en nettkomponent ved hjelp av Stencil.js

Webkomponenter er et sett med teknologier som lar deg lage gjenbrukbare elementer og gjenbruke dem på tvers av forskjellige nettapplikasjoner.

Stencil.js er en kompilator som genererer webkomponenter som er kompatible med alle moderne nettlesere. Den gir verktøy og API-er for å hjelpe deg med å bygge raske, effektive, skalerbare webkomponenter.

Komme i gang med Stencil.js

For å komme i gang med Stencil.js må du først initialisere den på datamaskinen.

Gjør dette ved å kjøre følgende kommando i node.js-terminalen:

npm init sjablong

Etter å ha kjørt kommandoen, vises en melding på skjermen for deg å velge hvilket prosjekt du vil begynne med:

For å fortsette, velg komponentalternativet, skriv inn prosjektets navn og bekreft valget:

Bytt deretter til prosjektets katalog og installer avhengighetene dine ved å kjøre disse kommandoene:

cd første-stensil-prosjekt
npm installere

Opprette en ny webkomponent

For å opprette en ny webkomponent i Stencil.js, lag en mappebane som

src/komponenter. Komponentmappen vil inneholde en TypeScript-fil oppkalt etter komponenten din, som Stencil.js bruker TypeScript-språket og JSX for komponentutvikling. Mappen vil også inneholde en CSS-fil som inneholder komponentens stil.

For eksempel, hvis du vil bygge en komponent kalt "min-knapp", lag en fil som heter min-knapp.tsx og en CSS-fil kalt min-knapp.css. I min-knapp.tsx fil, definer komponenten din ved å bruke Stencil.js API:

import { Komponent, h } fra'@stencil/kjerne';
@Komponent({
 stikkord: 'min-knapp',
 styleUrl: 'my-button.css',
 skygge: ekte,
})
eksportklasseMyButton{
 render() {
komme tilbake (
Klikk Meg</button>
 );
 }
}

Denne koden importerer Komponent og h funksjoner fra Stencil.js. De Komponent funksjonen definerer komponenten, mens h funksjon oppretter sin markering ved hjelp av HTML.

Definer komponenten din ved å bruke @Komponent dekoratør, som tar et objekt med tre egenskaper: stikkord, styleUrl, og skygge.

De stikkord egenskapen inneholder kodenavnet til komponenten. De styleUrl egenskapen spesifiserer CSS-filen for stiling av det egendefinerte elementet. Til slutt, den skygge egenskap er en boolsk verdi som indikerer om komponenten vil bruke Shadow DOM for å innkapsle det tilpassede elementets stiler og oppførsel. I gjengivelsesmetoden oppretter du et knappeelement.

I tillegg til det styleUrl egenskap, kan du bruke to egenskaper til for å style komponenten din: stil og styleUrls.

De stil egenskap definerer innebygde stiler for komponenten. Det tar en strengverdi som representerer CSS-stilene for komponenten:

import { Komponent, h } fra'@stencil/kjerne';
@Komponent({
 stikkord: 'min-knapp',
 stil: `
 knapp {
 polstring: 1rem 0.5rem;
 border-radius: 12px;
 font-familie: kursiv;
 grense: ingen;
 farge: #e2e2e2;
 bakgrunnsfarge: #333333;
 font-weight: fet;
 }
`,
 skygge: ekte,
})
eksportklasseMyButton{
 render() {
komme tilbake (
Klikk Meg</button>
 );
 }
}

De styleUrls egenskapen spesifiserer flere eksterne CSS-filer for styling av komponenten. Det krever en rekke strengverdier som representerer banene til CSS-filene:

import { Komponent, h } fra'@stencil/kjerne';
@Komponent({
 stikkord: 'min-knapp',
 styleUrls: ['my-button.css', 'en annen-knapp.css'],
 skygge: ekte,
})
eksportklasseMyButton{
 render() {
komme tilbake (
Klikk Meg</button>
 );
 }
}

Gjengivelse av webkomponenten

Når du har opprettet webkomponenten din, kan du gjengi den i en HTML-fil ved å legge til en egendefinert element-tag. Slik kan du inkludere my-button-komponenten:

html>
<htmldir="ltr"lang="no">
<hode>
<metategnsett="utf-8" />
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<linkhref=""rel="stilark">
<tittel>Stencil Component Startertittel>
<manustype="modul"src="/build/first-stencil-project.esm.js">manus>
<manusnomodulsrc="/build/first-stencil-project.js">manus>
hode>
<kropp>
<min-knappen>min-knappen>
kropp>
html>

Nå kan du lage nettkomponenter ved å bruke Stencil.js

Stencil.js er et kraftig verktøy for å bygge nettkomponenter som er raske, effektive og skalerbare. APIen og verktøyene gjør det enkelt å lage og administrere nettkomponenter, og kompatibiliteten med alle moderne nettlesere sikrer at komponentene dine fungerer godt på tvers av forskjellige nettapplikasjoner.

Etter hvert som webkomponenter blir mer og mer populære, er Stencil.js et rammeverk du bør vurdere når du bygger gjenbrukbare elementer for nettet.