Estoy tratando de aplicar el estilo al elemento raíz de sombra anidado. pero no sé cómo agregar el elemento raíz de sombra anidado. Entonces, cómo acceder a los elementos raíz de la sombra anidados para aplicar CSS.

CSS:

 :host component1[details] > #maincontainer > component6[name=leftcontent] > .cover { padding:14px solid green; margin: 2px; }

HTML:

 <component1 details> #shadow-root(open) <style> ... </style> <div class="container> <component2> #shadow-root(open) <style>...</style> <div> <component3> #shadow-root(open) <style> ... </style> <component4> #shadow-root(open) <style>...</style> <component5> <div id="maincontainer"> <component6 name="leftcontent"> #shadow-root(open) <style> ... </style> <div class="cover"></div> <div class="cover"></div> <div class="cover"></div> </component6> </div> </component5> </component4> </component3> </div> </component2> </div> </component1>