網頁元件更新 - 有更多時間可以升級至 v1 API

Jonathan Bingham
Arthur Evans

Web 元件第 1 版 API 是一項網路平台標準,並已於 Chrome、Safari、Firefox 和 (即將) Edge 中推出。v1 API 幾乎可供數百萬個網站使用,每日觸及數十億使用者。使用草稿 v0 API 的開發人員提供了寶貴的意見回饋,而這些意見回饋影響了相關規定。但只有 Chrome 支援 v0 API。為確保互通性,去年下半年,我們宣布這些 API 草稿 API 已淘汰,並已排定 Chrome 73 移除。

由於開發人員要求更多時間進行遷移,因此這些 API 尚未從 Chrome 中移除。Chrome 80 版大約在 2020 年 2 月左右移除 v0 草稿 API

如果您認為您可能正在使用 v0 API,則必須瞭解以下資訊:

回顧未來:停用 v0 API

如要在停用 v0 API 的情況下測試網站,您需要從指令列中使用下列標記啟動 Chrome:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

你必須先退出 Chrome,才能使用指令列啟動 Chrome。如果您已安裝 Chrome Canary,可以在 Canary 中執行測試,同時讓 Chrome 保持載入網頁。

如要在停用 v0 API 的情況下測試網站,請按照下列步驟操作:

  1. 如果您使用的是 Mac OS,請前往 chrome://version 尋找 Chrome 的執行檔路徑。 您將需要步驟 3 中的路徑。
  2. 結束 Chrome。
  3. 使用指令列旗標重新啟動 Chrome:

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    如需透過旗標啟動 Chrome 的操作說明,請參閱「使用旗標執行 Chromium」一文。 例如,您可以在 Windows 上執行:

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
    
  4. 如要檢查是否已正確啟動瀏覽器,請開啟新分頁,開啟開發人員工具主控台,然後執行下列指令:

    console.log(
    "Native HTML Imports?", 'import' in document.createElement('link'),
    "Native Custom Elements v0?", 'registerElement' in document,
    "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));
    

    如果一切運作正常,您應該會看到:

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false
    

    如果瀏覽器回報上述任何或所有功能,就會發生錯誤。在使用旗標重新啟動前,請確認您已完全退出 Chrome。

  5. 最後,載入您的應用程式並執行各項功能。如果一切運作正常,就是您了。

使用 v0 polyfill

Web 元件 v0 polyfills 在不支援原生支援的瀏覽器上支援 v0 API。如果您的網站在停用 v0 API 的情況下無法在 Chrome 上運作,可能表示您並未載入 polyfill。有幾種的可能性:

  • 您完全未載入 polyfill。在這種情況下,您的網站在 Firefox 和 Safari 等其他瀏覽器上會無法運作。
  • 您正在根據瀏覽器監聽條件,有條件載入 polyfill。在這種情況下,您的網站應該能在其他瀏覽器上運作。請直接跳到載入 polyfill

Polymer Project 團隊和其他人過去曾建議根據特徵偵測,有條件載入 Polyfill。這個方法應在停用 v0 API 的情況下正常運作。

安裝 v0 polyfill

Web 元件 v0 polyfills 從未發布至 npm 註冊資料庫。如果專案已使用 Bower,則可使用 Bower 安裝 polyfill。或從 ZIP 檔案安裝

  • 如何透過 Bower 安裝:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • 如要從 ZIP 檔案安裝,請從 GitHub 下載最新的 0.7.x 版本:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

    如果您從 ZIP 檔案安裝,當其他版本推出時,您必須手動更新 polyfill。建議您檢查程式碼中的 polyfill。

載入 v0 polyfill

Web 元件 v0 polyfill 分為兩個不同套裝組合:

webcomponents-min.js 包含所有 polyfill。這個套件包含 shadow DOM polyfill,它大於其他 polyfill,且對效能的影響更大。只有在需要 shadow DOM 支援時,才使用這個套件。
webcomponents-lite-min.js 包含所有 polyfill (陰影 DOM 除外)。 注意:Polymer 1.x 使用者應選擇這個套裝組合,因為 Shadow DOM 模擬已直接附在 Polymer 程式庫中。Polymer 2.x 使用者需要不同版本的 polyfill。詳情請參閱 Polymer 專案網誌文章

您也可以在 Web 元件 polyfill 套件中選用個別 polyfill。單獨使用個別 polyfill 是進階主題,本文未涵蓋。

如要無條件載入 polyfill:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

或:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

如果您是直接從 GitHub 安裝 polyfill,則必須提供安裝 polyfill 的路徑。

如果您根據功能偵測功能有條件載入 polyfill,網站應可在移除 v0 支援後繼續運作。

如果您使用瀏覽器探查功能 (也就是在非 Chrome 瀏覽器中載入 polyfill) 有條件地載入 polyfill,一旦從 Chrome 移除 v0 支援,網站就會失敗。

我的抵用金消失不見了,我不知道自己使用哪些 API!

如果您不確定自己是否使用任何 v0 API (或是您正在使用的 API),可以在 Chrome 中查看主控台的輸出內容。

  1. 如果您先前是以旗標啟動 Chrome 來停用 v0 API,請關閉 Chrome 並正常重新啟動。
  2. 開啟新的 Chrome 分頁並載入網站。
  3. 按下 Control + Shift + J 鍵 (Windows、Linux、ChromeOS) 或 Command + Option + J 鍵 (Mac),開啟開發人員工具控制台
  4. 請查看控制台輸出內容,找出淘汰訊息。如有大量主控台輸出,請在「Filter」方塊中輸入「Deprecation」。
顯示淘汰警告的控制台視窗

您應會看到目前使用的每個 v0 API 的淘汰訊息。上述的輸出內容顯示了 HTML 匯入、自訂元素 v0 以及 shadow DOM v0 的訊息。

如果您使用上述一或多個 API,請參閱使用 v0 polyfill

後續步驟:停用 v0

確定載入 v0 polyfill,確保移除 v0 API 後您的網站仍可正常運作。建議您改用廣泛支援的 Web 元件 v1 API。

如果您使用 Polymer 程式庫、X-Tag 或 SkateJS 等網頁元件程式庫,第一步是檢查是否支援第 1 版 API 的較新版本程式庫。

如果您有自己的程式庫,或在沒有程式庫的情況下編寫自訂元素,就必須更新至新的 API。以下資源可能對您有所幫助:

加總

Web 元件 v0 草稿 API 即將淘汰。如果閱讀本文後會提到其中一件事,請務必在停用 v0 API 的情況下測試應用程式,並視需要載入 polyfill

建議您長期使用最新版 API,並繼續使用網頁元件!