Creating Web Component and deploying to github page!

Posted by : on

Category : Web Component, UI, github page

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.

  1. 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);
  1. Create a html file to incluide JS code that creates a web component
<!doctype html>
    <title>This is my first web component!</title>
    <script src="MyFirstWebComponent.js"></script>
  1. If you want to try online fork this repo. and deploy it as a github page

About Pradeep Kumar Saraswathi
Pradeep Kumar Saraswathi

PMTS UI at Salesforce, based in California, United States

Email :

Website :

About Pradeep Kumar Saraswathi

Hi, Pradeep Kumar Saraswathi is PMTS (UI) at salesforce with 17+ years of experience in building UI (Builders) with multiple UI technologies that builds experiences and AI/ML, Generative AI enthusiast.