How to make reusable component in JSF?

Depending on what you are trying to implement, you could use some "backing component" (=a java class associated to your facelet composite component). See this post: http://weblogs.java.net/blog/cayhorstmann/archive/2010/01/30/composite-input-components-jsf

Still maybe, depending on what your are really doing, you could probably better define your composite components, mainly using more parameters and a better model for passing values (if needed). I'm lacking some knowledge of your app to give a better advice.

Not sure I understand you perfectly, but you might want to pass an argument to the componentComposition you build.

    main department : <my:comboChainComponent worksOn="#{page1Bean.bean1}" /> <!-- 2 select items will be rendered here -->
secondary department : <my:comboChainComponent worksOn="#{page1Bean.bean2}"/> <!-- another 2 select items will be rendered here -->

Hope it helps...

In JSF 2.0, creating composite components is a snap. Here is a good tutorial: http://weblogs.java.net/blog/driscoll/archive/2008/11/writing_a_simpl.html

Why don't use this kind of approach.

<mytag:combo id="combo1" 
         value="#{bean.firstData}" 
         model="#{globalBean.getList()}"
         update="form1:combo2"   />

<mytag:combo id="combo2" 
         value="#{bean.secondData}" 
         model="#{globalBean.getSubList(bean.firstData)}"  />

You can use composite attribute.

...
<composite:interface name="combo">
   ... define your attributes here
</composite:interface>

<composite:implementation>
<p:outputPanel id="content">
    <p:selectOneMenu id="select_menu_1" value="#{cc.attrs.value}">
         <f:selectItems value="#{cc.attrs.model}" />
        <p:ajax event="change" process="@this" update="#{cc.attrs.update}" />
    //add converter if you want 
    </p:selectOneMenu>
</p:outputPanel>
</composite:implementation>