[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" ...
随机推荐
- Mysql启动服务提示系统找不到指定的文件
Mysql启动服务: C:\Windows\system32>net start mysql发生系统错误 2. 系统找不到指定的文件. 怎么还是报这个错?难道不是由于配置的原因?对,不是由于上面 ...
- 【C语言】++(a++)的写法是错的
http://bbs.csdn.net/topics/390764053 a++得到的是一个右值,++操作需要的是一个左值. ------------------------------------- ...
- 使用maven进行Javadoc下载
project -> maven -> Download Sources and Download JavaDocs
- springBoot Feign Hystrix Dashboard
1.引入依赖 <!-- 引入关于 hystrix Dashboard的依赖 --> <dependency> <groupId>org.springframewor ...
- Unable to connect to vulnerability scanner
问题: "Unable to connect to vulnerability scanner. If the system has been updated recently the ...
- [python] 如何将unicode字符串转换为中文
答案:(http://stackoverflow.com/) ps:这个网站解决了我好多问题啊,大家多上 >>>s='\u9648\u4f1f\u9706\u5176\u5b9e\u ...
- python的ConfigParser读取设置配置文件
python 读写配置文件在实际应用中具有十分强大的功能,在实际的操作中也有相当简捷的操作方案,以下的文章就是对python 读写配置文件的具体方案的介绍,望你浏览完下面的文章会有所收获. pytho ...
- web.input()和web.data() 遇到特殊字符
使用web.py的时候,web.input()和web.data() 都可以接收用户从浏览器端输入的参数. web.input()方法返回一个包含从url(GET方法)或http header(POS ...
- Socket学习总结系列(一) -- IM & Socket
写在准备动手的时候: Socket通讯在iOS中也是很常见,自己最近也一直在学习Telegram这个开源项目,Telegram就是在Socket的基础上做的即时通讯,这个相信了解这个开源项目的也都知道 ...
- ganglia笔记:rrd数据库
为了给ganglia监控的数据加上报警的功能,在jenkins里加了一个定时job,运行报警的脚本.脚本需要对ganglia记录的数据进行分析,以下是一点粗浅的理解. rrdtool的本质是用于画图的 ...