Let's say we need to create a Web Component that does a very simple task of showing a heading and a paragraph inside it, and the name of the custom element should be <revamped-paragraph>. This is what the definition of this Web Component would look like:
//revampedParagraph.jsexport default class RevampedParagraph extends HTMLElement { constructor() { super(); // template ref and content let templateReference = document.querySelector('#revamped-paragraph-template'); let template = templateReference.content; // adding html from template this.append(template.cloneNode(true)); }}
Our index.html file, the file that imports this module, would look like this:
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <title>Revamped ...
