示例：

<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. 跟我一起写一个hello-world react组件并发布到npm

    第一步:初始化我们的配置 $ mkdir react-hello-world $ cd react-hello-world/ $ npm init -y 修改我们的package.json文件 //p ...

  2. 第二十七篇-新建Activity

    新建Activity实现页面之间的跳转与传值. layout1.xml <?xml version="1.0" encoding="utf-8"?> ...

  3. jQuery 传递对象参数到Spring Controller

    当jQuery 发送ajax请求需要传递多个参数时,如果参数过多,Controller接收参数时就需要定义多个参数,这样接口方法会比较长,也不方便.Spring可以传递对象参数,将你需要的所有查询条件 ...

  4. TestNg 5.类分组

    类分组是可以给类去分组,几个类分成不同的组. 比如,建立3个类GroupsOnClass1,GroupsOnClass2,GroupsOnClass3.   GroupsOnClass1和Groups ...

  5. echarts map地图设置外边框或者阴影

    geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...

  6. numpy知识点

    1.nonzero 对于一维数据来说,将返回符合条件的 下标 >>> b1 = np.array([True, False, True, False]) >>> n ...

  7. vue离开页面销毁定时器

    beforeDestroy() { if(this.timer) { clearInterval(this.timer); //关闭 }  //利用vue的生命周期函数 vue 是单页面应用,路由切换 ...

  8. [NIO-3]Socket通道

    Socket通道 上文讲述了通道.文件通道,这篇文章来讲述一下Socket通道,Socket通道与文件通道有着不一样的特征,分三点说: 1.NIO的Socket通道类可以运行于非阻塞模式并且是可选择的 ...

  9. golang实现tcp编程

    实现简单的tcp服务 package main import ( "fmt" "net" ) func main() { fmt.Println("服 ...

  10. HDU 1038(速度里程计算 **)

    题意是已知车轮的直径,圈数和时间,求所行驶的里程和速度. 单位换算,代码如下: #include <bits/stdc++.h> using namespace std; const do ...