Hur man bygger en webbkomponent med Stencil.js

Webbkomponenter är en uppsättning tekniker som låter dig skapa återanvändbara element och återanvända dem i olika webbapplikationer.

Stencil.js är en kompilator som genererar webbkomponenter som är kompatibla med alla moderna webbläsare. Den tillhandahåller verktyg och API: er som hjälper dig att bygga snabba, effektiva, skalbara webbkomponenter.

Komma igång med Stencil.js

För att komma igång med Stencil.js måste du först initiera den på din dator.

Gör detta genom att köra följande kommando i din node.js-terminal:

npm init stencil

När du har kört kommandot visas en uppmaning på skärmen där du kan välja vilket projekt du vill börja med:

För att fortsätta, välj komponentalternativet, ange ditt projekts namn och bekräfta ditt val:

Byt sedan till ditt projekts katalog och installera dina beroenden genom att köra dessa kommandon:

cd första-stencil-projekt
npm installera

Skapa en ny webbkomponent

För att skapa en ny webbkomponent i Stencil.js, skapa en mappsökväg som

src/komponenter. Komponentmappen kommer att innehålla en TypeScript-fil uppkallad efter din komponent, som Stencil.js använder TypeScript-språket och JSX för komponentutveckling. Mappen kommer också att innehålla en CSS-fil som innehåller din komponents stil.

Till exempel, om du vill bygga en komponent som heter "min-knapp", skapa en fil som heter min-knapp.tsx och en CSS-fil som heter min-knapp.css. I den min-knapp.tsx fil, definiera din komponent med hjälp av Stencil.js API:

importera { Komponent, h } från'@stencil/kärna';
@Komponent({
 märka: 'min-knapp',
 styleUrl: 'my-button.css',
 skugga: Sann,
})
exporteraklassMyButton{
 framställa() {
lämna tillbaka (
Klicka på Mig</button>
 );
 }
}

Denna kod importerar Komponent och h funktioner från Stencil.js. De Komponent funktionen definierar komponenten, medan h fungera skapar sin uppmärkning med HTML.

Definiera din komponent med hjälp av @Komponent dekoratör, som tar ett föremål med tre egenskaper: märka, styleUrl, och skugga.

De märka egenskapen innehåller taggnamnet för komponenten. De styleUrl egenskapen anger CSS-filen för att utforma det anpassade elementet. Slutligen skugga egenskap är ett booleskt värde som indikerar om komponenten kommer att använda Shadow DOM för att kapsla in det anpassade elementets stilar och beteende. I renderingsmetoden skapar du ett knappelement.

Utöver styleUrl egenskap, kan du använda ytterligare två egenskaper för att utforma din komponent: stil och styleUrls.

De stil egenskapen definierar inline-stilar för komponenten. Det tar ett strängvärde som representerar CSS-stilarna för komponenten:

importera { Komponent, h } från'@stencil/kärna';
@Komponent({
 märka: 'min-knapp',
 stil: `
 knapp {
 stoppning: 1rem 0.5rem;
 gränsradie: 12px;
 font-family: kursiv;
 gräns: ingen;
 färg: #e2e2e2;
 bakgrundsfärg: #333333;
 font-weight: fet;
 }
`,
 skugga: Sann,
})
exporteraklassMyButton{
 framställa() {
lämna tillbaka (
Klicka på Mig</button>
 );
 }
}

De styleUrls egenskapen anger flera externa CSS-filer för styling av komponenten. Det krävs en rad strängvärden som representerar sökvägarna till CSS-filerna:

importera { Komponent, h } från'@stencil/kärna';
@Komponent({
 märka: 'min-knapp',
 styleUrls: ['my-button.css', "annan-knapp.css"],
 skugga: Sann,
})
exporteraklassMyButton{
 framställa() {
lämna tillbaka (
Klicka på Mig</button>
 );
 }
}

Rendering av webbkomponenten

När du har skapat din webbkomponent kan du rendera den i en HTML-fil genom att lägga till en anpassad elementtagg. Så här kan du inkludera my-button-komponenten:

html>
<htmldir="ltr"lang="en">
<huvud>
<metateckenuppsättning="utf-8" />
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<länkhref=""rel="stilmall">
<titel>Stencil Component Startertitel>
<manustyp="modul"src="/build/first-stencil-project.esm.js">manus>
<manusnomodulsrc="/build/first-stencil-project.js">manus>
huvud>
<kropp>
<min-knapp>min-knapp>
kropp>
html>

Nu kan du skapa webbkomponenter med hjälp av Stencil.js

Stencil.js är ett kraftfullt verktyg för att bygga webbkomponenter som är snabba, effektiva och skalbara. Dess API och verktyg gör det enkelt att skapa och hantera webbkomponenter, och dess kompatibilitet med alla moderna webbläsare säkerställer att dina komponenter fungerar bra i olika webbapplikationer.

I takt med att webbkomponenter blir mer och mer populära är Stencil.js ett ramverk som du bör tänka på när du bygger återanvändbara element för webben.