为什么要升级自定义组件？
从 2021 年 7 月开始，Google Web Designer 将不再支持 v0 自定义组件。您应升级所有过时的自定义组件，使其遵守自定义元素 v1 规范。
我的自定义组件是否已过时？
当您打开包含过时自定义组件的文档时，Google Web Designer 会发出警告。此外，在组件面板中，该组件的名称旁边会显示一个警告指示图标 
来指明场景中的过时自定义组件。
您还可以查看组件的源文件。在下面的示例中，我们使用的是过时版本的二维码自定义组件。
manifest.json
对于新的自定义组件，其清单中会有一个名为 customElementsVersion 的字段。此字段用于指明组件是按照哪个版本的自定义元素规范创建的：
{
...
"customElementsVersion": 1,
...
}
对于过时的自定义组件，其清单中根本没有此字段。
myqrcode.js
过时的组件在注册时使用的是 document.registerElement() 方法。
过时版（自定义元素 v0）
document.registerElement('my-qrcode', {prototype: proto});
更新后的组件则改而使用 customElements.define() 方法。
当前版（自定义元素 v1）
customElements.define('my-qrcode', MyQrcode);
如果组件文件中包含 document.registerElement 字样，则表示组件已过时。在这种情况下，您可以按照以下步骤更新组件。
升级步骤
1. 更新组件清单
更新该组件的清单，使之包含新的 customElementsVersion 字段。此外，还需要将版本号加一，以便 Google Web Designer 能够识别出该组件已更改。
manifest.json
{
"name": "QR Code",
"type": "my-qrcode",
"tagName": "my-qrcode",
"customElementsVersion": 1,
"version": 2,
"description": "Generates a QR code image for the specified data.",
"files": {
"js": [
"qr.js",
"myqrcode.js"
]
},
"attributes": [
{
"name": "data",
"label": "Data",
"type": "string",
"required": true,
"description": "The data to encode in the QR code image"
}
],
"events": [
],
"methods": [
],
"nestable": false
}
2. 更新组件的 JavaScript 代码
必须使用 ES2015 类语法编写新组件的 JavaScript 代码。
自定义元素 v1 规范中的 JavaScript API 已更改。幸而，旧的 v0 API 方法可以正确地映射到新的 v1 方法。
| v0 方法 | v1 方法 |
|---|---|
document.registerElement() |
customElements.define() |
createdCallback() |
constructor() |
attachedCallback() |
connectedCallback() |
detachedCallback() |
disconnectedCallback() |
attributeChangedCallback() |
attributeChangedCallback()（需要 observedAttributes） |
下例就是一个可正常运行的更新版 my-qrcode 组件：
myqrcode.js
/** @fileoverview Implementation of the my-qrcode component. */
if (window.customElements && window.customElements.define) {
class MyQrcode extends HTMLElement {
constructor() {
super();
this.img = null;
}
connectedCallback() {
this.generateImage();
}
static get observedAttributes() {
return ['data'];
}
attributeChangedCallback(attributeName) {
if (!this.img) {
return;
}
switch (attributeName) {
case 'data':
this.generateImage();
break;
}
}
generateImage() {
const data = this.getAttribute('data');
if (data) {
if (!this.img) {
this.img = document.createElement('img');
this.img.style.height = '100%';
this.appendChild(this.img);
}
this.img.setAttribute('src', QRCode.generatePNG(data));
}
}
}
customElements.define('my-qrcode', MyQrcode);
}
需注意的事项：
- 新组件必须扩展
HTMLElement。 - 必须在构造函数中调用
super()。 - 除非相应属性在
observedAttributes下列出，否则不会触发attributeChangedCallback。
不妨详细了解新的自定义元素 v1 规范以及如何创作自定义元素。
3. 将 JavaScript 代码转译为 ES5（推荐）
上述经过更新的二维码组件可在 Google Chrome 以及其他支持 ES2015 (ES6) 类语法的浏览器中运行。版本较低的浏览器无法识别这种新的 JavaScript 语法，因此您需要转译 JavaScript 代码。为使您的自定义组件能够在所有浏览器中正常运行，我们强烈建议您使用转译器将第 2 部分中的 JavaScript 代码转换为 ES5。
Babel 是 babeljs.io 上提供的一款热门转译器，可在任何操作系统上运行。您也可以访问 babeljs.io/repl，在线使用它的 Web 应用版本。
使用 Babel 的 Web 应用版本时，请务必选中 es2015 预设。
请将转译后的代码添加到组件包中，以替代原来的 JavaScript 代码。
4. 安装更新后的组件
在 Google Web Designer 的组件面板中，使用删除按钮 移除过时的组件，然后使用添加自定义组件
