所謂的「自訂JSF元件」是一個概略的稱呼，事實上，一個JSF元件包括了三個部份：Tag、Component 與Renderer。
Tag即之前一直在使用的JSF標籤，類似於HTML標籤，JSF標籤主要是方便網頁設計人員進行版面配置與資料呈現的一種方式，實際的處理中，JSF標籤的目的在於設定Component屬性、設定驗證器、設定資料綁定、設定方法綁定等等。
Component的目的在於處理請求，當請求來到伺服端應用程式時，每一個Component都有機會根據自己的client id，從請求中取得屬於自己的值，接著Component可以將這個值作處理，然後設定給綁定的bean。
當請求來到Web應用程式時，HTTP中的字串內容可以轉換為JSF元件所需的值，這個動作稱之為解碼（decode），相對的，將JSF 元件的值轉換為HTTP字串資料並送至客戶端，這個動作稱之為編碼（encode），Component可自己處理編碼、解碼的任務，也可以將之委託給 Renderer來處理。
當您要自訂Component時，您可以繼承UIComonent或其相關的子類別，這要根據您實際要自訂的元件而定，如果您要自訂一個輸出元件，可以繼 承UIOutput，如果要自訂一個輸入元件，則可以繼承UIInput，每一個標準的JSF元件實際上都對應了一個 UIComponent的子類別，下圖為一個大致的類別繼承架構圖：
實際上要自訂一個元件是複雜的一件工作，您首先要學會的是一個完整的自訂元件流程，實際上要自訂一個元件時，您可以參考一下網路上的一些成品，例如 Apache MyFaces，接下來後面 的幾個主題所要介紹的，將只是一個自訂元件的簡單流程。
Renderer是一個可替換的元件，您的Component可以搭配不同的Renderer，而不用自行擔任繪製回應或解碼的動作，這會 讓您的Component可以重用，當您需要將回應從HTML轉換為其它的媒介時（例如行動電話網路），則只要替換Renderer就可以了，這是一個好 處，或者您可以簡單的替換掉一個Renderer，就可以將原先簡單的HTML回應，替換為有JavaScript功能的Renderer。
當您開始接觸自訂元件時，您會開始接觸到JSF的框架（Framework），也許有幾個類別會是您經常接觸的：
- javax.faces.component.UIComponent
自訂Component所要繼承的父類別，但通常，您是繼承其子類別，例如UIInput、UIOutput等
等。
- javax.faces.webapp.UIComponentTag
自訂JSF標籤所要繼承的父類別，繼承它可以幫您省去許多JSF標籤處理的細節。
- javax.faces.context.FacesContext
包括了JSF相關的請求資訊，您可以透過它取得請求物件或請求參數，或者是
javax.faces.application.Application物件。
- javax.faces.application.Application