示例：

<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. please select android sdk

  2. Luogu P3181 [HAOI2016]找相同字符 广义$SAM$

    题目链接 \(Click\) \(Here\) 设一个串\(s\)在\(A\)中出现\(cnt[s][1]\)次,在\(B\)中出现\(cnt[s][2]\)次,我们要求的就是: \[\sum cnt ...

  3. python3: requests模块的使用；

    requests库常用于http请求,可以很方便对网页进行爬取: 主要方法(七个): 方法 解释 requests.request() 构造一个请求,支持以下各种方法 requests.get() 获 ...

  4. CodeForces165E 位运算 贪心 + 状压dp

    http://codeforces.com/problemset/problem/165/E 题意 两个整数 x 和 y 是 兼容的,如果它们的位运算 "AND" 结果等于 0,亦 ...

  5. spring中IOC和AOP原理

    IoC(Inversion of Control): (1)IoC(Inversion of Control)是指容器控制程序对象之间的关系,而不是传统实现中,由程序代码直接操控.控制权由应用代码中转 ...

  6. ansible playbook 变量

    变量优先级 在命令中定义的变量(-e参数指定的) 在inventory中定义的变量(ansible_ssh_user等) 其他变量(role中.play中) 系统通过father_facts定义的变量 ...

  7. Pycharm搭建Django开发环境

    Pycharm搭建Django开发环境 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们大家都知道Django是python都一个web框架,因此大家需要自行安装python环境 ...

  8. 运维监控-Open-Falcon介绍

    运维监控-Open-Falcon介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Open-Falcon 介绍 监控系统是整个运维环节,乃至整个产品生命周期中最重要的一环,事 ...

  9. weblogic创建控制台启动脚本以及创建服务器

    一.创建控制台脚本 二.创建认证文件 通过上面创建的脚本进行启动的时候,会因为密码问题导致起不来,因为在startWebLogic.sh文件中,没有配置用户名和密码.而且通过上面创建的脚本,启动的时候 ...

  10. CentOS7用Mono和MonoDevelop写C#程序

    MonoDevelop 是个Linux平台上的开放源代码集成开发环境,主要用来开发Mono与.NET Framework软件. MonoDevelop 整合了很多Eclipse与Microsoft V ...