HowTo 元件
「HowTo: 元件」是實作常見 UI 模式的網頁元件集合。這些實作項目的目的是做為教育資源。您可以閱讀不同元件的密集註解實作內容，並從中學習。請注意，這些並非明確的 UI 程式庫，且「不應」在正式版中使用。
元件
<howto-checkbox>：代表表單中的布林選項。最常見的核取方塊類型是雙重類型，可讓使用者在兩個選項 (已勾選和未勾選) 之間切換。<howto-tabs>：將可見內容分割成多個面板，以限制可見內容。<howto-tooltip>：當元素接收鍵盤焦點或滑鼠游標懸停在元素上時，顯示與元素相關資訊的彈出式視窗。
目標
我們的目標是示範撰寫可靠元件的最佳做法，這些元件可供存取、效能高、可維護且易於設定樣式。每個元件都是完全獨立的，因此可做為參考實作。
無障礙設定
這些元件嚴格遵循 WAI ARIA 撰寫做法，這是一本指南，用來說明及顯示 ARIA，也就是無障礙互動式網路應用程式標準。如果您不熟悉 ARIA，請參閱我們的 WebFundamentals 說明文章。每個元件都會連結至相關的「作者作法」章節。雖然並非必要，但我們還是建議您在深入瞭解程式碼前，先閱讀「撰寫實務」一節。
成效
在網頁開發中，「效能」一詞可套用於多種情況。在 <howto> 的情況下，效能大多是指動畫持續以 60fps 執行，即使是在行動裝置上也是如此。
視覺彈性
除了版面配置或用於表示已選取或處於活動狀態的元件外，盡可能不要為元件設定樣式。這可讓實作內容在視覺上保持彈性和專注。我們不花時間在裝飾上，而是將程式碼限制在讓元件運作所絕對必要的範圍內。如果元件需要任何樣式才能運作，系統會在該樣式上加上註解，說明原因。
可維護的程式碼
由於「HowTo：元件」是參考實作項目，我們花了額外時間編寫易讀且易於理解的程式碼，並在程式碼中加入大量註解。
Non-Goal
是程式庫 / 架構 / 工具包
<howto> 元件不會發布至 npm、bower 或任何其他平台，因為這些元件並非用於實際工作環境。為了提供簡潔易讀的程式碼，我們使用新式 JavaScript API，並支援實作 Web 元件標準的新式瀏覽器。閱讀這些實作方式後，您就能根據自身需求調整程式碼。
回溯相容
請勿直接依賴該程式碼。如果我們發現更佳的實作方式，就會大幅變更任何元素的實作方式和 API。這是一項持續更新的資源，我們會在這裡分享、探索及討論建構網頁 UI 的最佳做法。
完整
我們目前並未 (且可能不會) 實作 WAI ARIA 編寫做法中可找到的*「所有」元件。不過，只要重複使用其他 <howto> 元件中使用的原則，讀者就能實作缺少的任何元件。