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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>自定义组件</title>
  9.   <style>
  10.     ajanuw-title {
  11.       font-family: 'Consolas';
  12.       color: rgba(255, 68, 136, 1);
  13.       font-size: 22px;
  14.       display: block;
  15.     }
  16.   </style>
  17. </head>
  19. <body>
  20.   <div id="root">
  21.     <ajanuw-title a-title="hello alone"></ajanuw-title>
  23.     <ajanuw-title a-title="hello ajanuw"></ajanuw-title>
  25.     <ajanuw-title>
  26.         <strong slot="last-slot">go go go ..</strong>
  27.     </ajanuw-title>
  29.     <ajanuw-title>
  30.       <strong slot="inter-slot">go go go ..</strong>
  31.     </ajanuw-title>
  33.     <button is="ajanuw-button">click me</button>
  34.     <div class="btn">
  36.     </div>
  37.   </div>
  38.   <template id="shadow-template">
  39.     <style>
  40.       em {
  41.         contain: content;
  42.         font-family: Monaco, Consolase;
  43.         padding: 4px;
  44.       }
  45.     </style>
  46.     <!-- 模板是声明自定义元素结构的理想之选。 -->
  47.     <em>I'm in shadow dom!</em>
  48.     <slot name="inter-slot">[[default inner slot]]</slot>
  49.     <en>from template</en>
  50.     <slot name="last-slot">[[default last slot]]</slot>
  51.   </template>
  52.   <script>
  53.     class ajanuwTitle extends HTMLElement {
  54.       static get observedAttributes() {
  55.         return ['active'];
  56.       }
  57.       // 自定义元素
  58.       constructor(prop) {
  59.         // 创建或升级元素的一个实例。用于初始化状态、设置事件侦听器或创建 Shadow DOM
  60.         super(prop);
  61.         // this.setAttribute('title', '自定义组件')
  62.         this.addEventListener('pointerover', e => this.setAttribute('active', ''), false);
  63.         this.addEventListener('pointerout', e => this.removeAttribute('active'), false);
  64.       }
  65.       fadeOut() {
  66.         this.style.opacity = '.7';
  67.       }
  68.       fadeIn() {
  69.         this.style.opacity = '1';
  70.       }
  72.       get isActive() {
  73.         return this.hasAttribute('active');
  74.       }
  75.       connectedCallback() {
  76.         // `元素每次插入到 DOM 时都会调用`
  77.         if (this.hasAttribute('a-title')) {
  78.           this.textContent = this.getAttribute('a-title');
  79.         } else {
  80.           let shadowRoot = this.attachShadow({
  81.             mode: 'open'
  82.           });
  83.           const t = document.querySelector('#shadow-template');
  84.           const instance = t.content.cloneNode(true);
  85.           // shadowRoot.appendChild(instance);
  86.           shadowRoot.append(instance)
  87.         }
  88.       }
  89.       disconnectedCallback() {
  90.         // `元素每次从 DOM 中移除时都会调用。用于运行清理代码（例如移除事件侦听器等）.`
  92.       }
  93.       attributeChangedCallback(name, oldVal, newVal) {
  94.         // `属性添加、移除、更新或替换。解析器创建元素时，或者升级时，也会调用它来获取初始值。`
  95.         // `注：仅 observedAttributes 属性中列出的特性才会收到此回调`
  96.         if (this.isActive) {
  97.           this.fadeOut();
  98.         } else {
  99.           this.fadeIn();
  100.         }
  102.       }
  103.       adoptedCallback() {
  104.         // `自定义元素被移入新的 document（例如，有人调用了 document.adoptNode(el).`
  106.       }
  107.     }
  108.     window.customElements.define('ajanuw-title', ajanuwTitle);
  110.     customElements.whenDefined('ajanuw-title').then(() => {
  111.       // `浏览器会因为存在未知标记而采用不同方式处理潜在自定义元素。调用 define() 并将类定义赋予现有元素的过程称为“元素升级”。`
  112.       console.log('ajanuw-title defined');
  113.     });
  115.     // `返回元素的构造函数。如果没有注册元素定义，则返回 undefinedF`
  116.     let ATitle = customElements.get('ajanuw-title');
  117.     let atitle = new ATitle();
  118.     // console.log(ATitle);
  120.     class ajanuwButton extends HTMLButtonElement {
  121.       // 拓展元素
  122.       constructor(prop) {
  124.         super(prop);
  126.         this.addEventListener('pointerover', e => {
  127.           console.log(1);
  128.           this.style.boxShadow = '2px 2px 10px #f48';
  129.         }, false)
  130.       }
  131.     }
  133.     window.customElements.define('ajanuw-button', ajanuwButton, {
  134.       extends: 'button'
  135.     });
  137.     let button = document.createElement('button', {
  138.       is: 'ajanuw-button'
  139.     });
  140.     button.textContent = 'Fancy button!';
  141.     document.querySelector('.btn').appendChild(button);
  142.   </script>
  143. </body>
  145. </html>

