自定义元素 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有道云笔记邮件 ...
随机推荐
- Promise.then的第二个参数与catch的区别
1.异常捕获 getJSON("/post/1.json").then(function(post) { return getJSON(post.commentURL); }).t ...
- PL/SQL学习笔记之存储过程
一:PL/SQL的两种子程序 子程序:子程序是执行一个特定功能.任务的程序模块.PL/SQL中有两种子程序:函数 和 过程. 函数:主要用于计算并返回一个值. 过程:没有直接返回值,主要用于执行操 ...
- 【H5动画】谈谈canvas动画的闪烁问题
一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...
- CentOS 7源码安装zabbix
一.Zabbix简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统 ...
- python3下载图片
import urllib.request import socket import re import sys import os targetDir = r"E:\\DATA\常用py脚 ...
- redis内部数据结构深入浅出
最大感受,无论从设计还是源码,Redis都尽量做到简单,其中运用到的原理也通俗易懂.特别是源码,简洁易读,真正做到clean and clear, 这篇文章以unstable分支的源码为基准,先从大体 ...
- MYSQL 中query_cache_size小结
1 原理 MySQL查询缓存保存查询返回的完整结果.当查询命中该缓存,会立刻返回结果,跳过了解析,优化和执行阶段. 查询缓存会跟踪查询中涉及的每个表,如果这写表发生变化,那么和这个表相关的所有缓 ...
- Mysql线程池系列一:什么是线程池和连接池（ thread_pool 和 connection_pool）
thread_pool 和 connection_pool 当客户端请求的数据量比较大的时候,使用线程池可以节约大量的系统资源,使得更多的CPU时间和内存可以高效地利用起来.而数据库连接池的使用 ...
- 【Linux】ps命令
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...
- [Big Data - ZooKeeper] ZooKeeper: A Distributed Coordination Service for Distributed Applications
ZooKeeper ZooKeeper: A Distributed Coordination Service for Distributed Applications Design Goals Da ...