[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
[HTML5] Render Hello World Text with Custom Elements的更多相关文章
- window 属性：自定义元素（custom elements）
概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...
- HTML Custom Elements (v1)
HTML Custom Elements (v1) https://developers.google.com/web/fundamentals/web-components/customelemen ...
- Web Components之Custom Elements
什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...
- 自定义元素（custom elements）
记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...
- 使用custom elements和Shadow DOM自定义标签
具体的api我就不写 官网上面多 如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码. <!DOCTYPE html> <html lang="en&q ...
- HTML Custom Elements & valid name
HTML Custom Elements & valid name valid custom element name https://html.spec.whatwg.org/multipa ...
- Knockoutjs：Component and Custom Elements（翻译文章）
Knockoutjs 的Components 是一种自定义的组件,它以一种强大.简介的方式将你自己的ui代码组织成一种单独的.可重用的模块,自定义的组件(Component)有以下特点: 1.可以替代 ...
- webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件
直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...
- [Polymer] Custom Elements: Styling
Code: <dom-module id="business-card"> <template> <div class="card" ...
随机推荐
- HashMap扩容函数解读
void resize(int newCapacity) { Entry[] oldTable = table; int oldCapacity = oldTable.length; if (oldC ...
- 【反演复习计划】【51nod1594】Gcd and Phi
现在感觉反演好多都是套路QAQ…… #include<bits/stdc++.h> using namespace std; ; typedef long long ll; int n,c ...
- 【bzoj2242】计算器
#include<bits/stdc++.h> #define inf 1000000000 using namespace std; typedef long long ll; ?a:g ...
- web页面的点对点复制粘贴
js-code如下: //复制抵押人信息 function copyDYR(obj){ var customerType_paste=$(obj).parent().find("[name$ ...
- 解决Eclipse明明有错误，却不能显示错误红叉的方法，eclipse不能显示错误
出现这情况的原因是因为java文件的错误太多,eclipse停止编译.解决方法如下 1.勾选自动编译功能 2.clean工程 3.取消“abort build when build path erro ...
- 计算器（丑陋版 and 加法专用版）
from tkinter import * win = Tk() win.geometry('500x300+400+300') win['bg'] = '#0099ff' win.title('魔方 ...
- Delphi Socket通信及多线程编程总结
http://cxhblog.blog.sohu.com/41930676.html 一.Socket通信: Delphi在ScktComp单元中对WinSock进行了封装,该单元提供了TAbstra ...
- Burpsuite使用技巧
在bp任意窗口中,选中需要转码的字符串,按ctrl+b,则可以被转换成base64编码
- log4j笔记：升级2.X版本的日志滚动问题
因为slf4j依赖的log4j在流量大的时候总遇到多线程引起的死锁问题,升级到log4j2.x版本.原来的log4j.properties配置文件已经不被log4j2支持了,需要改写为log4j2.x ...
- Forward与include的区别
Forward与include的区别 <jsp:include>标签用于把另外一个资源的输出内容插入进当前JSP页面的输出内容之中,这种在JSP页面执行时的引入方式称之为动态引入. < ...