Shadow DOM为何在检查模式下隐藏HTML元素？如何查看monday.com源码？

一、Shadow DOM为什么会在检查模式下“隐藏”HTML元素？ #

Shadow DOM本质是Web Components的核心封装特性，它的设计初衷就是帮开发者把组件的内部HTML结构、样式和行为彻底封装起来，和页面的其他代码隔离开——这样既不会让页面的全局样式污染组件内部，也不会让组件的样式乱跑影响全局，完美解决大型项目里的样式冲突问题。

你在检查模式里看到它“隐藏”元素，其实不是真的把元素删掉了，而是浏览器DevTools默认会把Shadow DOM的内容折叠或者默认不显示出来。这是因为组件开发者通常希望内部的实现细节不被随意篡改，保持组件的独立性和稳定性。比如咱们平时用的<input type="range">、<video>这些原生元素，背后其实都用了Shadow DOM，只是默认情况下DevTools没把内部结构展示出来而已。

二、在monday.com网站上查看Shadow DOM源码的解决办法 #

别发愁，只要在浏览器DevTools里开启对应的显示选项就能看到了，我以Chrome浏览器为例给你一步步说：

• 先打开DevTools：按F12快捷键，或者右键页面空白处选择“检查”
• 点击DevTools右上角的三个小点点（设置菜单）
• 在弹出的菜单里找到Settings选项，进入设置页面
• 在左侧菜单栏里选择Elements分类
• 找到Show user agent shadow DOM和Show shadow DOM这两个选项，把它们都勾选上
• 回到Elements面板，你就能看到带有#shadow-root标记的节点了，点击展开就能看到里面的HTML结构啦

如果开启后还是看不到，可能是网站用了动态加载或者更复杂的封装方式，你可以试试刷新页面后再检查，或者去Network面板里找找对应的组件资源。

内容的提问来源于stack exchange，提问作者Hung Trinh