Een webcomponent bouwen met behulp van Stencil.js

Webcomponenten zijn een reeks technologieën waarmee u herbruikbare elementen kunt maken en deze kunt hergebruiken in verschillende webtoepassingen.

Stencil.js is een compiler die webcomponenten genereert die compatibel zijn met alle moderne browsers. Het biedt tools en API's waarmee u snelle, efficiënte en schaalbare webcomponenten kunt bouwen.

Aan de slag met Stencil.js

Om aan de slag te gaan met Stencil.js, moet u het eerst op uw computer initialiseren.

Doe dit door de volgende opdracht uit te voeren in uw node.js-terminal:

npm init-stencil

Nadat u de opdracht hebt uitgevoerd, verschijnt er een prompt op uw scherm waarin u kunt selecteren met welk project u wilt beginnen:

Om verder te gaan, kiest u de componentoptie, voert u de naam van uw project in en bevestigt u uw selectie:

Ga vervolgens naar de map van uw project en installeer uw afhankelijkheden door deze opdrachten uit te voeren:

cd eerste stencilproject
npm installeren

Een nieuwe webcomponent maken

Als u een nieuwe webcomponent in Stencil.js wilt maken, maakt u een mappad zoals src/componenten. De map Components bevat een TypeScript-bestand dat is vernoemd naar uw component, als Stencil.js maakt gebruik van de TypeScript-taal en JSX voor componentontwikkeling. De map bevat ook een CSS-bestand dat de styling van uw component bevat.

Als u bijvoorbeeld een component met de naam "mijn-knop" wilt bouwen, maakt u een bestand met de naam mijn-knop.tsx en een CSS-bestand genaamd mijn-knop.css. In de mijn-knop.tsx bestand, definieert u uw component met behulp van de Stencil.js API:

importeren { Onderdeel, h } van'@stencil/kern';
@Onderdeel({
 label: 'mijn-knop',
 stijlUrl: 'mijn-knop.css',
 schaduw: WAAR,
})
exporterenklasMijnKnop{
 veroorzaken() {
opbrengst (
Klik op mij</button>
 );
 }
}

Deze code importeert de Onderdeel En H functies van Stencil.js. De Onderdeel functie definieert de component, terwijl de H functie maakt zijn opmaak met behulp van HTML.

Definieer uw component met behulp van de @Onderdeel decorateur, die een object neemt met drie eigenschappen: label, stijlUrl, En schaduw.

De label eigenschap bevat de tagnaam van de component. De stijlUrl eigenschap specificeert het CSS-bestand voor het opmaken van het aangepaste element. Als laatste de schaduw eigenschap is een Booleaanse waarde die aangeeft of de component Shadow DOM zal gebruiken om de stijlen en het gedrag van het aangepaste element in te kapselen. In de rendermethode maakt u een knopelement.

Naast de stijlUrl eigenschap, kunt u nog twee eigenschappen gebruiken om uw component op te maken: stijl En stijlUrls.

De stijl eigenschap definieert inline stijlen voor de component. Er is een tekenreekswaarde voor nodig die de CSS-stijlen voor de component vertegenwoordigt:

importeren { Onderdeel, h } van'@stencil/kern';
@Onderdeel({
 label: 'mijn-knop',
 stijl: `
 knop {
 opvulling: 1rem 0.5rem;
 border-radius: 12px;
 font-familie: cursief;
 grens: geen;
 kleur: #e2e2e2;
 Achtergrond kleur: #333333;
 font-weight: vet;
 }
`,
 schaduw: WAAR,
})
exporterenklasMijnKnop{
 veroorzaken() {
opbrengst (
Klik op mij</button>
 );
 }
}

De stijlUrls eigenschap specificeert meerdere externe CSS-bestanden voor het opmaken van de component. Er is een reeks tekenreekswaarden voor nodig die de paden naar de CSS-bestanden vertegenwoordigen:

importeren { Onderdeel, h } van'@stencil/kern';
@Onderdeel({
 label: 'mijn-knop',
 stijlUrls: ['mijn-knop.css', 'een andere-knop.css'],
 schaduw: WAAR,
})
exporterenklasMijnKnop{
 veroorzaken() {
opbrengst (
Klik op mij</button>
 );
 }
}

De webcomponent renderen

Nadat u uw webcomponent heeft gemaakt, kunt u deze weergeven in een HTML-bestand door een aangepaste elementtag toe te voegen. Zo kunt u de my-button-component opnemen:

html>
<htmlricht="ltr"lang="en">
<hoofd>
<metatekenset="utf-8" />
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, initiële schaal=1.0, minimale schaal=1.0, maximale schaal=5.0" />
<koppelinghref=""rel="stijlblad">
<titel>Stencil Component-startertitel>
<scripttype="module"src="/build/eerste-stencil-project.esm.js">script>
<scriptgeen modulesrc="/build/eerste-stencil-project.js">script>
hoofd>
<lichaam>
<mijn-knop>mijn-knop>
lichaam>
html>

Nu kunt u webcomponenten maken met behulp van Stencil.js

Stencil.js is een krachtige tool voor het bouwen van webcomponenten die snel, efficiënt en schaalbaar zijn. De API en tools maken het gemakkelijk om webcomponenten te maken en te beheren, en de compatibiliteit met alle moderne browsers zorgt ervoor dat uw componenten goed werken in verschillende webapplicaties.

Naarmate webcomponenten steeds populairder worden, is Stencil.js een raamwerk waarmee u rekening moet houden bij het bouwen van herbruikbare elementen voor het web.