自定义元素 v1：可重用网络组件
google文档 https://developers.google.cn/web/fundamentals/web-components/customelements
兼容性 https://caniuse.com/#search=custom
shadow DOM https://developers.google.cn/web/fundamentals/web-components/shadowdom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义组件</title>
<style>
ajanuw-title {
font-family: 'Consolas';
color: rgba(255, 68, 136, 1);
font-size: 22px;
display: block;
}
</style>
</head>
<body>
<div id="root">
<ajanuw-title a-title="hello alone"></ajanuw-title>
<ajanuw-title a-title="hello ajanuw"></ajanuw-title>
<ajanuw-title>
<strong slot="last-slot">go go go ..</strong>
</ajanuw-title>
<ajanuw-title>
<strong slot="inter-slot">go go go ..</strong>
</ajanuw-title>
<button is="ajanuw-button">click me</button>
<div class="btn">
</div>
</div>
<template id="shadow-template">
<style>
em {
contain: content;
font-family: Monaco, Consolase;
padding: 4px;
}
</style>
<!-- 模板是声明自定义元素结构的理想之选。 -->
<em>I'm in shadow dom!</em>
<slot name="inter-slot">[[default inner slot]]</slot>
<en>from template</en>
<slot name="last-slot">[[default last slot]]</slot>
</template>
<script>
class ajanuwTitle extends HTMLElement {
static get observedAttributes() {
return ['active'];
}
// 自定义元素
constructor(prop) {
// 创建或升级元素的一个实例。用于初始化状态、设置事件侦听器或创建 Shadow DOM
super(prop);
// this.setAttribute('title', '自定义组件')
this.addEventListener('pointerover', e => this.setAttribute('active', ''), false);
this.addEventListener('pointerout', e => this.removeAttribute('active'), false);
}
fadeOut() {
this.style.opacity = '.7';
}
fadeIn() {
this.style.opacity = '1';
}
get isActive() {
return this.hasAttribute('active');
}
connectedCallback() {
// `元素每次插入到 DOM 时都会调用`
if (this.hasAttribute('a-title')) {
this.textContent = this.getAttribute('a-title');
} else {
let shadowRoot = this.attachShadow({
mode: 'open'
});
const t = document.querySelector('#shadow-template');
const instance = t.content.cloneNode(true);
// shadowRoot.appendChild(instance);
shadowRoot.append(instance)
}
}
disconnectedCallback() {
// `元素每次从 DOM 中移除时都会调用。用于运行清理代码（例如移除事件侦听器等）.`
}
attributeChangedCallback(name, oldVal, newVal) {
// `属性添加、移除、更新或替换。解析器创建元素时，或者升级时，也会调用它来获取初始值。`
// `注：仅 observedAttributes 属性中列出的特性才会收到此回调`
if (this.isActive) {
this.fadeOut();
} else {
this.fadeIn();
}
}
adoptedCallback() {
// `自定义元素被移入新的 document（例如，有人调用了 document.adoptNode(el).`
}
}
window.customElements.define('ajanuw-title', ajanuwTitle);
customElements.whenDefined('ajanuw-title').then(() => {
// `浏览器会因为存在未知标记而采用不同方式处理潜在自定义元素。调用 define() 并将类定义赋予现有元素的过程称为“元素升级”。`
console.log('ajanuw-title defined');
});
// `返回元素的构造函数。如果没有注册元素定义，则返回 undefinedF`
let ATitle = customElements.get('ajanuw-title');
let atitle = new ATitle();
// console.log(ATitle);
class ajanuwButton extends HTMLButtonElement {
// 拓展元素
constructor(prop) {
super(prop);
this.addEventListener('pointerover', e => {
console.log(1);
this.style.boxShadow = '2px 2px 10px #f48';
}, false)
}
}
window.customElements.define('ajanuw-button', ajanuwButton, {
extends: 'button'
});
let button = document.createElement('button', {
is: 'ajanuw-button'
});
button.textContent = 'Fancy button!';
document.querySelector('.btn').appendChild(button);
</script>
</body>
</html>
自定义元素 v1：可重用网络组件的更多相关文章
- KnockoutJS 3.X API 第六章 组件(4) 自定义元素
自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...
- vue与自定义元素的关系
你可能已经注意到 Vue.js 组件非常类似于自定义元素--它是 Web 组件规范的一部分.实际上 Vue.js 的组件语法参考了该规范.例如 Vue 组件实现了 Slot API 与 is 特性.但 ...
- KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述
Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- HTML 自定义元素教程
组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望. 本文就介绍 HTML 组件的基础知识:自定义元素(custom elements). 文章 ...
- 自定义元素 – 在 HTML 中定义新元素
本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...
- 对比iOS网络组件：AFNetworking VS ASIHTTPRequest（转载）
在开发iOS应用过程中,如何高效的与服务端API进行数据交换,是一个常见问题.一般开发者都会选择一个第三方的网络组件作为服务,以提高开发效率和稳定性.这些组件把复杂的网络底层操作封装成友好的类和方法, ...
- 自定义元素–为你的HTML代码定义新元素
注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...
- 对比iOS网络组件：AFNetworking VS ASIHTTPRequest
对比iOS网络组件:AFNetworking VS ASIHTTPRequest 作者 高嘉峻 发布于 2013年2月28日 | 7 讨论 分享到:微博微信FacebookTwitter有道云笔记邮件 ...
随机推荐
- android之官方导航栏ActionBar(三)之高仿优酷首页
一.问题概述 通过上两篇文章,我们对如何使用ActionBar大致都已经有了认识.在实际应用中,我们更多的是定制ActionBar,那么就需要我们重写或者定义一些样式来修饰ActionBar,来满足具 ...
- redis启动出错Creating Server TCP listening socket 127.0.0.1:6379: bind: No error
windows下安装Redis第一次启动报错: [2368] 21 Apr 02:57:05.611 # Creating Server TCP listening socket 127.0.0.1: ...
- 64位电脑上启动程序出现丢失MSVCR110.dll的解决办法
启动程序报错如下: 无法启动此程序,因为计算机中丢失MSVCR110.dll.尝试重新安装该程序以解决此问题. 应该很容易就搜索到,缺少这样的dll文件,是没有安装Visual C++ Redistr ...
- Spark机器学习(1)：线性回归算法
线性回归算法,是利用数理统计中回归分析,来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法. 1. 梯度下降法 线性回归可以使用最小二乘法,但是速度比较慢,因此一般使用梯度下降法(Grad ...
- Windows视频桌面壁纸实现(libvlc)(类似于wall paper engine效果)
简介 这个项目是很久之前的事情了,当时一个朋友正在研究一个国外的软件(wall paper engine ),可以在桌面壁纸层播放视频,也就差不多是动态壁纸的意思. 后来我也动手来实现这个功能,因为手 ...
- Lintcode 730 所有子集的和
已知: 给一整数 n, 我们需要求前n个自然数形成的集合的所有可能子集中所有元素的和. 示例: 给出 n = , 返回 可能的子集为 {{}, {}, {, }}. 子集的元素和为 + + + = 给 ...
- Spring全局异常处理的三种方式
在J2EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合度高,工作 ...
- MySQL binlog_format (Mixed,Statement,Row)[转]
MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式日志的优缺点. MySQL ...
- Volley 框架解析(二)--RequestQueue核心解读
主要围绕RequestQueue进行解读,它的两个请求队列CacheQueue.NetworkQueue是如何调用的,第一条请求的执行过程及如何处理重复请求?对RequestQueue及相关的类进行详 ...
- layui：根据行内某个值，设定该行得背景色
done:function () { $("table tr").each(function () { var s = $(this).children().eq(1).text( ...