JSF includes and duplicate HTML IDs

Question

I have a main HTML page which includes detail.xhtml and duo.xhtml.

Now duo.xhtml also includes detail.xhtml, which results in duplicate IDs which of course it not working. What can I do to solve this problem? I don't want to manage redundant code.

Main:

<ui:composition ...>
  <ui:define name="center">
    <ui:insert name="insertDuo">
      <ui:include src="/includes/duo.xhtml" />
    </ui:insert>
...
<p:dialog header="x" widgetVar="detDialog" id="dlg" modal="true" appendTo="@(body)">
  <ui:insert name="insertDetail">
    <ui:include src="/includes/detail.xhtml" />
  </ui:insert>

Duo:

<ui:composition>
    <p:dialog header="y" widgetVar="newDuoDialog" id="newDuoDlg" modal="true" >
        <p:layout id="layout">

            <p:layoutUnit position="west">
                <ui:insert name="insertDetailStmt">
                    <h:form id="stmtDetailForm">
                        <ui:include src="/includes/detail.xhtml" />
                    </h:form>
                </ui:insert>
            </p:layoutUnit>

Detail:

<p:accordionPanel id="accordion">

Reference to components:

<p:commandButton value="z" update=":accordion:duoDlgForm2:pickList"/>

Answer 1

Thanks to BalusC, I was able to solve the problem. Just use

<f:subview id="fromMain">
    <ui:include src="/includes/regelDetail.xhtml" />
</f:subview>

and when referred from main, the element's name is fromMain:accordion