[HTML5] Render Hello World Text with Custom Elements

2019-01-16 15:44:00

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