教學元件
「操作說明：元件」是一組實作常見 UI 的網頁元件 例如模式這些實作項目是為了教育資源。 您可以閱讀各個類別 並從中學習請注意，這些變數明確不會 UI 程式庫，且不得用於實際工作環境。
元件
<howto-checkbox>：代表表單中的布林值選項。最常見的是 核取方塊是雙重類型，可讓使用者在兩個選項之間切換：已勾選和未勾選。<howto-tabs>：將顯示內容分成多個面板，藉此限制顯示的內容。<howto-tooltip>：在元素出現時，顯示元素相關資訊的彈出式視窗 收到鍵盤焦點或滑鼠遊標懸停在上。
目標
我們的目標是示範編寫完善元件的最佳做法， 方便好用、效能高、易於維護且設計容易。每個元件都是 並用作參考實作
無障礙設定
元件必須密切遵循 WAI ARIA 編寫 做法：這份指南 解釋並顯示 ARIA，這是易於存取的豐富網際網路應用程式 標準。如果不熟悉 ARIA， 請前往說明中心查看 WebFundamentals。 每個元件都會連結至編寫做法的相關章節。雖然 有鑑於此，我們建議您閱讀 實作程式碼之前的練習。
成效
在網路開發中，「效能」一詞可套用至
有些事物就 <howto> 而言，效能主要是指動畫
持續 60 FPS 執行，甚至在行動裝置上
視覺化彈性
請盡可能讓元件設定樣式，除了版面配置或用於指出 會處於所選或有效狀態這是為了讓實作看起來富有彈性 且焦點明確由於我們不花時間裝飾裝飾，因此將程式碼的範圍限制在 是讓元件函式的必要函式是否需要任何樣式 為了讓元件正常運作，樣式會以註解標記 解釋原因
可維護的程式碼
如 HowTo：元件是一個參照 我們投入更多時間，撰寫易讀又容易理解的內容 且內容密集加註
Non-Goal
成為程式庫 / 架構 / 工具包
<howto> 元件未發布於 npm、Beater 或任何其他平台
因為這類物件不會用在正式環境為了方便說
因此，我們採用新型 JavaScript API，並支援新型程式碼，
導入 Web 元件標準的瀏覽器。個人中心
並根據您的需求調整程式碼
。
具回溯相容性
請勿直接依賴程式碼，我們也可能 大幅變更任何元素的實作和 API 隨時可用。我們可以透過這個即時資源分享 探索及討論建構網路 UI 的最佳做法。
提供完整資訊
我們目前不會 (也可能不會) 實作「所有」*可自訂的元件
該文件。不過，重複使用內部 AI 開發原則
其他 <howto> 元件中的元件應能讓讀取器實作任何元件
與缺少的鍵結