lega911/App.xht

## App.xht
<script>
  import Button from './button.xht';

  // able to create a component/block by JS
  function Custom($option) {
    return document.createTextNode('Custom JS-component');
  }

</script>

<!-- declare block "Local" and accept block Inner -->
{#Local Inner}
  <h1>some local fragment</h1>
  <Inner />
{/Local}

<!-- call Local and pass Button as inner -->
<Local Inner=Button />

<!-- call Custom -->
<Custom />

<!-- call Child -->
<Child Body=Local>  <!-- pass block Local as Body -->
  {#Header}title{/Header}  <!-- pass Header -->
</Child>

## Child.xht
<!-- accept blocks Body, Header -->
<script Body Header>
  import Field from './field.xht';
</script>

<!-- insert block Header -->
<Header />

<!-- insert block Body and pass Field as Inner -->
<Body Inner=Field />
	<script>
	import Button from './button.xht';

	// able to create a component/block by JS
	function Custom($option) {
	return document.createTextNode('Custom JS-component');
	}

	</script>

	<!-- declare block "Local" and accept block Inner -->
	{#Local Inner}
	<h1>some local fragment</h1>
	<Inner />
	{/Local}

	<!-- call Local and pass Button as inner -->
	<Local Inner=Button />

	<!-- call Custom -->
	<Custom />

	<!-- call Child -->
	<Child Body=Local> <!-- pass block Local as Body -->
	{#Header}title{/Header} <!-- pass Header -->
	</Child>
	<!-- accept blocks Body, Header -->
	<script Body Header>
	import Field from './field.xht';
	</script>

	<!-- insert block Header -->
	<Header />

	<!-- insert block Body and pass Field as Inner -->
	<Body Inner=Field />