为什么＃shadow-root存在于我的文档中，为什么它会覆盖我的CSS

Question

首先，我看过重复的内容

What is #shadow-root, and why does it put display none on my font awesome classes?

和

HTML / CSS - DIV Element hidden when it shouldn't be?

然而，这两个都表明问题与adblock有关，我完全禁用了adblock。

我更关心＃shadow-root的来源，因为我当然没有把它放在那里。

我已经读过Chrome中有一个选项可以禁用它（有趣的是我已禁用它...），但这意味着任何使用我网站的人都需要这样做，我宁愿只是完全废除它，因为它在我的应用程序中没有用处。

我还搜索并阅读了许多关于影子dom的文章，但没有一个人能够理解为什么它看似无缘无故。

从我在检查器/视图页面源中看到的内容，我的应用程序的全部内容都被渲染到这个阴影dom中，从而没有接收到我的任何样式。

我正在使用rails，react，redux，react-redux，react-router

Chrome开发者工具屏幕

页面源屏幕

请注意，源中没有任何反应应该呈​​现的内容。

其他信息： 在正常和隐身

中显示铬上的无样式页面

在safari中根本不起作用

Answer 1

许多chrome插件会自动在检查器中创建此阴影根。例如，自从我下载Vimium以来，我在chrome中打开的任何页面的底部都有一个shadowroot div。没什么值得担心的。

Answer 2

我遇到了同样的问题，发现Adblock Plus正在添加＃shadow-root。由于上面的资源，我能够确定问题

Answer 3

对我来说，它也是一个Adblocker（uBlock），它实际上隐藏了我正在制作的显示导入推文的网页的一部分。关闭我网站的广告拦截器。