Reference custom Google Web Designer elements

As of Version 4.1.0.0711, Google Web Designer changed its implementation for the following custom elements:

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

These elements are now autonomous custom elements (e.g., <gwd-video>), rather than customized built-in elements (e.g., <video is="gwd-video">), as not all major browsers will support customized built-in elements.

Google Web Designer converts existing files to use the new implementation when you open them.

You may notice issues if your project includes any of the following:

Affected code	Solution
Changes to the CSS display property	The issue where changing the display property had no effect has been resolved. Re-launch Google Web Designer if you're still experiencing this problem.
Size-related CSS properties	Some issues with size-related properties (including width, height, min-width, min-height, max-width, and max-height) have been resolved. Try re-launching Google Web Designer. If you're still experiencing problems, you can add rules with more specific selectors to override Google Web Designer's default rules. These fixes won't be reflected on the stage, but will work in the browser preview and in the published file. Example of CSS rule not working as expected: .gwd-image-logo { width: auto; height: auto; max-width: 200px; max-height: 100px; } Example of added CSS rules: 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; }
CSS rules based on tag name selectors	In most cases, CSS rules should continue to work properly. If necessary, you can change the selectors to reference the new tag names. Example of previous CSS rule: img { ... } Example of updated CSS rule: gwd-image { ... }
getElementsByTagName()	You can get elements using the new tag names. Example of previous code: getElementsByTagName('video'); Example of updated code: getElementsByTagName('gwd-video');
References to the native element	Generally, you shouldn't need to reference the native element, as any properties and methods are forwarded to the custom element. In cases where such a reference is necessary, make the following changes: Use the nativeElement property to get the native element from the custom element. Reference the element within the handleDomContentLoaded() function, which should already exists in your document code. Example of previous code: var img1 = document.getElementById('gwd-image_1'); Example of updated code: function handleDomContentLoaded(event) { img1 = document.getElementById('gwd-image_1').nativeElement; } Note that you shouldn't modify the native element, and such changes may not continue to work in future releases of Google Web Designer.