Web Components 标准非常重要的一个特性是，它使开发者能够将HTML页面的功能封装为 custom elements（自定义标签）。而自定义标签的好处，就是在大型web开发的时候，可以封装组件(Vue、Angular等大型框架)来重用，方便开发跟管理。

在自定义标签之前，先来看下几个相关的API：

  1. Object.create(proto, [propertiesObject]): 创建新对象，将该新对象的__proto__指向proto，这里的proto是 HTMLElement，因为我们需要创建一个element。主要是ES5的写法，ES6可以通过 Class 跟 constructor 来实现。
  2. document.currentScript.ownerDocument: 该方法主要针对通过 HTML import导入的文件，用于获取自定义element的上下文document，并通过该document 获取该 element 定义的html模板。因为document是指向全局上下文的，获取不到自定义的元素。document.currentScript: 获取正在执行的<script>脚本。
  3. createdCallback: 创建元素成功之后的回调函数。将自定义元素的模板添加到该元素下面。
  4. Element.createShadowRoot: 创建 shadow DOM，将该标签模板与外部元素隔离开来，不受外部样式影响，也不影响外部样式。不过MDN上将这个API废弃掉了，建议使用 attachShadow() 替代
  5. Element.attachShadow(shadowRootInit): createShadowRoot 的替代者。shadowRootInit: 指定shadowRoot的封装模式 {mode: open/closed}。open 表示可在外部 获取到该shadow，closed 反之。
    1. open: ele.shadowRoot === shadow
    2. closed: ele.shadowRoot === null
  6. document.registerElement(tag-name, options): 注册自定义元素。MDN已经废弃这个API了，建议使用 customElements.define() 替代
    1. tag-name: 自定义标签的名字，必须有一个连字符 '-'
    2. options: 指定标签的原型属性跟可扩展对象
 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <link rel="import" href="./customized-tag.html">

     <style type="text/css">

         .red-color {

             color: blue

         }

     </style>

 </head>

 <body>

     <div class="red-color">aaa</div>

     <customized-tag></customized-tag>

 </body>

 </html>
 <template>

     <div class="red-color">

         hahaha

     </div>

     <style type="text/css">

         /*.red-color {

             color: red;

         }*/

     </style>

 </template>

 <script type="text/javascript">

     (function() {

         // 创建一个html元素

         let ele = Object.create(HTMLElement.prototype);

         // 获取当前文档的元素节点里面的内容

         // 因为这个文件是通过 import 导入到父html的, document无法直接获取到自定义的模板

         // document.currentScript 获取到当前的script，因为默认 document 是之前全局上下文的

         // document.currentScript.ownerDocument 获取当前文档，而不是全局

         let customizedDoc = document.currentScript.ownerDocument.querySelector('template').content;

         ele.createdCallback = function() {

             // 创建shadow DOM，避免元素相互影响，已废弃，建议使用 attachShadow

             // let shadow = this.createShadowRoot();

             // 创建shadow DOM, mode: open / closed, open 表示可以在js里面获取到该shadowDOM，closed 表示无法在外部获取到该shadow DOM

             // open: ele.shadowRoot === shadow

             // closed: ele.shadowRoot === null

             let shadow = this.attachShadow({mode: 'open'});

             // 拷贝节点，第二个参数表示是否导入后代节点

             let clone = document.importNode(customizedDoc, true);

             shadow.appendChild(clone);

             // 如果不想创建 shadowDOM, 可直接将节点append到父元素

             // this.appendChild(clone)

         }

         document.registerElement('customized-tag', {

             prototype: ele

         })

     })()

 </script>

使用 customElements.define(tag-name, constructor, options) 方式注册组件

     class CustomizedTag extends HTMLElement {

         constructor() {

             super();

             this.attachToTag();

         }

         attachToTag() {

             let shadow = this.attachShadow({mode: 'open'})

             let ele = document.currentScript.ownerDocument.querySelector('template').content;

             let clone = document.importNode(ele, true);

             shadow.appendChild(clone)

         }

     }

     customElements.define('customized-tag', CustomizedTag)

