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. 怎么样获取小米手机4的ROOT超级权限

    小米手机4有何方法开通了Root超级权限?各位都清楚,Android手机有Root超级权限,一旦手机开通了root相关权限,能够实现更强大的功能,打比方各位部门的营销部门的妹纸,使用个别营销工具都需要 ...

  2. 下载网站js css img 资源

  3. zzw原创_非root安装fastDFS

    zzw原创_非root安装fastDFS fastDFS 想要非root安装,没找到资料,分析了一下安装脚本,原来作者是留了安装路径的,但没有放出来. 1.解包 [bdc@svr001 setup]$ ...

  4. 多线程之interrupt

    1.interrupt()作为中断程序,并不会直接终止运行,而是设置中断状态,由线程自己处理中断.可以选择终止线程.等待新任务或继续执行. 2.interrupt()经常用于中断处于堵塞状态的的线程, ...

  5. DMA 内存存取原理

    DMA直接内存存取原理 DMADMA直接内存存取原理是指外部设备不通过CPU而直接与系统内存交换数据的接口技术. 要把外设的数据读入内存或把内存的数据传送到外设,一般都要通过CPU控制完成,如CPU程 ...

  6. 服务器安装SSH服务：

    强制关闭yum进程: rm -f /var/run/yum.pid 启动SSH: service sshd start 设置开机运行: chkconfig sshd on

  7. 为虚机Linux系统设置静态IP，ping通外网并解决相关问题

    在虚机中安装完Linux系统后,虚机是ping不通外网的,而默认的动态IP会为之后的Hadoop应用造成不少麻烦,为了减少这些不必要的麻烦,我们把系统的IP设置为静态. 步骤: 修改系统配置文件 命令 ...

  8. 第九次java课堂笔记

  9. 内嵌tomcat最简单用法

    maven项目引入内嵌tomcat依赖 <dependency> <groupId>org.apache.tomcat.embed</groupId> <ar ...

  10. Java String 常量池理解

    String:字符串常量池 作为最基础的引用数据类型,Java 设计者为 String 提供了字符串常量池以提高其性能,那么字符串常量池的具体原理是什么,我们带着以下三个问题,去理解字符串常量池: 字 ...