Custom Element for adding a super simple way to import external HTML!
<!-- 1. include the script in your project --> <script src="https://unpkg.com/html-import-element@1"></script> <!-- 2. point to your external HTML files --> <html-import src="./title.html"></html-import> <!-- 3. PROFIT! -->
Just include the following script in your page:
<script src="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 --> <html lang="en"> <head> <script src="https://unpkg.com/html-import-element@1"></script> </head> <body> <html-import src="./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.