web 自定义标签的更多相关文章

  1. Java Web 自定义标签

    1.   自定义标签 由于在JSP页面中直接嵌入Java代码会导致页面开起来非常混乱,不方便和美工等配合工作,为此,JSP提供了自定义标签技术,可以代替直接嵌入Java代码的方式提供动态逻辑,但自定义 ...

  2. 12 自定义标签/JSTL标签库/web国际化/java web之设计模式和案例

    EL应用      自定义一个标签,实现两个字符串的相加 1回顾      1.1servlet生命周期           init(ServletConfig)           service ...

  3. Web学习之自定义标签

    1.编写一个实现Tag接口的Java类(标签处理器类) package me.gacl.web.tag; import java.io.IOException; import javax.servle ...

  4. (转)java web自定义分页标签

    转载至http://liuxi1024.iteye.com/blog/707784 效果如图: 1.JSP规范1.1版本后增加了自定义标签库.实现自定义标签的步骤 (1)开发自定义标签处理类. (2) ...

  5. [原创]java WEB学习笔记42：带标签体的自定义标签，带父标签的自定义标签，el中自定义函数，自定义标签的小结

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. [原创]java WEB学习笔记41：简单标签之带属性的自定义标签(输出指定文件，计算并输出两个数的最大值 demo)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  7. Java Web开发技术教程入门-自定义标签

    回顾: 昨天了解了JSP开发的两种模式Model1和Model2模式.Model1采用JSP+JavaBean技术开发Web应用,它比较适合小规模应用的开发,效率较高,易于实现.但由于在Model1中 ...

  8. [JSP]自定义标签库taglib

    自定义标签的步骤 自定义标签的步骤大概有三步: 1.继承javax.servlet.jsp.tagext.*下提供的几个标签类,如Tag.TagSupport.BodyTagSupport.Simpl ...

  9. EL函数以及自定义标签的应用

    一.EL函数(调用普通类的静态方法) 编写步骤(自定义EL函数的编写步骤即自定义标签的编写步骤): ①编写一个普通的java类,提供一个静态方法,功能自定,例如下: package cn.wzbril ...

随机推荐

  1. Django细节小记

    前记:Django的ORM.模块有很多函数细节,要学会多看文档学习函数的细节 聚合annotate()和aggregate()的使用 简言之,annotate()得到的是查询集,类似all(),只不过 ...

  2. redist命令操作（三）--集合Set，有序集合ZSet

    1.Redis 集合(Set) 参考菜鸟教程:http://www.runoob.com/redis/redis-sets.html Redis 的 Set 是 String 类型的无序集合.集合成员 ...

  3. Python3爬虫系列：理论+实验+爬取妹子图实战

    Github: https://github.com/wangy8961/python3-concurrency-pics-02 ,欢迎star 爬虫系列: (1) 理论 Python3爬虫系列01 ...

  4. Envoy 源码分析－－buffer

    目录 Envoy 源码分析--buffer BufferFragment RawSlice Slice OwnedSlice SliceDeque UnownedSlice OwnedImpl Wat ...

  5. 微信小程序 页面跳转方式

    // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectT ...

  6. 一条shell命令让多台Linux服务器执行

    1.环境 局域网环境有3台Linux服务器,配置host文件 [root@master1 ~]# vim /etc/hosts 192.168.8.201 master1 192.168.8.202 ...

  7. js前端性能优化之函数节流和函数防抖

    前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...

  8. Nmap UDP扫描缓慢问题探究（无结果）

    一.说明 在网络原理中我们经常说TCP是面向连接的要进行三次握手和四次挥手所以速度比较慢,UDP是无连接的直接发送和接收所以速度快(说到这个快慢我总想起多年前有篇分析MSN为什么被QQ淘汰的一篇文章其 ...

  9. chrome google plugins

    Advanced REST client  Axure RP Extension for Chrome  Charset  Chrono下载管理器  Code Cola  CSS Sprite Gen ...

  10. Introduction and use of Cookie and Session（Cookie&Session的介绍和使用）

    一.Cookie 1.什么是Cookie? Cookie是HTTP协议的规范之一,它是服务器和客户端之间传输的小数据. 首先由服务器通过响应头把Cookie传输给客户端,客户端会将Cookie保存起来 ...