示例：

<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. 第十八篇-Spinner下拉列表的使用

    效果图 MainActivity.java package com.example.aimee.spinnertest; import android.support.v7.app.AppCompat ...

  2. java 中 byte[]、File、InputStream 互相转换

    1.将File.FileInputStream 转换为byte数组: File file = new File("test.txt"); InputStream input = n ...

  3. selenium官方网站文档，testng官方网站文档

    selenium 阅读至grid部分,当前没有远程需求,搁置:https://www.seleniumhq.org/docs/07_selenium_grid.jsp testng http://te ...

  4. discuz 3.1论坛快照被百度劫持解决方案

    最近很郁闷,遇到一个很棘手的问题.我们公司有个论坛在百度查看快照信息的时候全部都是博彩信息,但是打开却无博彩信息显示.在快照中查看是这样的 百度快照查看图: 经过思考,怀疑是网站中有网页被改动了,在某 ...

  5. Ajax和Json的介绍(一)

    Ajax简介: 优点: 1.Ajax是一种网页开发技术,异步JavaScript和XML;(这样叫的原因是是因为ajax传递数据是用json格式的,而json和xml又类似,都是以键值对,josn是& ...

  6. python自动化开发-[第十一天]-Mysql

    今日概要: 1.初识mysql 2.MySQL的增删改查 3.主键.外键 4.组合和分组 一.数据库的由来 1.什么是数据库? 数据的仓库,在ATM,购物车中存储数据为目录,称为数据库 1.数据以表格 ...

  7. Java Web之表单重复提交问题

    上篇文章讲了验证码的制作,提及到了一个问题,就是表单重复提交的问题,可能在上次那个验证码中感觉不是那么的重要 现在我新写一个例子,转钱.通过这个例子你就知道表单重复提交有多恐怖了. 先来简单的介绍一下 ...

  8. SQL Server没有足够的内存继续执行程序

    有一个表的数据特别大,我点击生成脚本的时候,喜欢新建窗口,但是不行,数据量太大了,所以选择保存文件,保存到本地了.然后我点击执行,又报没有内存去执行...还是因为数据量太大了 解决办法,使用sqlcm ...

  9. JavaFX 简介

    JavaFX 介绍一提到Java的图形界面库,我们通常听到的都是Swing,或者更老一点的AWT,包括很多书上面介绍的也都是这两种.很多学校.培训班教学的也是这两种技术.但是其实这两种技术都已经过时很 ...

  10. Django之组件--中间件

    中间件 中间件是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到性能 自定义中间 ...