The component tree generated by the use of wact:wrap is exactly the same as if you had manually written the wrapper html into one big file.

Some of the virtues of this are

The contents of the file where this paragraph is stored is wrapped by 'layout.html'. Additionally, each example that follows is wrapped by 'example.html'.

Hint: because the parser requires that html tags be balanced within each wact tag, the contents of wrapper files must balance.

This example shows how you can identify, at runtime, components inside wrappers. The following two bits of content are wrapped by the same wrapper file 'box.html'. To manipulate the components inside the wrapper, you must get them using view id of an enclosing component. In this case it is natural to give the wact:wrap tag a view id and use that.

Here's the first: Wrapped by the wact:wrap tag with wact:id="wrap1", it should be set red at runtime And the second: wrapped by the wact:wrap tag with wact:id="wrap2", it should be set blue at runtime

This is an example of nested wrapping using the same file. Again, using the wact:id of the relevant component can be used to manipulate components at runtime.

This is in the outer wrapper. The border should be set thicker at runtime. This is in the inner wrapper. The border should be set thinner at runtime.

This is an example of wrapping an input by a (quite idiosyncratic) wrapper file that contains a form. It is also an example of how one wrapper may contain many insertion points, of which you choose one when wrapping some content. In this case the insertion point is the the component with view id = "top".