示例：

<video controls autoplay name="media">

  <source id="mp4" src="trailer.mp4" type="video/mp4">

</video>

视屏的控件在浏览器中真实面目如下：

那这些节点是从哪里来的？

W3C提出了ShadowDOM的概念，Shadow DOM 是一个 HTML 的新规范，其允许开发者封装HTML组件（类似vue组件，将html，css，js独立部分提取），使一些DOM节点在特定范围内可见，而在网页DOM树中不可见，但是网页渲染的结果包含了这些节点。

文章中转站：

影子节点 shadowDOM

谈一谈神奇的ShadowDOM

影子节点 shadowDOM的更多相关文章

  1. shadow dom

    初识shadow dom 我们先看个input="range"的表现: what amazing ! 一个dom能表现出这么多样式嘛? 无论是初学者和老鸟都是不肯相信的,于是在好奇 ...

  2. Web Component总结

    Web Component 一个Web组件通常由四个部分组成:模板.Shadow DOM.自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题 Shadow DOM 有shadow ...

  3. css 优化

    // 注: 以下内容大量借阅自<<Webkit技术内幕>>--朱永盛(14年出版的) , 很多内容可能早已更新 , 因此个人并不能确定论述是否正确.部分摘录内容有删减 , 目录 ...

  4. 使用原生js自定义内置标签

    使用原生js自定义内置标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. 使用原生js创建自定义标签

    使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. css涂鸦这样玩

    前言 上一次深扒CSS的时候,还说CSS和H5绘制复杂图形很麻烦,看了大神的操作后,感觉茅塞顿开了,哈哈. 就算可能我暂时没有用到的机会,学习一下开发者的设计思路也是受益匪浅呀. 嗯,今天要介绍的是一 ...

  7. 并行Louvain社区检测算法

    因为在我最近的科研中需要用到分布式的社区检测(也称为图聚类(graph clustering))算法,专门去查找了相关文献对其进行了学习.下面我们就以这篇论文IPDPS2018的文章[1]为例介绍并行 ...

  8. web 自动化遇到 shadowDOM 节点你会操作吗？

    本文转载自: http://www.lemfix.com/topics/971 近期有同学在做web自动化的时候,发现页面上有些元素,在selenium中无法通过xpath来定位,各种原因找了半天,都 ...

  9. Web自动化遇到shadowDOM节点操作(还没试)

    近期有同学在做web自动化的时候,发现页面上有些元素,在selenium中无法通过xpath来定位,各种原因找了半天,都没找到解决方案. 最后发现元素在一个叫做shadow-root的节点下面. 如下 ...

随机推荐

  1. MySQL数据库简单查询

    --黑马程序员 DQL数据查询语言 数据库执行DQL语句不会对数据进行改变,而是让数据库发送结果集给客户端.查询返回的结果集是一张虚拟表. 查询关键字:SELECT 语法: SELECT 列名 FRO ...

  2. python学习笔记：python异常的调用原理

    因为错误是class,捕获一个错误就是捕获到该class的一个实例.因此,错误并不是凭空产生的,而是有意创建并抛出的.Python的内置函数会抛出很多类型的错误,我们自己编写的函数也可以抛出错误. h ...

  3. python 中r 和 \r

    r'xxx' 转义 如果在前面加r字符,则表示让这个字符串里面的内容失去转义的意义 1 s = r'\n这只是\n' # 字符串中的"\n"只是字符,没有换行的意义了. 2 pri ...

  4. Luogu P2292 [HNOI2004]L语言

    题目链接 \(Click\) \(Here\) 好久没写\(DP\)了真是水平下降不少,一眼把这个题搞成贪心了,然后一发交上只有\(37\)分\(QwQ\) 这个题好像还可以\(AC\)自动机胡搞?不 ...

  5. Advertising.csv

    TV,radio,newspaper,sales1,230.1,37.8,69.2,22.12,44.5,39.3,45.1,10.43,17.2,45.9,69.3,9.34,151.5,41.3, ...

  6. JavaSE_坚持读源码_ArrayList对象_Java1.7

    底层的数组对象 /** * The array buffer into which the elements of the ArrayList are stored. * The capacity o ...

  7. Linux系统IO分析工具之iotstat常用参数介绍

    Linux系统IO分析工具之iotstat常用参数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1>.安装iostat [root@flume115 ~]# yum - ...

  8. nginx跨域的简单应用

    nginx跨域的简单应用 要求:1.浏览器访问print.qianbaihe.wang/zt 直接调转至 www.flybirdprint.com/zt,浏览器显示域名不变. server { lis ...

  9. angular学习—组件

    组件: vue组件:xxx.vue react组件:xxx.js+xxx.css angular组件:xxx.ts+xxx.css+xxx.html angular的装饰器: @ngModule:an ...

  10. Windows2012 要远程登录，你需要具有通过远程桌面服务进行登录的权限.

    直接说正题... 提示如下: 解决办法: gpedit进入策略组:计算机配置->Windows设置->安全设置->本地策略->用户权限分配,找到拒绝通过远程桌面服务登录,把里面 ...