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

[HTML5] Render Hello World Text with Custom Elements的更多相关文章

  1. window 属性：自定义元素（custom elements）

      概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...

  2. HTML Custom Elements (v1)

    HTML Custom Elements (v1) https://developers.google.com/web/fundamentals/web-components/customelemen ...

  3. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  4. 自定义元素（custom elements）

    记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...

  5. 使用custom elements和Shadow DOM自定义标签

    具体的api我就不写 官网上面多  如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码. <!DOCTYPE html> <html lang="en&q ...

  6. HTML Custom Elements & valid name

    HTML Custom Elements & valid name valid custom element name https://html.spec.whatwg.org/multipa ...

  7. Knockoutjs：Component and Custom Elements（翻译文章）

    Knockoutjs 的Components 是一种自定义的组件,它以一种强大.简介的方式将你自己的ui代码组织成一种单独的.可重用的模块,自定义的组件(Component)有以下特点: 1.可以替代 ...

  8. webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件

    直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...

  9. [Polymer] Custom Elements: Styling

    Code: <dom-module id="business-card"> <template> <div class="card" ...

随机推荐

  1. tcpip概述

    网络协议通常分为不同层次进行开发,每一层分别负责不同的通信功能.一个类似TCPIP的协议簇是一组不同层次上的多个协议的组合.TCPIP通常被认为是一个四层协议系统,分为:应用层(telnet/FTP/ ...

  2. jQuery，月历，左右点击事件实现月份的改变

    html页面: <div class="recordbriefing-title-top-body"> <span class="record-left ...

  3. JavaScript的for循环语句

    语法格式 for(初始化值;循环的条件;每一次循环的递增值){ // 循环的条件结果为true,则执行循环体中的代码 } 示例(打印出1-10之间的整数): for(var a=1;a<=10; ...

  4. 【python】抄写爬淘宝已买到的宝贝的代码

    教程地址:http://cuiqingcai.com/1076.html 这一篇掌握的不好.虽然代码可以跑,但是里面的很多东西都一知半解.需要有空的时候系统整理. 原代码中的正则表达式已经失效了,我自 ...

  5. hdu 1364(差分约束)

    King Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12056   Accepted: 4397 Description ...

  6. django CXRF介绍

    CSRF(Cross-site request forgery)跨站请求伪造,是攻击者利用用户的身份操作用户帐户的一种攻击方式.和XSS攻击一样,存在巨大的危害性. 一.攻击方法 1.低级的CXRF攻 ...

  7. mysql having的用法

    having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句前.而 having子句在聚合后对组记录进行筛选. ...

  8. 牛客网 小白赛4 A三角形【贪心】

    [前驱]:在指定长度的棍子中找到能组成最大周长三角形的三根棍子 链接:https://www.nowcoder.com/acm/contest/134/A 来源:牛客网 题目描述 铁子从森林里收集了n ...

  9. ActiveMQ学习总结

    一.消息中间件的产生的背景 1.在网络通讯中,Http请求默认采用同步请求方式,基于请求与响应模式 2.在客户端与服务器进行通讯时,客户端调用服务端接口后,必须等待服务端完成处理后返回结果给客户端才能 ...

  10. 树链剖分【p2568】[SDOI2011]染色

    Description 给定一颗有\(n\)个节点的无根树和\(m\)个操作,操作有\(2\)类: 1.将节点\(a\)到节点\(b\)路径上所有点染成颜色\(c\) 2.询问节点\(a\)到节点\( ...