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. 出现“error c4430缺少类型说明符-假定为int。注意C++不支持默认int

    出现这种错误的原因,是因为函数没有写返回值.是在VC6.0的工程转为高版本(VS2010)的时候经常出现的; #include <stdio.h> main() { printf(&quo ...

  2. mybatis获取表信息，以及遍历ResultSet

    @RunWith(SpringRunner.class) @SpringBootTest public class BravolinksCrmServerApplicationTests { @Aut ...

  3. 【C++】继承中的隐藏与覆盖

    没有访问控制符时默认为私有继承. 当基类中的某个函数有若干个重载版本,继承类中也实现了该函数的某个重载版本时,参数完全相同的基类版本被覆盖,基类的其他版本被隐藏. 1.若要在继承类中使用基类的被覆盖方 ...

  4. Selenium2+python自动化36-判断元素存在【转载】

    前言 最近有很多小伙伴在问如何判断一个元素是否存在,这个方法在selenium里面是没有的,需要自己写咯. 元素不存在的话,操作元素会报错,或者元素有多个,不唯一的时候也会报错.本篇介绍两种判断元素存 ...

  5. js的变量的有效域

    function test(o) { var i=0; if(typeof o=="object") { var j=1; for(var k=0;k<10;k++) { c ...

  6. Mysql错误：Every derived table must have its own alias

    Mysql报错:Every derived table must have its own alias    <缺少一个别名> 在子查询中经常会犯的错误 .这个别名其实没啥用途....  ...

  7. 洛谷 P2678 跳石头【经典二分答案/贪心】

    题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 NN 块岩石(不含起点和终点的岩石).在比赛过程中,选手们将从 ...

  8. 【ZOJ】3785 What day is that day? ——KMP 暴力打表找规律

    转自:http://www.cnblogs.com/kevince/p/3887827.html 首先声明一下,这里的规律指的是循环,即找到最小循环周期. 这么一说大家心里肯定有数了吧,“不就是nex ...

  9. 福州3中集训day5

    数论,zld神犇认为我们都学过数论的,讲了一波高端(入门?)操作,从扩展欧几里得开始,同余方程诸如此类,早晚得重修.连课件都没,拿着画图讲了一上午 sro_zld_orz 具体内容都记在本上. 还是说 ...

  10. 福州三中集训day1

    第一天感觉很是不友好,好在我是学过搜索之后才听的课,不然估计得死在教室…. 某zld犇犇讲的很是强?今天主要是讲枚举和DFS,几道经典题目讲完,还没到下课时间, 然后讲起了float. 有空整理一下吧 ...