Crear un componente personalizado

Nota: Esta guía se ha modificado de acuerdo con la nueva especificación Elementos personalizados v. 1. Consulte la especificación y obtenga más información al respecto.

A partir de julio del 2021, los componentes personalizados obsoletos dejarán de admitirse en Google Web Designer. Para actualizar los componentes personalizados, consulte la guía de actualización.

Los desarrolladores web con experiencia pueden escribir sus propios componentes personalizados para Google Web Designer para mejorar los componentes disponibles o para crear otros. Los demás usuarios pueden instalar estos componentes personalizados para añadir funciones a sus proyectos sin tener que editar código.

Un paquete de componente válido debe incluir un .zip que contenga un archivo de manifiesto JSON. El paquete también puede incluir otros archivos, como uno JavaScript que defina un elemento HTML personalizado, y cualquier otro archivo JavaScript y CSS necesario para el componente.

1. Definir un elemento personalizado

Los componentes personalizados se implementan en Google Web Designer como elementos personalizados.

Un elemento personalizado es un tipo de elemento HTML que puede definir con código JavaScript y al cual puede asignarle un nombre de etiqueta personalizado. Una vez que haya definido un elemento personalizado, podrá usarlo tal como usaría cualquier elemento estándar. Las API de DOM compatibles con elementos HTML nativos también admiten los elementos personalizados.

Consulte más información sobre los elementos personalizados en la especificación HTML de WHATWG.

Siga estas directrices para elementos personalizados en Google Web Designer:

• El nombre de etiqueta de los elementos personalizados debe contener un guion (-), como x-panel o expand-button.
• El espacio de nombre gwd- pertenece a Google Web Designer y no puede usarlo en sus elementos personalizados.

Ejemplo de código de elemento personalizado

2. Crear los archivos adicionales JavaScript y CSS necesarios

Escriba el código JavaScript y CSS para asignar las funciones y estilos que quiera al componente personalizado.

Se pueden servir archivos JavaScript y CSS desde un servidor externo en vez de incluir esos archivos en el paquete. Para ello, añada referencias a los archivos externos en el manifiesto JSON.

3. Transpilar el código a ES5 (opcional)

Para que el código del componente sea lo más compatible posible con el navegador, debería transpilarlo a la sintaxis JavaScript ES5. De esta manera, se asegura de que su componente se ejecuta correctamente en navegadores antiguos.

1. Acceda a Babel, un compilador de JavaScript, en https://babeljs.io/repl.
2. En la sección Presets (Preajustes), seleccione es2015.
3. Copie el código JavaScript del componente y péguelo en el panel izquierdo. En el panel derecho, aparecerá una versión traducida del código, que puede usar en el componente.

4. Crear un archivo de manifiesto JSON de los archivos del componente

Los componentes personalizados requieren un archivo de manifiesto en formato JSON llamado manifest.json que permita a Google Web Designer identificar el componente. Consulte el esquema que se detalla a continuación. Algunas de las propiedades más importantes son:

• type: obligatoria.
• version: obligatoria. Incremente el número de versión cada vez que actualice un componente personalizado.
• customElementsVersion: obligatoria para los nuevos componentes que cumplan con la especificación Elementos personalizados v. 1.
• files: enumere otros archivos incluidos en el paquete de componentes personalizados.
• externalScripts: especifique las dependencias de secuencias de comandos externas. Estas secuencias de comandos se añaden automáticamente como un bloque