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.