Facelets框架是建立在聚合关系上的。这意味着一个构件树可以拆分定义在多个页面中，并可以单独或作为一个整体来执行。其他的一些框架，例如Tapestry ，可以在一个页面中定义一个单独的构件，Facelets框架则可以把一个子构件树标记为一个composition。

标签之前的文本将被移除.
<ui:composition>
  #{dynamic.text}
  <h:inputText id="myText" value="#{foo.bar}"/>
</ui:composition>
标签之后的文本将被移除.

这意味着你的模板页面可以是一个包括了CSS定义的完整的XHTML文件，你可以使用你习惯的可视化工具来编辑，但Facelets框架会截掉<composition/>标签之外的所有东西。下面是在另一个文档中引入这个composition的例子:

...
<h:column>
  <ui:include src="/composition.xhtml"/>
</h:column>
...

这个composition被包含在一个<column/>标签/构件中。基于上面的例子，这个<h:column />构件将被分配两个子构件：#{dynamic.text}和<h:inputText/>。