一个例子：
虽然UI上input field里显示的是Jerry，但是Chrome开发者工具里面并没有显示出来。
注意上图最下方，显示的input后面有#shadow-root.div.
打开settings elements区域的"Show user agent shadow DOM"即可：
现在能够在Chrome开发者工具里看到这个shadow DOM了：
html页面和Chrome开发者工具elements界面不一致的一个可能原因：没有在Chrome开发者工具里打开对Shadow DOM显示的支持
2021-12-08
114
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
html页面和Chrome开发者工具elements界面不一致的一个可能原因：没有在Chrome开发者工具里打开对Shadow DOM显示的支持
目录
相关文章
|
16天前
|
1月前
|
数据采集
前端开发
JavaScript
|
1月前
|
Web App开发
前端开发
JavaScript
|
2月前
|
应用服务中间件
|
3月前
|
JavaScript
|
3月前
|
Web App开发
数据采集
JavaScript
|
2天前
|
30天前
|
30天前
|
30天前
|
XML
Java
数据格式
热门文章
最新文章
1
《手把手教你》系列技巧篇（七）-java+ selenium自动化测试-宏哥带你全方位吊打Chrome启动过程（详细教程）
2
组态软件之万维组态介绍（web组态、html组态、vue2/vue3组态）
3
uni-app使用v-html输出富文本图片溢出解决
4
基于SpringBoot+HTML实现登录注册功能模块
5
Web前端全栈HTML5通向大神之路
6
HTML深度解析：更改文本颜色
7
有关Java发送邮件信息（支持附件、html文件模板发送）
8
如何使用HTML5的语义化标签来提高网站的可访问性？
9
一个强大的小程序富文本组件mp-html
10
html的常用标签
1
JavaScript DOM 操作：解释一下 cookie、sessionStorage 和 localStorage 的区别。
9
2
JavaScript DOM 操作：解释一下浏览器的同源策略。
9
3
react简单实现获取dom元素
15
4
常用的DOM操作方法
7
5
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
24
6
理解DOM树的加载过程（js的问题）
7
7
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
15
8
理解DOM树的加载过程
9
9
DOM节点类型
6
10
深入了解 JavaScript 中的 DOM 和 BOM
16
