Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Here is an example of web component, The web component can be deployed in github page and source code is available for fork.
- Create a Javascript file and define a class
class MyFirstWebComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hi Pradeep Kumar Saraswathi</h1>`;
}
}
customElements.define('my-first-web-component', MyFirstWebComponent);
- Create a html file to incluide JS code that creates a web component
<!doctype html>
<html>
<head>
<title>This is my first web component!</title>
<script src="MyFirstWebComponent.js"></script>
</head>
<body>
<my-first-web-component></my-first-web-component>
</body>
</html>
- If you want to try online fork this repo. and deploy it as a github page
https://github.com/pradeepin2/create-web-component/tree/main
