示例：

<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. （转）c++ 回调函数

    https://www.cnblogs.com/chenyuming507950417/archive/2012/01/02/2310114.html 今天讨论下C/C++中的回调函数. 在理解“回调 ...

  2. 4.django学习模板

    ##引用模板 步骤: 在应用目录下创建templates目录,在目录下创建html文件 在views.py返回render(渲染) 1.requests请求本身,2.模板文件,3.后台传递到前端的数据 ...

  3. 三台机器之间ssh互信配置

    三台机器之间ssh互信配置 环境介绍:192.168.65.128    my1-222192.168.65.129  my2-223192.168.65.130    web224 # 步骤一:# ...

  4. jsr223 md5

    import java.security.MessageDigest; String content = "xxx"; MessageDigest digest = Message ...

  5. SearchServer Elasticsearch Cluster / kibana

    S 使用nginx代理kibana并设置身份验证 https://blog.csdn.net/wyl9527/article/details/72598112 使用nginx代理kibana并设置身份 ...

  6. Redis之路

    前言:数据库是一切数据的源头,因此我们没有逃避的理由 (一) 什么是redis? redis是nosql(not noly sql)产品中最为出色的一种非关系型的数据库,主要包括以下几种存储结构:St ...

  7. mysql：insert插入数据过慢如何解决，设置innodb_flush_log_at_trx_commit为0就能解决

    问题: 最近在做性能测试,造数据,发现insert好慢,只有几十条每秒,很奇怪,最后再网上找到了原因. 网文如下: MY SQL insert 速度过慢 最近在用MySQL做存储,测试中发现插入数据太 ...

  8. 修改ScriptBundle 生成顺序

    ScriptBundle 一般用法 C#的代码如下: bundles.Add(new ScriptBundle("~/bundles/jqueryval") .Include(&q ...

  9. 他山之石--机器学习 step by step

    练习使用的数据 diabetes.csv 备用百度网盘地址 输入变量与输出变量均为连续变量的预测问题是回归问题: 输出变量为有限个离散变量的预测问题成为分类问题: 其实回归问题和分类问题的本质一样,都 ...

  10. python-虚拟环境搭建

    虚拟环境 需求:        --公司之有一台服务器        -目前运行这一个5年前开发的Django项目,基于1.5        -现在要基于Django2.0开发一套程序         ...