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. Java核心技术卷一 · 笔记(1)

    目录 1.java的关键术语 2.==和equals 3.空串与 Null 串 4.构建字符串 5.封装 6.对象的三个主要特性 7.依赖(dependence).聚合(aggregation).继承 ...

  2. gpu相关

    1.查看cuda版本 cat /usr/local/cuda/version.txt 2.查看cudnn版本 cat /usr/local/cuda/include/cudnn.h | grep CU ...

  3. 菜鸡学C语言之寻根溯源

    题目描述 Mogg最近翻了翻自己家的族谱,想康康祖先是谁.但是族谱因为年久失修太乱了,他现在只整理出来了一系列父子关系,你能帮他找一找直系亲属中辈分最大的一位吗?(即父亲的父亲的父亲……) 输入 第1 ...

  4. ASP.NET MVC 简单介绍①

    ASP.NET  MVC 简单介绍① 只做了重要描述,内容出自菜鸟教程网站内容. 目录 1布局 2HTML 帮助器 3.Razor 语法 4.添加样式 5.Layout 6. Controllers ...

  5. Sping AOP Capabilities and Goals

    Spring AOP是用纯的java实现的.不需要任何个性的实现过程.Spring AOP不需要控制类加载器,并且它适用于Servlet容器或者应用服务器. Spring AOP当前只支持方法执行的连 ...

  6. Myeclipse在debug模式下没加断点程序卡住，start模式下可以正常启动

    参考<eclipse在debug模式下卡住,start模式下可以启动>,地址:https://blog.csdn.net/jack_chen1994/article/details/761 ...

  7. 20175212童皓桢 《Java程序设计》第六周学习总结

    20175212童皓桢 <Java程序设计>第六周学习总结 教材学习内容总结 第七章 内部类与异常类 1.内部类 Java支持在一个类中定义另一个类,这样的类称作内部类,包含内部类的类称为 ...

  8. Unity录音

    上周做过Unity录音,(不知道的可以到网上查找一下,代码挺多的),不过只能录制麦克风的声音,项目需要同时录制背景音和麦克风传进去的声音,经过探索,现已可以录制: 首先需要知道,即使用电脑录音,想录制 ...

  9. springboot秒杀课程学习整理1-3

    1)实现手机验证码功能,用户注册功能,用户登入功能(这里讲开发流程,及本人遇到的问题,具体实现请看代码) 1.拦截请求,获取请求参数(这里的consumes是个常量,可以定义在baseControll ...

  10. 2072. Kirill the Gardener 3

    http://acm.timus.ru/problem.aspx?space=1&num=2072 回忆一下 #include <iostream> #include <st ...