自定义元素 v1：可重用网络组件的更多相关文章

  1. KnockoutJS 3.X API 第六章 组件(4) 自定义元素

    自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...

  2. vue与自定义元素的关系

    你可能已经注意到 Vue.js 组件非常类似于自定义元素--它是 Web 组件规范的一部分.实际上 Vue.js 的组件语法参考了该规范.例如 Vue 组件实现了 Slot API 与 is 特性.但 ...

  3. KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述

    Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...

  4. 前端组件化Polymer入门教程(4)——自定义元素

    除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...

  5. HTML 自定义元素教程

    组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望. 本文就介绍 HTML 组件的基础知识:自定义元素(custom elements). 文章 ...

  6. 自定义元素 – 在 HTML 中定义新元素

    本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...

  7. 对比iOS网络组件：AFNetworking VS ASIHTTPRequest（转载）

    在开发iOS应用过程中,如何高效的与服务端API进行数据交换,是一个常见问题.一般开发者都会选择一个第三方的网络组件作为服务,以提高开发效率和稳定性.这些组件把复杂的网络底层操作封装成友好的类和方法, ...

  8. 自定义元素–为你的HTML代码定义新元素

    注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...

  9. 对比iOS网络组件：AFNetworking VS ASIHTTPRequest

    对比iOS网络组件:AFNetworking VS ASIHTTPRequest 作者 高嘉峻 发布于 2013年2月28日 | 7 讨论 分享到:微博微信FacebookTwitter有道云笔记邮件 ...

随机推荐

  1. ELK菜鸟手记 (一) 环境配置+log4j日志记录

    1. 背景介绍 在大数据时代,日志记录和管理变得尤为重要. 以往的文件记录日志的形式,既查询起来又不方便,又造成日志在服务器上分散存储,管理起来相当麻烦, 想根据一个关键字查询日志中某个关键信息相当困 ...

  2. [Python设计模式] 第6章 衣服搭配系统——装饰模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序,可以给人搭配嘻哈风格(T恤,垮裤,运动鞋)或白领风格( ...

  3. rman输出日志的几种方法(转)

    在使用rman的时候经常会碰到以下两种场景,需要把rman的日志输出到文件中: 1.显示的日志太多,导致一个屏幕显示不完,影响了问题的诊断,这时候需要把rman的log输出到文本中,整个的诊断过程就相 ...

  4. Djnogo Web开发学习笔记（2）

    安   装 截止目前,https://www.djangoproject.com/download/提供的最新的Django的下载版本为1.6.4. Install Django You’ve got ...

  5. Git教程学习(二)

    教程来自: Git教程(廖雪峰的官方网站) 主要命令: $ git log #查看已提交内容 $ git log --pretty=oneline #查看已提交内容(紧凑版) $ git reset ...

  6. react-无状态组件

    import React, { Component } from "react"; //import PostItem from "./PostItem"; / ...

  7. R绘制3D散点图

    目前主要使用ggplot2做一些数据可视化的分析,但是ggplot2有个很大的缺陷是不支持3D作图,所以需要查找其他替代方案. 下面找到的两个替代方案不错,亲测可行,记录于此. 交互3D librar ...

  8. 【Linux高级驱动】linux设备驱动模型之平台设备驱动机制

    [1:引言: linux字符设备驱动的基本编程流程] 1.实现模块加载函数  a.申请主设备号    register_chrdev(major,name,file_operations);  b.创 ...

  9. TCP中的KeepAlive与HTTP中的Keep-Alive

    KeepAlive 与 Keep-Alive 前言 昨天被问到了HTTP中Keep-Alive的概念,看名字我只知道是保持连接用的,但是对于他怎么结束连接,为什么要用他这些就不是很清楚了,今天查了一下 ...

  10. 《Essential C++》读书笔记 之 泛型编程风格

    <Essential C++>读书笔记 之 泛型编程风格 2014-07-07 3.1 指针的算术运算(The Arithmetic of Pointer) 新需求1 新需求2 新需求3 ...