justinfagnani · November 4, 2025 18:56
diff --git a/0-readme.md b/0-readme.md
diff --git a/1-template.html b/1-template.html
 <!-- Export a template -->

 <!-- 
  Note: this is a template specific to Heximal (because of the bindings),
  so the consumer has to know how to use it
 -->
 <template export="my-template">
  <h2>Hello {{ name }}</h2>
 </template>
diff --git a/3-global-custom-element.html b/3-global-custom-element.html
 <!-- This is a side-effectful global component definition -->
 <h-define-element name="simple-greeter">
  <h-prop name="name"></h-prop>

  <style type="adopted-css">
    :host {
      color: blue;
    }
  </style>

  <template>
    <h1>Hello {{ name }}!</h1>
  </template>
 </h-define-element>
diff --git a/4-element-with-script.html b/4-element-with-script.html
 <h-define-element>
  <h-prop name="name"></h-prop>
  
  <template>
    <h1>Hello {{ name }}!</h1>
  </template>
  
  <script>
    import {HeximalElement} from 'heximal';

    // Important: For this to work, <h-define-element> needs to be able to get the
    // export object from this <script> tag. See https://github.com/whatwg/html/issues/7367
    export default class extends HeximalElement {
      connectedCallback() {
        super.connectedCallback();
        console.log('connected!');
      }
    }
  </script>
 </h-define-element>
diff --git a/4-scoped-custom-element.html b/4-scoped-custom-element.html
 <!-- This is a non-side-effectful component definition -->
 <h-define-element export="simple-greeter">
  <h-prop name="name"></h-prop>

  <style type="adopted-css">
    :host {
      color: blue;
    }
  </style>

  <template>
    <h1>Hello {{ name }}!</h1>
  </template>
 </h-define-element>
diff --git a/5-import-from-inline-script.html b/5-import-from-inline-script.html
 <!-- See https://github.com/whatwg/html/issues/7367 -->

 <script id="base-module" type="module">
  import {HeximalElement} from 'heximal';
  export class MyBaseElement extends HeximalElement {
    connectedCallback() {
      super.connectedCallback();
      console.log('connected!');
    }
  }
 </script>

 <h-define-element>
  <h-prop name="name"></h-prop>
  
  <template>
    <h1>Hello {{ name }}!</h1>
  </template>
  
  <script>
    import {MyBaseElement} from '#base-module';

    // This makes the <h-define-element> definition extend this class
    export default class extends MyBaseElement { /* ... */ }
  </script>
 </h-define-element>
diff --git a/6-export-from-script.html b/6-export-from-script.html
 <!-- This is in an HTML module -->

 <script export="*">
  // The HTML module now has an export of `foo`
  export const foo = 42;
 </script>
diff --git a/7-use-template.html b/7-use-template.html
 <script type="module" src="/js/heximal.js"></script>
 <script type="html" src="./template.html" id="template"></script>

 <!-- This is how you would call an imported Heximal template -->
 <template call="template#my-template" data="{{ {name: 'World'} }}"></template>
diff --git a/8-use-global-custom-element.html b/8-use-global-custom-element.html
 <script type="html" src="./global-custom-element.html"></script>

 <simple-greeter name="World"></simple-greeter>
diff --git a/9-use-scoped-custom-element.html b/9-use-scoped-custom-element.html
 <script type="html" src="./scoped-custom-element.html" id="element"></script>

 <!-- This is component uses the imported definition -->
 <h-define-element export="my-app">
  <!-- This defines "simple-greeter" in a scoped custom element registry used by my-app -->
  <h-element name="simple-greeter" definition="element#simple-greeter></h-element>

  <template>
    <simple-greeter name="World"></simple-greeter>
  </template>
 </h-define-element>
	<!-- Export a template -->

	<!--
	Note: this is a template specific to Heximal (because of the bindings),
	so the consumer has to know how to use it
	-->
	<template export="my-template">
	<h2>Hello {{ name }}</h2>
	</template>
	<!-- This is a side-effectful global component definition -->
	<h-define-element name="simple-greeter">
	<h-prop name="name"></h-prop>

	<style type="adopted-css">
	:host {
	color: blue;
	}
	</style>

	<template>
	<h1>Hello {{ name }}!</h1>
	</template>
	</h-define-element>
	<h-define-element>
	<h-prop name="name"></h-prop>

	<template>
	<h1>Hello {{ name }}!</h1>
	</template>

	<script>
	import {HeximalElement} from 'heximal';

	// Important: For this to work, <h-define-element> needs to be able to get the
	// export object from this <script> tag. See https://github.com/whatwg/html/issues/7367
	export default class extends HeximalElement {
	connectedCallback() {
	super.connectedCallback();
	console.log('connected!');
	}
	}
	</script>
	</h-define-element>
	<!-- This is a non-side-effectful component definition -->
	<h-define-element export="simple-greeter">
	<h-prop name="name"></h-prop>

	<style type="adopted-css">
	:host {
	color: blue;
	}
	</style>

	<template>
	<h1>Hello {{ name }}!</h1>
	</template>
	</h-define-element>
	<!-- See https://github.com/whatwg/html/issues/7367 -->

	<script id="base-module" type="module">
	import {HeximalElement} from 'heximal';
	export class MyBaseElement extends HeximalElement {
	connectedCallback() {
	super.connectedCallback();
	console.log('connected!');
	}
	}
	</script>

	<h-define-element>
	<h-prop name="name"></h-prop>

	<template>
	<h1>Hello {{ name }}!</h1>
	</template>

	<script>
	import {MyBaseElement} from '#base-module';

	// This makes the <h-define-element> definition extend this class
	export default class extends MyBaseElement { /* ... */ }
	</script>
	</h-define-element>
	<!-- This is in an HTML module -->

	<script export="*">
	// The HTML module now has an export of `foo`
	export const foo = 42;
	</script>
	<script type="module" src="/js/heximal.js"></script>
	<script type="html" src="./template.html" id="template"></script>

	<!-- This is how you would call an imported Heximal template -->
	<template call="template#my-template" data="{{ {name: 'World'} }}"></template>
	<script type="html" src="./global-custom-element.html"></script>

	<simple-greeter name="World"></simple-greeter>
	<script type="html" src="./scoped-custom-element.html" id="element"></script>

	<!-- This is component uses the imported definition -->
	<h-define-element export="my-app">
	<!-- This defines "simple-greeter" in a scoped custom element registry used by my-app -->
	<h-element name="simple-greeter" definition="element#simple-greeter></h-element>

	<template>
	<simple-greeter name="World"></simple-greeter>
	</template>
	</h-define-element>