You can apply the following steps while developing your own custom component.
Create a custom component class that does the following:
Overrides the getFamily method to return the component family, which is used to look up renderers that can render the component.
Includes the rendering code or delegates it to a renderer (explained in step 2).
Enables component attributes to accept expressions.
Queues an event on the component if the component generates events.
Saves and restores the component state.
Delegate rendering to a renderer if your component does not handle the rendering. To do this:
Create a custom renderer class by extending javax.faces.render.Renderer.
Register the renderer to a render kit.
Identify the renderer type in the component tag handler.
Write a tag handler class that extends javax.faces.webapp.UIComponentELTag. In this class, you need a getRendererType method, which returns the type of your custom renderer if you are using one (explained in step 2); a getComponentType method, which returns the type of the custom component; and a setProperties method, with which you set all the new attributes of your component.
The application architect does the work of registering the custom component and the renderer. See Registering a Custom Converter and Registering a Custom Renderer with a Render Kit for more information. Using a Custom Component discusses how to use the custom component in a JavaServer Faces page.