提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[HTML5] Render Hello World Text with Custom Elements

html5 with Text Hello World Elements Custom render
2023-09-14 09:00:49 时间

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

相关文章