Custom elements are fun technology. In this video, you will learn how to set one up and running in less than 2 minutes.
You'll learn how to create a Custom Web Element (that extends HTMLElement) that renders text to the browser and respond to a click event listener.
class MyCustomElement extends HTMLElement { constructor() { super(); this.addEventListener("mouseover", () => console.log("Hello World")); } //lifecycle connectedCallback() { this.innerHTML = `<h1>Hello Custom ELement</h1>`; } } window.customElements.define("zwt-element", MyCustomElement);
<!DOCTYPE html> <html> <head> <title>Custom Element</title> <meta charset="UTF-8" /> </head> <body> <div id="app"></div> <zwt-element [msg]="greeting" /> <script src="src/index.js"> </script> </body> </html>
More about custome element