I am trying to apply the style to the nested shadow root element. but I do not know how to add for the nested shadow root element. So, How to access nested shadow root elements to apply 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>