Google Web Designer のカスタム要素を参照する

Google Web Designer はバージョン 4.1.0.0711 で以下のカスタム要素の実装を変更しました。

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

上記の要素は、カスタマイズされた組み込み要素（例: <video is="gwd-video">）ではなく、自立したカスタム要素（例: <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 の今後のリリースで機能しなくなることがあるのでご注意ください。