2

I have a child component that is used to recursively iterate through a tree. The parent component has css that is using the shadow dom and the child component is set to use the light dom.

While attempting to do the following below we observed that the css within the parent is not cascading down to the child component. It seems there is an extra <c-child> html tag that is interfering but I can't resolve the issue.

What I tried that didn't work

parent.html

<template for:each={items} for:item="item">
  <div key={item.id}>
     <c-child item={item]></c-child>
  </div>
</div>

parent.css

.myClass { position: relative; }

// not being applied once <c-child><ul>...</ul></c-child> is added to rendered html
.myClass li { margin-left: 1em; } 

// not being applied once <c-child><ul>...</ul></c-child> is added to rendered html
.myClass ul { color: blue; } 

child.html

<template lwc:render-mode="light">
  <ul class="myClass">
    <li> 
       <span>{item.name</span>
    <template for:each={item.children} for:item="child">
       <li key={child.id}>
         <c-child item={child}></c-child>
       </li>
    </template>
    </li>
  </ul>
</template>

child.js

import { LightningElement } from 'lwc';

export default class Child extends LightningElement {
  static renderMode = 'light';

  @api item;
}

rendered html

<div> <!-- parent --> 
  <c-child>
    <ul>
      <li> <span>...</span>
        <c-child>
          <ul> <!-- issue here: styles not applied here --> 
            <li> <span>...</span> <!-- issue here: styles not applied here --> 
                <c-child>
                  <ul> <!-- styles not applied here --> 
                     <li> <span>...</span> <!-- issue here: styles not applied here --> 
                      </li>
                 </ul>
                </c-child>
             </li>
          </ul>
        </c-child>
       <c-child>
          <ul>  <!-- styles not applied here --> 
            <li> <span>...</span>  <!-- styles not applied here --> 
             </li> 
          </ul>
        </c-child>
    </ul>
  </c-child>
</div>
       

0

You must log in to answer this question.