• 首页
  • 技术
  • 旅行
  • 车模
  • 关于

JZ's Blog

{技术, 绘画, 旅行, 摄影, 多肉}
  • 首页
  • 技术
  • 旅行
  • 车模
  • 关于
首页  /  开发  /  Web Components 规范学习
03 三月 2014

Web Components 规范学习

作者:jz1108
开发 写评论

最新的规范在这里:http://w3c.github.io/webcomponents/explainer/

依据规范,有以下四个组成部分:

  • Templates
  • Custom Elements
  • Shadow DOM
  • Imports

 

Templates

这里引入了一个新的HTML元素,叫做template。该元素的特点是其中的内容虽然会被浏览器解析(规范上这么说),但是并不会被真正的激活,例如脚本不会被执行,图片不会被加载,也不会被渲染到页面上。直到通过脚本把它激活。

这篇文章对template元素的使用有讲解(http://www.html5rocks.com/en/tutorials/webcomponents/template/)。

Custom Elements

可以自定义元素名称和行为,也可以对现有的HTML元素进行扩展。定义的时候首先需要调用registerElement。

Shadow DOM

Shadow DOM提供了一种将展现和内容分离的机制,展现和内容分离这个概念不是很新了,很早以前我们就知道HTML和CSS要各司其职,HTML负责内容,CSS负责展现。但实际上这个分离还不够彻底。为什么呢?因为为了某些展现效果,我们不得不在HTML增加一些辅助的元素,同时配合样式来实现某些效果。这样就不能说HTML是仅仅负责内容了,它还是或多或少为展现服务。Shadow DOM的作用就是将HTML中那些负责展现的部分也提出来放在别的地方,只剩下内容部分保留的HTML中,真正做到分离。具体做法请参考规范。这篇文章也对Shadow DOM有讲解(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)。

有个概念还是在这里说一下,普通的HTML元素可以拥有一个叫做shadow root的结点,而有shadow root结点的元素会被称作shadow host。

Imports

提供一种重用HTML文档的方法,通过link标签,制定rel属性为import,可以把一份HTML文档导入进来。通过js可以访问HTML中的DOM元素。

 Previous Article appcache的一个特殊用法
Next Article   Vincent的一个翻译版本

相关文章

  • WebGL 绘制技巧之:如何绘制有洞的多边形。

    2018年10月31日
  • Writing A Better JavaScript Library For The DOM 阅读记录

    2014年2月26日
  • iOS的网页调启app store的方法

    2012年7月4日

留言

取消回复

近期文章

  • 记录一次解决 no buffer is bound to enabled attribute 报错的过程
  • TypeScript 中的装饰器
  • iOS 13 Safari 的一些变化
  • WebGL 文章汇总
  • 高性能 WebGL —— 使用 ImageBitmap 提升纹理性能

近期评论

  • lew发表在《WebGL绘制详解之五:Stencil Buffer》
  • jz1108发表在《WebGL基础绘制之一:绘制一个点》
  • jz1108发表在《WebGL 文章汇总》
  • xtx发表在《WebGL 文章汇总》
  • thy发表在《WebGL基础绘制之一:绘制一个点》

文章归档

  • 2021年三月
  • 2019年十一月
  • 2019年九月
  • 2019年三月
  • 2018年十二月
  • 2018年十一月
  • 2018年十月
  • 2017年十一月
  • 2017年十月
  • 2017年九月
  • 2017年五月
  • 2017年四月
  • 2017年三月
  • 2017年二月
  • 2017年一月
  • 2016年十一月
  • 2016年十月
  • 2016年四月
  • 2016年三月
  • 2016年二月
  • 2016年一月
  • 2015年十二月
  • 2015年十一月
  • 2015年十月
  • 2015年九月
  • 2015年八月
  • 2015年七月
  • 2015年六月
  • 2015年三月
  • 2014年十二月
  • 2014年十一月
  • 2014年十月
  • 2014年八月
  • 2014年七月
  • 2014年六月
  • 2014年五月
  • 2014年四月
  • 2014年三月
  • 2014年二月
  • 2014年一月
  • 2013年十二月
  • 2013年十一月
  • 2013年十月
  • 2013年九月
  • 2013年八月
  • 2013年七月
  • 2013年六月
  • 2013年五月
  • 2013年四月
  • 2013年三月
  • 2013年二月
  • 2013年一月
  • 2012年十二月
  • 2012年十月
  • 2012年九月
  • 2012年七月
  • 2012年六月
  • 2012年五月
  • 2012年一月
  • 2011年十一月
  • 2011年十月
  • 2011年九月
  • 2011年八月
  • 2011年七月
  • 2011年六月
  • 2011年五月
  • 2011年四月
  • 2011年二月
  • 2011年一月
  • 2010年十二月
  • 2010年十月
  • 2010年九月
  • 2010年六月
  • 2010年五月
  • 2010年四月
  • 2010年三月
  • 2010年二月
  • 2010年一月
  • 2009年十二月
  • 2009年十一月
  • 2009年九月
  • 2009年八月
  • 2009年六月
  • 2009年三月
  • 2009年二月
  • 2009年一月

分类目录

  • 地图API
  • 多肉
  • 开发
  • 技术
  • 摄影
  • 旅行
  • 未分类
  • 汽车
  • 绘画
  • 美食
  • 车模
  • 随笔

功能

  • 登录
  • 文章RSS
  • 评论RSS
  • WordPress.org
© Copyright 2015. Theme by BloomPixel.