"A pure JS web component, if you don't want to use a framework like Angular, ReactJs just for that. Simple and straight to the point."
They are pieces of code that you can attach into your DOM. Usually they come in separated HTML files and you import them as you want. Their purpose is to make websites more maintainable, easy to read and delightful.
-
You can import pieces of code inside your html files simple by using
<app-sample-tag></app-sample-tag> -
You'll be able to style them as you wish, like you were running an Angular 6 application
-
And the best part, it's small, easy to understand and flexible as you want it to be!
Live preview Pure JS Web Component - Running app
<!DOCTYPE html>
<html>
<head>
<!-- IMPORT THE CORE MODULES -->
<script src="core/modules.js"></script>
</head>
<body>
<!-- WRITE YOUR TAGS AS BELOW -->
<first-sample-tag></first-sample-tag>
<second-sample-tag></second-sample-tag>
<!-- you can style the tags and add outer divs too -->
</body>
</html>/* here goes the append component */
const components = [
['core/components/append-component.js'],
];
/* TYPE THE PATH OF YOUR COMPONENT TAGS */
const modules = [
['core/app/first-sample-tag/first-sample-tag.js'],
['core/app/second-sample-tag/second-sample-tag.js'],
];
/* code that import the files goes below (be sure to modify it) */
. . ./* TYPE THE PATH TO YOUR TAG COMPONENT */
(function () {
appendComponent('core/app/first-sample-tag');
})();
/* your tag component code goes below */
. . .. . .
write your html code here and be happy :)
. . .core/components/append-component.js
Folder structure.
Sample files.
Web Page (Web Component running).
npm install -g http-server
http-server ./ -p 80
or