title: JSF rerender composite component: insertChildren problems
body: <p>I'm making my first composite component in JSF but I am stumped by a rerender that behaves oddly. Here is the component implementation (it's meant to be a popup):</p>
  
  <pre><code>    &lt;composite:implementation&gt;
      &lt;h:outputScript name="nb-popup.js" library="js"/&gt;
      &lt;h:outputStylesheet name="nb-popup.compiled.css" library="style"/&gt;
      &lt;div id="#{cc.clientId}_container" class="nb_popup_container"&gt;
          &lt;div style="width:#{cc.attrs.width};height:#{cc.attrs.height};" id="#{cc.clientId}" class="nb_popup"&gt;
              &lt;div id="#{cc.clientId}_header" class="nb_popup_header"&gt;
                  &lt;span class="nb_popup_header_content"&gt;
                      &lt;composite:renderFacet name="header"/&gt;
                  &lt;/span&gt;
                  &lt;span class="nb_popup_header_controls"&gt;
                      &lt;composite:renderFacet name="controls"/&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="#{cc.clientId}_content" class="nb_popup_content"&gt;
                  &lt;composite:insertChildren/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;popup('#{cc.clientId}');&lt;/script&gt;
  &lt;/composite:implementation&gt;
  </code></pre>
  
  <p>For example let's say we have:</p>
  
  <pre><code>&lt;nb:popup id="extract"&gt;
      test
  &lt;/nb:popup&gt;
  </code></pre>
  
  <p>The generated HTML is OK:</p>
  
  <pre><code>    &lt;div id="extract_container" class="nb_popup_container"&gt;
          &lt;div style="width:auto;height:auto;" id="extract" class="nb_popup"&gt;
              &lt;div id="extract_header" class="nb_popup_header"&gt;
                  &lt;span class="nb_popup_header_content"&gt;
                  &lt;/span&gt;
                  &lt;span class="nb_popup_header_controls"&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="extract_content" class="nb_popup_content"&gt;
                test
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now suppose I have a button:</p>
  
  <pre><code>    &lt;h:commandLink value="reload"&gt;
          &lt;f:ajax render=":extract"/&gt;
      &lt;/h:commandLink&gt;
  </code></pre>
  
  <p>After pressing it, I get the following partial response where the actual content is clearly not where it's supposed to be:</p>
  
  <pre><code>    &lt;div id="extract_container" class="nb_popup_container"&gt;
          &lt;div style="width:auto;height:auto;" id="extract" class="nb_popup"&gt;
              &lt;div id="extract_header" class="nb_popup_header"&gt;
                  &lt;span class="nb_popup_header_content"&gt;
                  &lt;/span&gt;
                  &lt;span class="nb_popup_header_controls"&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="extract_content" class="nb_popup_content"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;popup('extract');&lt;/script&gt;
      test
  ]]&gt;
  </code></pre>
  
  <p>Now suppose I move the insertChildren to the header:</p>
  
  <pre><code>            &lt;div id="#{cc.clientId}_header" class="nb_popup_header"&gt;
                  &lt;span class="nb_popup_header_content"&gt;
                      &lt;composite:renderFacet name="header"/&gt;
                  &lt;composite:insertChildren/&gt;
                  &lt;/span&gt;
                  &lt;span class="nb_popup_header_controls"&gt;
                      &lt;composite:renderFacet name="controls"/&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The initial load is again as it should be:</p>
  
  <pre><code>            &lt;div id="extract_header" class="nb_popup_header"&gt;
                  &lt;span class="nb_popup_header_content"&gt;
           test
  
                  &lt;/span&gt;
                  &lt;span class="nb_popup_header_controls"&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>But on reload the content is moved once again:</p>
  
  <pre><code>            &lt;div id="extract_header" class="nb_popup_header"&gt;
                  &lt;span class="nb_popup_header_content"&gt;
                  &lt;/span&gt;
                  &lt;span class="nb_popup_header_controls"&gt;
      test
  
                  &lt;/span&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Any idea what might be causing this seemingly random placement of the insertChildren after an ajax rerender?</p>