注意：为符合新发布的自定义元素第 1 版规范，本指南进行了更新。您可以查看该规范并详细了解相关信息。
从 2021 年 7 月开始，Google Web Designer 将不再支持过时的自定义组件。如需更新您的自定义组件，请参阅升级指南。
经验丰富的 Web 开发者可以自行编写 Google Web Designer 自定义组件来扩展现有组件，或者从头开始构建新组件。其他用户可以安装这些自定义组件，无需编辑任何代码即可为其项目添加功能。
有效的组件包必须是包含 JSON 清单文件的 .zip 文件。组件包中还可以包含其他文件，例如用于定义自定义 HTML 元素的 JavaScript 文件，或其他必要的 JavaScript 和 CSS 文件。
1. 定义自定义元素
在 Google Web Designer 中，自定义组件是以自定义元素的形式实现的。
自定义元素是一类通过 JavaScript 代码定义的 HTML 元素，您需要为其指定一个自定义标记名称。定义好自定义元素后，就可以像使用任何标准元素一样使用它了。支持原生 HTML 元素的 DOM API 也支持自定义元素。
不妨参阅 WHATWG 网站上的 HTML 规范，详细了解自定义元素。
要在 Google Web Designer 中使用自定义元素，请遵循以下准则：
- 自定义元素的标记名称必须包含连字符 (
-)，例如x-panel或expand-button。 gwd-命名空间已由 Google Web Designer 声明，因此不能在您的自定义元素中使用它。
2. 创建所有必需的其他 JavaScript 文件和 CSS 文件
编写可提供所需功能和样式的 JavaScript 和 CSS。
您可以通过外部服务器提供 JavaScript 文件和 CSS 文件，而无需将文件放入组件包中。在 JSON 清单中添加对外部文件的引用即可。
3.将代码转译为 ES5（可选）
为了最大限度提高代码与浏览器的兼容性，我们建议您转译组件代码，使其采用 JavaScript ES5 语法。这有助于确保您的组件在旧版浏览器中正常运行。
- 转到位于 https://babeljs.io/repl 的 JavaScript 编译器 Babel。
- 在 Presets（预设）部分下，选中 es2015。
- 将组件的 JavaScript 代码复制并粘贴到左侧窗格中。右侧窗格中会显示代码经过转译后的版本，您可以将其用于组件。
4. 创建用于列明组件文件的 JSON 清单
自定义组件需要一个名为 manifest.json 的清单文件（JSON 格式），以便 Google Web Designer 了解组件的构成。请遵循下文中详述的架构，并留意以下属性的设置：
type- 必需。version- 必需。每次更新自定义组件时，都需要递增版本号。customElementsVersion- 对于符合自定义元素 v1 规范的新组件而言，此属性是必需的。files- 列出自定义组件包中所包含的其他文件。externalScripts- 指定外部脚本依赖项。这些脚本会自动以一个