[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" ...
随机推荐
- WPF第三方控件盘点
WPF统一的编程模型.语言和框架,实现了界面设计人员和开发人员工作可以分离的境界,鉴于WPF强大的优势,且一直是开发者关注的地方,下面和大家分享基于WPF项目开发需要用到的第三方控件,包括业界最受好评 ...
- Jxl、JxCell图表导出功能的实现
最近接触过许多报表导出功能,也用过多种工具进行导出功能的实现,但对于图表的导出一直没有仔细的去展开研究和探讨,直到最近略微整理了下这方面的需求和技术攻克. 首先导出excel功能的实现主要有JXL.J ...
- 《Java编程思想》笔记 第十五章 泛型
1 泛型 “泛型”意思就是适用于许多类型. 使用泛型的目的之一: 指定容器持有什么类型,让编译器确保正确性,而不是在运行期发现错误. 这个容器可以看成是有其他类型对象作为成员的类,而不单单只是JDK中 ...
- Selenium2+python自动化61-Chrome浏览器(chromedriver)【转载】
前言 selenium2启动Chrome浏览器是需要安装驱动包的,但是不同的Chrome浏览器版本号,对应的驱动文件版本号又不一样,如果版本号不匹配,是没法启动起来的. 一.Chrome遇到问题 1. ...
- Burpsuite使用技巧
在bp任意窗口中,选中需要转码的字符串,按ctrl+b,则可以被转换成base64编码
- magento 搬家
1.删除浏览记录: log_customer log_visitor log_visitor_info log_url log_url_info log_quote report_viewed_pro ...
- api接口思路介绍
现在很流行api了,但各种api做法不一样,下面我整理了一些自己的想法,也是看了各大门户网站开放的api应用想到的,与大家分享分享,高手跳过. API(Application Programmin ...
- PHP实现支付宝即时到账功能
本文实例为大家分享了PHP支付宝即时到账功能的实现代码,供大家参考,具体内容如下 首先需要下载即时到账交易接口,传送门https://doc.open.alipay.com/doc2/detail?t ...
- 【ZOJ】3785 What day is that day? ——KMP 暴力打表找规律
转自:http://www.cnblogs.com/kevince/p/3887827.html 首先声明一下,这里的规律指的是循环,即找到最小循环周期. 这么一说大家心里肯定有数了吧,“不就是nex ...
- HDU 多校1.8