[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" ...
随机推荐
- Oracle基础 11 约束 constraints
--主.外键约束 create table t( id int primary key); create table t1( id int references t(id)); 或者create ...
- MongoDB多集合排序的一种实现
需求 假设有三个类型有所不同的表,saleorders.careorders.repairorders,表中有storeId信息,用于关联其所属的门店stores表,现在有个需求是要将这三个表集中展示 ...
- Selenium 多窗口元素定位处理
以下文章来自于 上海-悠悠的博客 <Selenium2+python自动化13-多窗口.句柄(handle)> 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作, ...
- JDK+Tomcat+MySql环境配置—linux
Yum安装和jsp安装环境搭建 Yum安装手册: 第一步:在root用户下解压Yum安装包 ,输入命令: unzip yum.zip.
- hdu 5748(LIS)
Bellovin Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- 前端读者 | 别人写的css，你敢用吗？
本文来自@yeaseonzhang:链接:http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84cs ...
- tomcat虚拟主机
直接看配置文件吧,有点基础的都懂 <Host name="localhost" appBase="webapps" unpackWARs="fa ...
- Ubuntu开机启动的方式
方法一:--------------------------------------------------1. 在/etc/init.d/下放置启动脚本,比如postgresqlroot@ubunt ...
- 23、Flask实战第23天：Flask-Restful
Restful API规范 restful api是用于前端和后台进行通信的一套规范.使用这个规范可以让前后端开发变得更加轻松. 协议 采用http或者https 数据传输格式 数据之间传输的格式应该 ...
- Gitlab运维
安装Gitlab 新建 /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] name=gitlab-ce baseurl=http://mirrors.tuna.t ...