andrexm / html-imports

Divide your HTML code into components easily.

html-imports

This project aims to allow the development of simple static pages, websites, and templates comfortably, without needing to use any huge library or framework for this purpose. With it, you do not need to edit a line of code in many files if you only need to change some minor stuff.

How to use it

To use it, add the script file inside the dist/ folder to your HTML page, and you can start creating components to avoid rewriting the same code in all of your pages. For instance, you can create a file named "navbar.html" to your navbar and, in the pages that use this component, just put the following code:

<app-include src="path-to-the-file/navbar"></app-include>

As you can see, you have to use the tag app-include to import your HTML file. Always remember to close that tag, or it may cause trouble. Note that, you do not have to put the file extension. If you open a script tag inside your component, the scripts inside it will not execute, but you can change this behavior by adding the 'inComponent' attribute to your script tag.

<ul>
    <li>Home</li>
    <li>About</li>
</ul>

<script inComponent>
    console.log('hey!');
</script>

Passing data to includes

To pass data to your include, add an i-* attribute to the app-include tag and insert in your code a tag with the same name:

index.html
<app-include src="src/home" i-title="This is the home page!"></app-include>

src/home.html
(...)
<i-title></i-title>