注意：本指南已更新為採用新的自訂元素版本 1 規格。您可以查看這項規格並瞭解詳情。
自 2021 年 7 月起，Google Web Designer 將不再支援過時的自訂元件。如要更新自訂元件，請參閱升級指南。
經驗豐富的網頁開發人員可以針對 Google Web Designer 自行撰寫所需的自訂元件，方法包括擴充現有元件或從頭開始建立新元件。其他使用者則可安裝這些自訂元件，為專案添加功能，而不必編輯任何程式碼。
有效的元件套件應有一個 .zip 檔案，內含 JSON 資訊清單檔案。套件也可包含其他檔案，例如定義自訂 HTML 元素的 JavaScript 檔案，或其他必要的 JavaScript 和 CSS 檔案。
1. 定義自訂元素
自訂元件可在 Google Web Designer 中做為自訂元素使用。
自訂元素是一種 HTML 元素類型，您可以運用 JavaScript 程式碼定義自訂元素，並加上自訂標記名稱。定義好自訂元素後，使用方法就和標準元素一樣。自訂元素也可以與支援原生 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：指定外部指令碼相依關係。系統會自動將這些指令碼新增至文件中的