是否有最好的方法为影子根应用CSS？

Question

我在互联网上搜索了许多主题，所有主题都集中在使用javascript将CSS注入影子根目录中。但是，这种方式有一些局限性：降低网站的性能（因为我们不知道使用了多少个影子根，因此我们需要扫描所有元素以进行检查），如果影子根内部还有另一个影子根，则无效。 。

将CSS规则/文件应用于所有影子根和节点（包括页面内的影子根和此页面的影子根内的影子根）的最佳方法是什么。

让我们以该站点为例：https://creatoracademy.youtube.com/page/lesson/editing

-ytca-app
  --shadowroot
    ---ytca-header
       ----shadow-root
           -----div#header
    ---ytca-lesson-pages
       ----shadow-root
           -----div.ytca-page-section

我想对所有元素div#header，div.ytca-page-section及其子节点应用CSS。

因此，我尝试了以下CSS：

:host *, *::shadow *, * /deep/ *{ 
   background-color: black !important; 
   color: gray !important; 
   border:none !important;
}

他们没有工作！