This project is meant to enable component based workflows within simple HTML files using only vanilla JavaScript.
Live Demo: https://adir-sl.github.io/compo-demo
- Different HTML files store different components.
- components can be reused with different props.
- CSS can be scoped to the component it came from.
- Easy to use and require no dependencies.
Download the compo.js or use it as a link to this GitHub repo.
Always put the <script> tag linking to it at the end of your <body> tag.
<script src="https://adir-sl.github.io/compojs/compo.js"></script>OR
<script src="compo.js"></script>All custom tags should be hyphenated eg. button-primary, custom-input, radoi-group etc.
This library will take code like:
<button-primary>...</button-primary>and replace it with the corresponding file named button-primary.html.
Also the CSS coming from the file named button-primary.html should be scoped to not affect other buttons.
You can also add props to change some properties in the component you're loading.
All props should be inside curly brackets eg. {prop}.
In your host file:
<button-primary {label}="button-1">...</button-primary>
<button-primary {label}="button-2">...</button-primary>
<button-primary {label}="button-3">...</button-primary>In your component file (named button-primary.html):
<button>{label}</button>This will result in 3 buttons with numbered labels, all loaded from the same component file (button-primary.html).
This library is still under active development.
If you find any bugs or issues, please let me know.
It is free to use and being maintained by a single developer in his free time.
Code and documentation copyright 2023 Adir-SL. Code released under the MIT License.