Define custom element to import in html
When using vanilla HTML + CSS we sometimes want to split HTML on files but do not use powerful and hard solutions
Add link to preload external html file and define-html script in head:
<head>
<!-- Other tags here -->
<link rel="preload" href="app-content.html" as="fetch" crossorigin />
<script src="https://unpkg.com/define-html" type="module"></script>
</head>Where app-content.html is:
<template>
Lorem ipsum
</template>So later you can use include your template with:
<app-content></app-content>- Read attribute values
- Make conditional elements
- Full slot support
- Full style encapsulation
- Optionally enable shadow root
For the framework to work, you either need to use some static server (e.g. Live Server for VS Code) or use a compiler (see below).
Additionally, you can compile your components inside your pages.
That may be useful when your run your app in production and you want to reduce load time for your users.
npx --yes define-htmlor
bunx --bun define-htmlThis will create dist folder with the output files. Also, it will copy runtime and replace it in all pages.
This project uses Bun as a build tool and package manager.
Apache-2.0