示例：

<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. 利用pandas对numpy数组进行简单的科学计算

    二维数组转换为DataFrame pandas可直接进行科学计算形式: import numpy as np import pandas as pd a = [1,2,3] b = [4,5,6] # ...

  2. 激活miniconda2环境，出现activate命令不存在的解决方案（activate: No such file or directory）

    miniconda2版本比较低时会出现这种报错,通过更新miniconda2就可以解决这个问题,用到的命令行: /path/to/miniconda2/conda update conda 参考链接: ...

  3. Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public xxxxxxxx.

    最近在使用 springBoot开发的时候, 使用PostMan访问接口,  返回一个 404 ,  后台报一个 warn : Failed to read HTTP message: org.spr ...

  4. TensorFlow install

    $sudo pip install virtualenv Create a virtual environment (recommended) Create a new virtual environ ...

  5. 爬虫之requests请求库高级应用

    1.SSL Cert Verification #证书验证(大部分网站都是https) import requests respone=requests.get('https://www.12306. ...

  6. SQLServer 游标详解

    一.用到的数据 CREATE TABLE [dbo].[XSB]( ) NOT NULL, ) NOT NULL, [性别] [bit] NULL, [出生时间] [date] NULL, ) NUL ...

  7. M1-day08-数据库加锁

    一.关于数据库加锁主要分为几类 1.原生sql 1.开启事物 begin; select * from host for update; commit; 注意:INNODB支持表锁和行锁,MyISAM ...

  8. thinkpad yoga 12 / thinkpad s1 yoga / WS860

    s 序号 IP地址 MAC地址 主机名 设备商 1 192.168.3.6 34-02-86-29-46-8B Intel(R) Dual Band Wireless-AC 7265 Intel公司/ ...

  9. Mybatis笔记三：全局配置文件

    目录 配置文件 dtd提示 properties标签(不怎么用) typeAliases 自动把下划线换成驼峰命名 配置文件 看着这个配置文件,我们将对这个配置文件进行细致的讲解 <?xml v ...

  10. Visual Studio连接到TFS

    我在学校自己使用git,公司使用VSS,然后这个项目又使用TFS.Visual Studio连接到TFS是这样滴 1.点连接到团队项目 2.添加TFS服务器的url,写到你的http:XXX/tfs就 ...