zkoss/zk

<zk>
<zscript>
public class MyLabel extends Label {
    public void onCreate() {
        setValue(getParent().toString());
    }
}
</zscript>
<style>
#zk_log {
    height: 500px !important;
}
</style>
    <div id="host" apply="org.zkoss.zktest.zats.zuti.composer.ShadowComposer">
        <if test="true">
            <if test="true">
                <div style="background:yellow"><label use="MyLabel"/></div>
            </if>
            <if test="true">
                <div style="background:yellow"><label use="MyLabel"/></div>
            </if>
            <div style="background:yellow;"><label use="MyLabel"/></div>
            <if test="true">
                <if test="true">
                    <div style="background:yellow"><label use="MyLabel"/></div>
                </if>
                <div style="background:yellow"><label use="MyLabel"/></div>
            </if>
            <if test="true">
                <div style="background:yellow"><label use="MyLabel"/></div>
            </if>
            <div style="background:yellow"><label use="MyLabel"/></div>
            <if test="true">
                <if test="true">
                    <div style="background:yellow"><label use="MyLabel"/></div>
                </if>
                <div style="background:yellow"><label use="MyLabel"/></div>
            </if>
            <if test="true">
                <div style="background:yellow"><label use="MyLabel"/></div>
            </if>
            <div style="background:yellow"><label use="MyLabel"/></div>
            <if test="true">
                <if test="true">
                    <div style="background:yellow"><label use="MyLabel"/></div>
                </if>
                <div style="background:yellow"><label use="MyLabel"/></div>
            </if>
        </if>
    </div>
    <button label="Print Shadow Root Info" id="btn" />
    <button label="Revmoe Index 5" onClick='host.getChildren().get(5).detach()'/>
    <button label="Remove ShadowRoot's firstChild" id="removeFirst"/>
    <button label="Remove ShadowRoot's lastChild" id="removeLast"/>
    <separator/>
    
    <button label="Add a component before ShadowRoot's firstChild" id="addBeforeFirst"/>
    <button label="Add a component after ShadowRoot's firstChild" id="addAfterFirst"/>
    <button label="Add a component before ShadowRoot's lastChild" id="addBeforeLast"/>
    <button label="Add a component after ShadowRoot's LastChild" id="addAfterLast"/>
    <debugger rootId="host"/>
</zk>