zoukankan      html  css  js  c++  java
  • [HTML5] Render Hello World Text with Custom Elements

    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

  • 相关阅读:
    javascript 数字格式化
    spring-cloud blogs
    rabbitmq python
    centos7下 安装mysql
    hue install
    d3 document
    elastichq 离线安装
    elasticsearch agg
    elastichq auto connect
    Go Hello World!
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10277501.html
Copyright © 2011-2022 走看看