So erstellen Sie eine Webkomponente mit Schablone.js

Webkomponenten sind eine Reihe von Technologien, mit denen Sie wiederverwendbare Elemente erstellen und diese in verschiedenen Webanwendungen wiederverwenden können.

Schablone.js ist ein Compiler, der Webkomponenten generiert, die mit allen modernen Browsern kompatibel sind. Es bietet Tools und APIs, mit denen Sie schnelle, effiziente und skalierbare Webkomponenten erstellen können.

Erste Schritte mit Schablone.js

Um mit Stencil.js zu beginnen, müssen Sie es zunächst auf Ihrem Computer initialisieren.

Führen Sie dazu den folgenden Befehl in Ihrem node.js-Terminal aus:

NPM-Init-Schablone

Nachdem Sie den Befehl ausgeführt haben, wird auf Ihrem Bildschirm eine Eingabeaufforderung angezeigt, in der Sie auswählen können, mit welchem ​​Projekt Sie beginnen möchten:

Um fortzufahren, wählen Sie die Komponentenoption, geben Sie den Namen Ihres Projekts ein und bestätigen Sie Ihre Auswahl:

Wechseln Sie als Nächstes in das Verzeichnis Ihres Projekts und installieren Sie Ihre Abhängigkeiten, indem Sie die folgenden Befehle ausführen:

cd erstes Schablonenprojekt
npm installieren

Erstellen einer neuen Webkomponente

Um eine neue Webkomponente in Schablone.js zu erstellen, erstellen Sie einen Ordnerpfad wie src/components. Der Komponentenordner enthält eine TypeScript-Datei, die nach Ihrer Komponente benannt ist, nämlich Schablone.js verwendet die TypeScript-Sprache und JSX für die Komponentenentwicklung. Der Ordner enthält auch eine CSS-Datei, die den Stil Ihrer Komponente enthält.

Wenn Sie beispielsweise eine Komponente namens „my-button“ erstellen möchten, erstellen Sie eine Datei mit dem Namen my-button.tsx und eine CSS-Datei namens mein-button.css. Im my-button.tsx Definieren Sie Ihre Komponente mithilfe der Schablone.js-API:

importieren { Komponente, h } aus'@stencil/core';
@Komponente({
 Schild: 'mein-knopf',
 styleUrl: 'mein-button.css',
 Schatten: WAHR,
})
ExportKlasseMyButton{
 render() {
zurückkehren (
Klicken Sie auf „Ich“./button>
 );
 }
}

Dieser Code importiert die Komponente Und H Funktionen von Schablone.js. Der Komponente Die Funktion definiert die Komponente, während die H Funktion erstellt sein Markup mit HTML.

Definieren Sie Ihre Komponente mithilfe von @Komponente Dekorator, der ein Objekt mit drei Eigenschaften akzeptiert: Schild, styleUrl, Und Schatten.

Der Schild Die Eigenschaft enthält den Tag-Namen der Komponente. Der styleUrl Die Eigenschaft gibt die CSS-Datei zum Gestalten des benutzerdefinierten Elements an. Schließlich die Schatten Die Eigenschaft ist ein boolescher Wert, der angibt, ob die Komponente Shadow DOM verwendet, um die Stile und das Verhalten des benutzerdefinierten Elements zu kapseln. In der Render-Methode erstellen Sie ein Schaltflächenelement.

In Ergänzung zu styleUrl -Eigenschaft können Sie zwei weitere Eigenschaften verwenden, um Ihre Komponente zu formatieren: Stil Und styleUrls.

Der Stil Die Eigenschaft definiert Inline-Stile für die Komponente. Es benötigt einen String-Wert, der die CSS-Stile für die Komponente darstellt:

importieren { Komponente, h } aus'@stencil/core';
@Komponente({
 Schild: 'mein-knopf',
 Stil: `
 Taste {
 Polsterung: 1rem 0.5rem;
 Randradius: 12px;
 Schriftfamilie: kursiv;
 Grenze: keine;
 Farbe: #e2e2e2;
 Hintergrundfarbe: #333333;
 Schriftdicke: fett;
 }
`,
 Schatten: WAHR,
})
ExportKlasseMyButton{
 render() {
zurückkehren (
Klicken Sie auf „Ich“./button>
 );
 }
}

Der styleUrls Die Eigenschaft gibt mehrere externe CSS-Dateien zum Gestalten der Komponente an. Es benötigt ein Array von String-Werten, die die Pfade zu den CSS-Dateien darstellen:

importieren { Komponente, h } aus'@stencil/core';
@Komponente({
 Schild: 'mein-knopf',
 styleUrls: ['mein-button.css', 'another-button.css'],
 Schatten: WAHR,
})
ExportKlasseMyButton{
 render() {
zurückkehren (
Klicken Sie auf „Ich“./button>
 );
 }
}

Rendern der Webkomponente

Sobald Sie Ihre Webkomponente erstellt haben, können Sie sie in einer HTML-Datei rendern, indem Sie ein benutzerdefiniertes Element-Tag hinzufügen. So können Sie die My-Button-Komponente einbinden:

html>
<htmldir=„ltr“lang=„en“>
<Kopf>
<MetaZeichensatz=„utf-8“ />
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0, Minimum-scale=1.0, Maximum-scale=5.0“ />
<Verknüpfunghref=""rel=„Stylesheet“>
<Titel>Starter für SchablonenkomponentenTitel>
<SkriptTyp="Modul"src=„/build/first-stencil-project.esm.js“>Skript>
<Skriptnomodulesrc=„/build/first-stencil-project.js“>Skript>
Kopf>
<Körper>
<Mein-Knopf>Mein-Knopf>
Körper>
html>

Jetzt können Sie Webkomponenten mit Schablone.js erstellen

Schablone.js ist ein leistungsstarkes Tool zum Erstellen von Webkomponenten, die schnell, effizient und skalierbar sind. Seine API und Tools machen es einfach, Webkomponenten zu erstellen und zu verwalten, und seine Kompatibilität mit allen modernen Browsern stellt sicher, dass Ihre Komponenten in verschiedenen Webanwendungen gut funktionieren.

Da Webkomponenten immer beliebter werden, ist Schablone.js ein Framework, das Sie beim Erstellen wiederverwendbarer Elemente für das Web berücksichtigen sollten.