引用自定义 Google Web Designer 元素

自 4.1.0.0711 版起，Google Web Designer 更改了以下自定义元素的实现方式：

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

这些元素现在是自主型自定义元素（例如 <gwd-video>），而非定制的内置元素（例如 <video is="gwd-video">），因为并非所有主流浏览器都支持定制的内置元素。

当您打开现有文件时，Google Web Designer 会转换这些文件并使用新的实现方式。

如果您的项目包含以下任一项，则可能会出现问题：

受影响的代码	解决方案
对 CSS display 属性所做的更改	更改 display 属性不起作用的问题已得到解决。如果您仍然遇到此问题，请重新启动 Google Web Designer。
与尺寸相关的 CSS 属性	一些与尺寸方面的属性（包括 width、height、min-width、min-height、max-width 和 max-height）有关的问题已得到解决。请尝试重新启动 Google Web Designer。 如果您仍然遇到问题，则可以使用更具体的选择器添加规则，以替换 Google Web Designer 的默认规则。这些解决方案不会体现在场景中，但会体现在浏览器预览和已发布的文件中。 CSS 规则未按预期工作的示例： .gwd-image-logo { width: auto; height: auto; max-width: 200px; max-height: 100px; } 已添加的 CSS 规则示例： 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 规则	在大多数情况下，CSS 规则应该会继续正常工作。如有必要，您可以更改选择器以引用新的标记名称。 以前的 CSS 规则示例： img { ... } 更新后的 CSS 规则示例： gwd-image { ... }
getElementsByTagName()	您可以使用新的标记名称获取元素。 以前的代码示例： getElementsByTagName('video'); 更新后的代码示例： getElementsByTagName('gwd-video');
对原生元素的引用	通常，您不需要引用原生元素，因为所有属性和方法都会被转发到自定义元素。如果需要进行此类引用，请做出以下更改： 使用 nativeElement 属性从自定义元素中获取原生元素。 在 handleDomContentLoaded() 函数（应该已存在于文档代码中）中引用该元素。 以前的代码示例： var img1 = document.getElementById('gwd-image_1'); 更新后的代码示例： function handleDomContentLoaded(event) { img1 = document.getElementById('gwd-image_1').nativeElement; } 请注意，您不应修改原生元素，此类更改可能无法在今后的 Google Web Designer 版本中继续有效。