示例：

<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. 动态代理之： com.sun.proxy.$Proxy0 cannot be cast to 问题

    转: 动态代理之: com.sun.proxy.$Proxy0 cannot be cast to 问题 2018年05月13日 00:40:32 codingCoge 阅读数:1211   版权声明 ...

  2. JVM调优工具

    JMap 首先要知道Java进程的pid. Windows: .. .. .. Linux: ps -ef | grep java 查看堆栈信息(jmap -heap pid) jmap -heap ...

  3. Tomcat 启动时 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context}

    在Eclipse 中,启动Tomcat 时,出现: 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting proper ...

  4. springboot 修改页面不重启

    shifr+alt+commond+/ <!-- 热部署模块 --><dependency> <groupId>org.springframework.boot&l ...

  5. parallels tools 安装

    │ - kernel-devel-2.6.32-358.el6.x86_64 │ │ - dkms

  6. linux 用户登陆信息查询

    1.查看命令历史 每个用户都有一份命令历史记录 查看$HOME/.bash_history 或者在终端输入: history 2.last命令 查看用户登录历史 此命令会读取 /var/log/wtm ...

  7. 解析：为什么设计师选择mac电脑居多？

    mac电脑的使用者中程序员和设计师居多,上篇文章说明了程序员选择mac的原因以及使用体验,这次,本文说明一下,设计师选择mac的原因. 解析:为什么程序员应该有一台Mac个人电脑? 1.外观. 设计师 ...

  8. Linux记录-HDFS副本机制

    1. 副本策略 NameNode具有RackAware机架感知功能,这个可以配置. 若client为DataNode节点,那存储block时,规则为:副本1,同client的节点上:副本2,不同机架节 ...

  9. Web API中的内容协商

    一.内容协商的概念 HTTP规范将内容协商定义为“当有多个格式可用时为给定响应选择最佳格式的过程”.HTTP中内容协商的主要机制是这些请求标头: Accept:响应可接受哪些媒体类型,例如“appli ...

  10. 解决Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.17 问题

    详细报错如下 Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.17 from http://maven ...