前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >影子(Shadow) DOM

影子(Shadow) DOM

作者头像
dys
发布2018-04-03 13:28:33
1.3K0
发布2018-04-03 13:28:33
举报
文章被收录于专栏:性能与架构

什么是 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>

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-12-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 JAVA高性能架构 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档