Benutzerdefinierte Komponente erstellen

Hinweis: Dieser Leitfaden wurde aktualisiert und entspricht nun der Spezifikation von Custom Elements V1. Sie können sich die Spezifikation und weitere Informationen dazu ansehen.

Seit Juli 2021 werden veraltete benutzerdefinierte Komponenten in Google Web Designer nicht mehr unterstützt. Informationen zum Aktualisieren Ihrer benutzerdefinierten Komponenten finden Sie im Upgrade-Leitfaden.

Erfahrene Webentwickler können eigene benutzerdefinierte Komponenten für Google Web Designer erstellen und dazu entweder vorhandene Komponenten erweitern oder komplett neue Komponenten erstellen. Andere Nutzer haben die Möglichkeit, solche benutzerdefinierten Komponenten zu installieren, um Funktionen für ihre Projekte zu erhalten, ohne selbst Code bearbeiten zu müssen.

Ein gültiges Komponentenpaket besteht aus einer ZIP-Datei mit einer JSON-Manifestdatei. Das Paket kann auch andere Dateien enthalten, z. B. eine JavaScript-Datei, die ein benutzerdefiniertes HTML-Element definiert, oder andere erforderliche JavaScript- und CSS-Dateien.

1. Benutzerdefiniertes Element definieren

Benutzerdefinierte Komponenten werden in Google Web Designer als benutzerdefinierte Elemente implementiert.

Ein benutzerdefiniertes Element ist ein HTML-Elementtyp, den Sie mit JavaScript-Code definieren und dem Sie einen eigenen Tag-Namen geben. Nachdem Sie ein benutzerdefiniertes Element definiert haben, können Sie es wie jedes andere Standardelement verwenden. DOM-APIs, mit denen native HTML-Elemente erstellt werden können, eignen sich auch für benutzerdefinierte Elemente.

Weitere Informationen zu benutzerdefinierten Elementen finden Sie in der HTML-Spezifikation der WHATWG.

Beachten Sie die folgenden Richtlinien für benutzerdefinierte Elemente in Google Web Designer:

• Der Tag-Name für benutzerdefinierte Elemente muss einen Bindestrich (-) enthalten, z. B. wie in x-panel oder expand-button.
• Der Namespace gwd- wird von Google Web Designer beansprucht und kann nicht in Ihren benutzerdefinierten Elementen verwendet werden.

Beispiel für den Code eines benutzerdefinierten Elements

2. Weitere erforderliche JavaScript- und CSS-Dateien erstellen

Schreiben Sie den JavaScript- und den CSS-Code, mit dem die gewünschten Funktionen und der Stil festgelegt werden.

JavaScript- und CSS-Dateien können auf einem externen Server zur Verfügung gestellt werden und müssen nicht in das Paket aufgenommen werden. Auf externe Dateien muss im JSON-Manifest verwiesen werden.

3. Code in ES5 transpilieren (optional)

Für eine maximale Browserkompatibilität empfehlen wir, den Komponentencode so zu transpilieren, dass die JavaScript ES5-Syntax verwendet wird. Dadurch tragen Sie dazu bei, dass Ihre Komponente in älteren Browsern ordnungsgemäß ausgeführt wird.

1. Besuchen Sie Babel, einen JavaScript-Compiler, unter https://babeljs.io/repl.
2. Wählen Sie unter Presets (Voreinstellungen) die Option es2015 aus.
3. Kopieren Sie den JavaScript-Code der Komponente und fügen Sie ihn im linken Bereich ein. Im rechten Bereich wird eine übersetzte Version des Codes angezeigt, die Sie für Ihre Komponente verwenden können.

4. JSON-Manifest der Komponentendateien erstellen

Benutzerdefinierte Komponenten erfordern eine Manifestdatei im JSON-Format namens manifest.json, mit der Google Web Designer über die Komponente informiert wird. Verwenden Sie das unten beschriebene Schema. Wichtige Attribute:

• type: Ist erforderlich.
• version: Ist erforderlich. Erhöhen Sie jedes Mal die Versionsnummer, wenn Sie eine benutzerdefinierte Komponente aktualisieren.
• customElementsVersion: Erforderlich für neue Komponenten, die der Spezifikation von Custom Elements V1 folgen.
• files: Geben Sie hier weitere Dateien im Paket der benutzerdefinierten Komponente an.
• externalScripts: Hier geben Sie Abhängigkeiten von externen Skripts an. Diese Skripts werden automatisch in einem