自定义元素 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有道云笔记邮件 ...
随机推荐
- Amazon.com 美国亚马逊 直邮中国 手把手教程(转)
什么值得买已经发布2014最新版美亚直邮攻略 海淘攻略:美国亚马逊 直邮服务 手把手教程(2014最新版) ,调整幅度较大,值友们可以移步到新攻略中查看. 相比德国.英国亚马逊,美国亚马逊的大部分商品 ...
- python3简单使用requests 用户代理，cookie池
官方文档:http://docs.python-requests.org/en/master/ 参考文档:http://www.cnblogs.com/zhaof/p/6915127.html#und ...
- 使用 cmake 进行交叉编译
cmake 因为“又”要额外学一门语言而被诟病,但这并不妨碍越来越多私人项目用 cmake 来管理:autoconfig 确实是更好的发行工具,但用 cmake 管理项目显然更加的容易.如果要应用这些 ...
- webpack中file-loader和url-loader的关系
url-loader把资源文件转换为URL,file-loader也是一样的功能. 不同之处在于url-loader更加灵活,它可以把小文件转换为base64格式的URL,从而减少网络请求次数.url ...
- 【SqlServer】Sqlserver中的DOS命令操作
输入osql ?查看是否支持当前版本,如果是SQL Server 2005以上用Sqlcmd , 以下用Osql连接数据库(a)Osql -S localhost -U username -P p ...
- Spring Boot优化
针对目前的容器优化,目前来说没有太多地方,需要考虑如下几个点: 线程数 超时时间 jvm优化 首先线程数是一个重点,初始线程数和最大线程数,初始线程数保障启动的时候,如果有大量用户访问,能够很稳定的接 ...
- Warning: Function created with compilation errors.
SQL> create or replace function 2 remove_constants(p_query in varchar2) return varchar2 3 as 4 l_ ...
- c# 创建项目时提示：未能正确加载“microsoft.data.entity.design.bootstrappackage.。。。。
google了下, 果然找到办法了.看有的说要卸载,再清理注册表,真心不愿意啊,这安装一次就得好长时间.还好找到了这篇博文,无需卸载重安装,很简单的解决的方式,具体见http://blog.sina. ...
- input框触发回车事件
window.event只能在IE下运行,不能在firefox下运行,这是因为firefox的event只能在事件发生的现场使用. 在firefox里直接调用event对象会报undefined. ...
- js正则表达式验证身份证号和密码
//验证身份证号只能输入15位或者18位的身份证号 /^\d{14}[X|\d]{1}$|^\d{18}$/ig //验证只能输入字母和数字组合6到16位 /^[a-z][a-z0-9]{6,16}$ ...