Custom Element for adding a super simple way to import external HTML!
<!-- 1. include the script in your project --><scriptsrc="https://unpkg.com/html-import-element@1"></script><!-- 2. point to your external HTML files --><html-importsrc="./title.html"></html-import><!-- 3. PROFIT! -->Just include the following script in your page:
<scriptsrc="https://unpkg.com/html-import-element@1"></script>- Supports inline HTML
- Supports inline CSS (
<style>...</style>) - Supports external CSS (
<link rel="stylesheet">) - Supports inline script (
<script>...</script>) - Supports external script (
<script src="...">)
<!-- title.html --><h1>HTML Imports are super cool!</h1><!-- index.html --><htmllang="en"><head><scriptsrc="https://unpkg.com/html-import-element@1"></script></head><body><html-importsrc="./title.html"></html-import></body></html>That <body> will turn into:
<body><h1>HTML Imports are super cool!</h1></body>And that's it! Read the source code if you want to see what's going on, but we do a basic fetch, and then inject the content in the page.
You can run npm start, and navigate to the /test or /example pages, which validate and show the project use-cases.