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
Additionally, you can compile your components inside your pages.
npx --yes define-htmlor
bunx define-htmlThis will create dist folder with the output files.
This project uses Bun as a build tool and package manager.
Improve compiler:
- Copy define-html script itself
- Compile css
- Compile scripts
Apache-2.0