自定义元素 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四大组件应用系列——使用ContentProvider实现跨进程通讯
一.问题描述 如何在Android中实现不同应用之间的通讯(既跨进程进行调用)?Android提供了多种实现方式,使我们可以实现跨进程访问Activity.通过ContentProvider跨进程访问 ...
- Java字符串转16 进制工具类Hex.java
Java字符串转16 进制工具类Hex.java 学习了:https://blog.csdn.net/jia635/article/details/56678086 package com.strin ...
- oracle 11g 安装及netca,dbca乱码之解决
在中文Linux下安装Oracle 11g,运行runInstaller后默认会出现乱码,解决办法如下: 1.准备字体zysong.ttf,点击下载,解压下载到的fallback 2.使用归档管理器打 ...
- Boinx FotoMagico for Mac（电子相册制作工具）破解版安装
1.软件简介 FotoMagico 是 macOS 系统上一款非常好用的电子视频相册制作工具,FotoMagico 被誉为 Mac 上的「会声会影」,我们可以使用这款软件快速的制作出精美的音乐视 ...
- google全球地址
IP Addresses of Google Global Cache www.kookle.co.nr Bulgaria 93.123.23.1 93.123.23.2 93.123.23.3 93 ...
- 5.翻译系列：EF 6中数据库的初始化（EF 6 Code-First 系列）
原文地址:http://www.entityframeworktutorial.net/code-first/database-initialization-in-code-first.aspx EF ...
- 用.NET CORE做项目，VS里编译碰到‘。。。。包降级。。。。’错误
用.NET CORE做项目,VS里编译碰到‘....包降级....’错误 本地开发机:WIN10+VS2017 15.7.3 ,用CORE2.1版本的建立一个项目,做好了,传到gitee上 今天有新同 ...
- Atitit 提升效率 界面gui方面的前后端分离与cbb体系建设 规范与推荐标准
Atitit 提升效率 界面gui方面的前后端分离与cbb体系建设 规范与推荐标准 1. 界面gui方面的前后端分离重大意义1 2. 业务逻辑也适当的迁移js化1 3. 常用分离方法2 3.1. 页面 ...
- 如何在TextView类中创建超链接 Linkify
Linkify是一个辅助类,通过RegEx样式匹配,自动地在TextView类(和继承的类)中创建超链接.符合特定的RegEx样式的文本会被转变成可点击的超链接,这些超链接隐式的调用startActi ...
- PSR PHP业界规范
0x0 大型项目的问题 随着项目越来越大,参与的人数越来越多,代码变得越来越不可维护了. 每个人都给项目带来自己的风格,所以这时就需要大家采用一个统一的标准. 0x1 解决办法 于是顶尖的PHPer们 ...