Html Web Component vs Javascript Web Component

Posted by : on

Category : Web Component, HTML Web Component, Javascript Web Component

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.

TypeScript is a free and open-source high-level programming language that adds static typing with optional type annotations to JavaScript. It is designed for the development of large applications and transpiles to JavaScript

Here is an example of web component in Typescript, The web component can be deployed in github page and source code is available for fork.

  1. Create a Typescript 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);

document.body.innerHTML = `<my-first-web-component></my-first-web-component>`
  1. Create a html file to incluide Typescript code that creates a web component
<!doctype html>
    <title>This is my first web component!</title>
    <script type="text/typescript" src="script.ts"></script>
  1. Doing this will not work. As Typescript needs to be compiled into Javascript.

  2. So load the library that compiles the typescript and loads Javascript. Code is here

  3. So try online fork this repo and deploy it as a github page to see web component created in Typescript

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.