Opmerking: Deze gids is geüpdatet om te voldoen aan de nieuwe Custom Elements v1-specificatie. U kunt de specificatie bekijken en meer informatie lezen.
Vanaf juli 2021 worden verouderde aangepaste componenten niet meer ondersteund in Google Web Designer. Bekijk de upgradegids om uw aangepaste componenten te updaten.
Ervaren webontwikkelaars kunnen zelf aangepaste componenten opstellen voor Google Web Designer. Ze kunnen hiervoor bestaande componenten uitbreiden of volledig nieuwe componenten maken. Andere gebruikers kunnen deze aangepaste componenten installeren om functionaliteit aan hun projecten toe te voegen zonder code te bewerken.
Een geldig componentpakket bestaat uit een zip-bestand met een json-manifestbestand. Het pakket kan ook andere bestanden bevatten, zoals een JavaScript-bestand dat een aangepast html-element definieert of andere benodigde JavaScript- en css-bestanden.
1. Definieer een aangepast element
Aangepaste componenten worden in Google Web Designer geïmplementeerd als aangepaste elementen.
Een aangepast element is een html-elementtype dat u definieert met JavaScript-code en een aangepaste tagnaam geeft. Nadat u een aangepast element heeft gedefinieerd, kunt u dit gebruiken zoals u elk standaardelement zou gebruiken. De DOM API's die werken met systeemeigen html-elementen, werken ook met aangepaste elementen.
Bekijk meer informatie over aangepaste elementen in de html-specificatie op WHATWG.
Volg deze richtlijnen voor aangepaste elementen in Google Web Designer:
- De tagnaam voor aangepaste elementen moet een koppelteken (
-) bevatten, zoalsx-panelofexpand-button. - De naamruimte
gwd-is geclaimd door Google Web Designer en kan niet worden gebruikt in uw aangepaste elementen.
Een voorbeeld van aangepaste elementcode bekijken
2. Maak zo nodig aanvullende JavaScript- en css-bestanden
Schrijf de JavaScript en css die de gewenste functionaliteit en stijl bieden.
U kunt JavaScript- en css-bestanden leveren via een externe server, in plaats van die bestanden in het pakket op te nemen. Voeg verwijzingen naar externe bestanden toe in het json-manifest.
3. Transpileer uw code naar ES5 (optioneel)
Het is raadzaam uw componentcode te transpileren naar de JavaScript ES5-syntaxis zodat deze zo veel mogelijk browsers ondersteunt. Op deze manier wordt uw component naar behoren uitgevoerd in oudere browsers.
- Ga naar Babel, een JavaScript-compiler, op https://babeljs.io/repl.
- Selecteer in het gedeelte Presets (Voorinstellingen) de optie es2015.
- Kopieer en plak de JavaScript-code van uw component in het linkervenster. Er wordt een vertaalde versie van de code weergegeven in het rechtervenster. Deze kunt u gebruiken voor uw component.
4. Maak een json-manifest van de componentbestanden
Voor aangepaste componenten is een manifestbestand in json-indeling met de naam manifest.json vereist. Het manifest geeft Google Web Designer informatie over de component. Volg het onderstaande schema. Belangrijke eigenschappen zijn onder meer:
type: Vereist.version: Vereist. Verhoog het versienummer wanneer u een aangepaste component updatet.customElementsVersion: Vereist voor nieuwe componenten die voldoen aan de Custom Elements v1-specificatie.files: Vermeld andere bestanden die zijn opgenomen in het aangepaste-componentpakket.externalScripts: Specificeer externe scriptafhankelijkheden. Deze scripts worden automatisch in een