Reference custom Google Web Designer elements

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;
}

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 {
  ...
}

You can get elements using the new tag names.

Example of previous code:

getElementsByTagName('video');

Example of updated code:

getElementsByTagName('gwd-video');

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:

1. Use the nativeElement property to get the native element from the custom element.
2. 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.