Skip to content

Instantly share code, notes, and snippets.

@justinfagnani
Last active November 4, 2025 18:56
Show Gist options
  • Select an option

  • Save justinfagnani/33c83d8b886e3ed2c362911263e40080 to your computer and use it in GitHub Desktop.

Select an option

Save justinfagnani/33c83d8b886e3ed2c362911263e40080 to your computer and use it in GitHub Desktop.
HTML module use case examples

HTML modules

Using the HTML modules

<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment