The real extension of XForms happens here. The main stylesheet includes different stylesheets for different extended component, such as tabs, menus, charts, etc.

These components mainly replace their Extended XForms code with proper XForms code. For example, for a video component, the main stylesheet we would have:

<xsl:include href="xx-video.xsl"/>

And in xx-video.xsl:

<xsl:template match="xx:video">
  <xhtml:video controls="controls">
    <xsl:attribute name="src">{<xsl:value-of select="@src" />}</xsl:attribute>
  </xhtml:video>
</xsl:template>

This converts this Extended XForms code:

<xx:video src="instance('test-data')/video" />

To XForms code:

<xhtml:video controls="controls" src="{instance('test-data')/video}" />

The component stylesheet can also hook to the template modes applied by the main stylesheet as needed. For example, we can use the model mode to add data specific to video components:

<xsl:template match="/" mode="model" priority="10">
  <video>
    <curtently-playing>none</curtently-playing>
  </video>
  <xsl:next-match />
</xsl:template>

The same can be done with the other modes: