npm: npm i html-modul
cdn: https://cdn.jsdelivr.net/npm/html-modul
Implementation of how native HTML modules could work. Based on discussions at HTML Modules.
<!-- index.html -->
<script type="module" src="https://cdn.jsdelivr.net/npm/html-modul"></script>
<!-- import via link, runs scripts in HTML module -->
<link rel="preload" href="./counter.html" as="fetch" crossorigin>
<link rel="html-module" href="./counter.html">
<!-- OR -->
<!-- import via script -->
<script type="module">
const counterModule = await importHTMLModule('./counter.html');
console.log(counterModule.document);
console.log(counterModule.counter.default);
</script>
<w-counter count="0"></w-counter><!-- counter.html -->
<script type="module" export="counter">
const htmlModule = getCurrentHtmlModule(import.meta.url);
const currentDocument = htmlModule.document ?? document;
const template = currentDocument.querySelector('template');
// rest of code...
export default WCounter;
</script>
<template>
<button>+</button>
<div>0</div>
<button>-</button>
</template>