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. dedecmsV5.7和discuz!X3.4整合之后免激活登陆

    问题:dedecmsv5.7和discuz!X3.4整合之后,从dede过去的用户,第一次登陆discuz!X3.4,需要激活.后来我就上百度了一番,找到了一个方法 我找到的方法: 1.在dedecm ...

  2. Linux中python3,django,redis以及mariab的安装

    1. Linux中python3,django,redis以及mariab的安装 2. CentOS下编译安装python3 编译安装python3.6的步骤 1.下载python3源码包 wget ...

  3. CloudStack 云计算平台框架

    前言 CloudStack 和OpenStack 一样都是IaaS层 开源框架,可以管理XenServer.ESXI.KVM.OVM等主流虚拟机,相对OpenStack比较简单.稳定: 二.Cloud ...

  4. Tor真的匿名和安全吗?——如果是http数据，则在出口节点容易被嗅探明文流量，这就是根本问题

    Tor真的匿名和安全吗? from:http://baham.github.io/04_03_torzhen-de-ni-ming-he-an-quan-ma-%3F.html 很多人相信Tor是完全 ...

  5. .gitconfig

    [user] name = 1111 email = 111@111.com[credential] helper = store

  6. 分享张鑫旭大神的，纯css打字小技巧，我顺便收藏一下

    CSS代码: .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: t ...

  7. linux常用命令 cut字符截取命令

    cut 字符截取 cut [选项] 文件名 选项 -f 列号: 提取第几列 -d 分割符:按照指定的分隔符分割列 默认使用制表符("tab")进行分割 ssgao:Download ...

  8. 在本地运行正常的静态网页放到tomcat中却显示异常的原因

    在本地写好了一个个人网站,本地直接用浏览器运行,很顺利,然而把网站放到Tomcat里面,却发现图片显示不出来,这就奇怪了. 后来发现,我的网站的Image文件夹用了大写“I”,而网页里面的路径用了小写 ...

  9. 我的第一个Angular2应用

    1需要具备的基本前端基础:HTML.CSS.JavaScript.为了实现对项目包的管理,推荐使用npm NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题:官网先下 ...

  10. UVa LA 4636 Cubist Artwork 难度: 0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...