影子(Shadow) DOM

什么是 Shadow DOM? Shadow DOM 是一个革命性的新技术,先来看下他是什么样子的 以<video>标签为例非常适合,例如 <video controls autoplay name="media"> <source id="mp4" src="http://xxx.mp4" type="video/mp4"> </video> 用开发者工具查看DOM结构时,就是一个 video 节点,但视频播放器本身有播放/暂停按钮、进度条等按钮,DOM源码这么干净,那实现这些组件的代码是从哪儿来的呢? 这就是Shadow DOM的概念,可以把一些html标签进行封装,组成一个DOM树的子树,这个子树可以被多处使用 简单理解 Shadow DOM可以帮助我们封装成可复用的界面组件 Shadow DOM 的价值是什么? 以Bootstrap为例,Bootstrap是一个UI框架,使用它需要将一系列CSS、JS及规定的HTML放到页面上 例如使用导航组件 (1)引入bootstrap css (2)引入jQuery (3)引入Bootstrap js (4)页面中加入bootstrap导航模块的标准化html代码 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> </div> </nav> 这个使用过程首先是比较繁琐,二是容易出错,因为如果html代码没有完全按照标准写,显示会有问题,或者自己的CSS和bootstrap的css出现冲突,也会出现问题 如果使用 Shadow DOM 进行封装,这个导航的组件使用起来可能就是这个样子的: <bootstrap-navbar fixed-top> <a href="#">首页</a> <a href="#">关于我们</a> </bootstrap-navbar> 这样就非常方便了 Shadow DOM 使用示例 由于 Shadow DOM 是新技术,各浏览器还没有普遍支持 使用 createShadowRoot() 方法创建Shadow DOM,chrome浏览器兼容 <!DOCTYPE html> <html> <head> <title>Shadow DOM</title> </head> <body> <div id="test"></div> <script> var div = document.getElementById('test'); var root = div.createShadowRoot(); var cnt = document.createElement("div"); cnt.innerHTML = "shadow"; root.appendChild(cnt); </script> </body> </html>

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-12-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏糊一笑

移动端效果之CellSwiper

写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中...

2406
来自专栏极客编程

html5 canvas 与小丑。

  以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序...

912
来自专栏web前端

01移动端基本环境和常见问题

一、chrome模拟器(只是模拟尺寸,最终还是需要真机测试)      1、F12手机模拟(emulation)      2、选择或者添加模拟设备 二、本地服...

2249
来自专栏IMWeb前端团队

自定义字体

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 概述 一般来说,网页上的字体使用的都是我们电脑里面的字体,比如我们常说的微软...

59110
来自专栏夏时

两款 Js 插件为你的网站添彩

在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。

4649
来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

6663
来自专栏IMWeb前端团队

webcomponent学习笔记(一)

webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分: Shadow DOM Custom Elements HTML...

8680
来自专栏游戏杂谈

仿Google+相册的动画

鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。

1791
来自专栏大数据钻研

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是复杂的布局往往使一些解决方案不能很好的发挥作用。 在网页布局中元素水平居中...

2864
来自专栏九彩拼盘的叨叨叨

我们到底需不需要 jQuery

曾经,在那个 IE6 还是主流浏览器的时代,为了实现稍微复杂一点的功能,也需要很多代码。如果要做到兼容主流浏览器,更需大费周章。当 jQuery 出现后,使用 ...

741

扫码关注云+社区

领取腾讯云代金券