Hacer referencia a elementos personalizados de Google Web Designer

A partir de la versión 4.1.0.0711, Google Web Designer ha modificado la implementación de los siguientes elementos personalizados:

• gwd-image
• gwd-video
• gwd-audio
• gwd-iframe
• gwd-page
• gwd-pagedeck

Ahora, estos son elementos autónomos personalizados (por ejemplo, <gwd-video>) en lugar de elementos integrados personalizados (por ejemplo <video is="gwd-video">), ya que no todos los principales navegadores admiten los integrados.

Google Web Designer convierte los archivos que ya tiene para que pueda usar la nueva implementación cuando los abra.

Puede que tenga algún problema si su proyecto incluye lo siguiente:

Código afectado	Solución
Cambios en la propiedad display de CSS	Se ha solucionado un problema por el cual el cambio de propiedad display no surtía efecto. Vuelva a iniciar Google Web Designer si sigue teniendo este problema.
Propiedades de CSS relacionadas con el tamaño	Se han solucionado algunos problemas que afectaban a las propiedades relacionadas con el tamaño (como width, height, min-width, min-height, max-width, y max-height). Pruebe a iniciar Google Web Designer de nuevo. Si sigue teniendo problemas, puede añadir reglas con selectores más específicos para anular las reglas predeterminadas de Google Web Designer. Estas correcciones no se reflejarán en la escena, pero funcionarán en la vista previa del navegador y en el archivo publicado. Ejemplo de la regla de CSS cuando no funciona correctamente: .gwd-image-logo { width: auto; height: auto; max-width: 200px; max-height: 100px; } Ejemplo de reglas de CSS añadidas: gwd-image-logo > div.intermediate-element { max-width: inherit; max-height: inherit; } gwd-image-logo > div.intermediate-element > img { max-width: inherit; max-height: inherit; width: auto; height: auto; }
Reglas de CSS basadas en selectores de nombre de etiqueta	En la mayoría de los casos, las reglas de CSS deberían seguir funcionando correctamente. Si es necesario, puede cambiar los selectores para hacer referencia a los nuevos nombres de etiqueta. Ejemplo de regla de CSS anterior: img { ... } Ejemplo de regla de CSS actualizada: gwd-image { ... }
getElementsByTagName()	Puede obtener elementos mediante los nuevos nombres de etiqueta. Ejemplo de código anterior: getElementsByTagName('video'); Ejemplo de regla de código actualizado: getElementsByTagName('gwd-video');
Referencias al elemento nativo	En general, no tendría por qué hacer referencia al elemento nativo, ya que las propiedades y los métodos se desvían al elemento personalizado. En los casos en los que se necesita dicha referencia, haga los siguientes cambios: Use la propiedad nativeElement para obtener el elemento nativo del elemento personalizado. Haga referencia al elemento dentro de la función handleDomContentLoaded(), que ya debería estar en el código de su documento. Ejemplo de código anterior: var img1 = document.getElementById('gwd-image_1'); Ejemplo de regla de código  actualizado: function handleDomContentLoaded(event) { img1 = document.getElementById('gwd-image_1').nativeElement; } Tenga en cuenta que no debe modificar el elemento nativo, y puede que estos cambios no funcionen en versiones posteriores de Google Web Designer.