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. git应用基础配置

    1.注册github账号.注册的时候会要求输入用户名和email这是配置git必须的要素 2.在使用git的时候首先需要把注册时候配合的用户名和密码填在git仓库的配置文件里,如下 harvey@ha ...

  2. 肢解 HTTP 服务器构建

    更好阅读请戳 这里 1. 最简单的 http 服务器 // server.js var http = require("http"); http.createServer(func ...

  3. WPF中使用WPFMediaKit视频截图案例

    前台 代码: <Window x:Class="WpfAppWPFMediaKit.MainWindow" xmlns="http://schemas.micros ...

  4. Selenium2+python自动化54-unittest生成测试报告（HTMLTestRunner）【转载】

    前言 批量执行完用例后,生成的测试报告是文本形式的,不够直观,为了更好的展示测试报告,最好是生成HTML格式的. unittest里面是不能生成html格式报告的,需要导入一个第三方的模块:HTMLT ...

  5. MATLAB求解方程与方程组

    1.      solve函数 ①求解单个一元方程的数值解 syms x; x0 = double(solve(x +2 - exp(x),x)); 求x+2 = exp(x)的解,结果用double ...

  6. yii2.0在model里自定义数据表

    无需多言,直接撸代码 class Zhuanjia extends \yii\db\ActiveRecord { public static function tableName() { return ...

  7. 微信商户现金红包api php

    微信开发文档: 现金红包:https://pay.weixin.qq.com/wiki/doc/api/tools/cash_coupon.php?chapter=13_5 裂变红包:https:// ...

  8. UESTC 1599.wtmsb-STL(priority_queue)

    wtmsb Time Limit: 1000/100MS (Java/Others) Memory Limit: 131072/131072KB (Java/Others) 这天,AutSky_Jad ...

  9. 51nod 1283 最小周长【注意开根号】

    1283 最小周长 题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 一个矩形的面积为S,已知该矩形的边长都是整数,求所有 ...

  10. HDU 2050 折线分割平面（转）

    折线分割平面 http://acm.hdu.edu.cn/showproblem.php?pid=2050 Problem Description 我们看到过很多直线分割平面的题目,今天的这个题目稍微 ...