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. C# FTP操作类的代码

    如下代码是关于C# FTP操作类的代码.using System;using System.Collections.Generic;using System.Text;using System.Net ...

  2. web service 上传file说明

    之前做过一个接口,PI发布WEB SERVICE给对方调,传附件到SAP... 接口中包含文件名称,文件类型,文件流... 1.SOAPUI新建项目: 文件内容的地方会自动带上一个ID,这个ID对应文 ...

  3. 如何用python将一个时间序列转化成有监督学习

    机器学习可以被用于时间序列预测. 在机器学习能使用之前,时间序列预测需要被重新转化成有监督学习.将一个序列组合成成对的输入输出序列. 在这篇教程中,你会发现如何通过使用机器学习算法将单变量和多变量的时 ...

  4. Sublime自动去除代码行尾多余的空格

    Preferences - > Settings - User 加入: "trim_trailing_white_space_on_save": true Ctrl+s就会自 ...

  5. 关于sqlserver数据库max()方法的使用

    1.传送门:http://www.codesky.net/article/201009/144935.html 2.copy自传送门里的内容: max(字符串内容): 说明对字符型数据的最大值,是按照 ...

  6. 在kali linux上安装VMware tool

    在安全圈的门口徘徊了一年,一直不知道该如何入门,现在决定先从kali 入手.有同样兴趣的伙伴欢迎一起. 但是刚在VMware上安好系统就遇到了一个大麻烦,看了很多书,还有教程但总是遇到这样那样的问题. ...

  7. Django的url控制器

    一 url配置 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表.也就是ur ...

  8. mybatis-generator 代码自动生成工具包

    怎么用mybatis-gennerator插件自动生成mybatis所需要的dao.bean.mapper xml文件.请看↓ 1.在D盘新建一个文件夹,命名:generator(或者其他盘其他名字也 ...

  9. 互粉的sql查询

    建立表: CREATE TABLE `tb_sns_attention` ( `id` int(11) NOT NULL AUTO_INCREMENT, `to_uid` int(11) NOT NU ...

  10. Django REST framework--序列化

    Django REST framework--序列化 基础准备工作 创建项目添加应用 (venv) lee@lee:~/PycharmProjects/Djdemo/djdemo$ python ma ...