I have a child LWC in another LWC and everything works apart from css in child LWC. I have not provided entire childLWC.js since the list in child component gets rendered as expected. Hence, I am only providing handleHoverChange method which is relevant to css.
childLWC.css does not apply to li items i.e. padding added in reportLabel css does not get applied. onmouseover event, color of text does not get changed as per backGroundCls. However, on inspect I can see handleHoverChange getting executed. Also, slds-dropdown in css file does not get applied to dropdown in div section i.e. it is not left aligned, max-height is not applied.
If I remove child component reference in parentLWC and include html,css and js code of childLWC in parentLWC, css works fine for all scenarios.
parentLWC does not have any css file. I have only provided relevant code snippet in childLWC.js and not entire js code.
parentLWC.html:
<template>
<lightning-card>
<c-child-lwc para1={reports}></c-child-lwc>
</lightning-card>
</template>
childLWC.html:
<template>
<div id="listbox-id-01" class="slds-dropdown" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<template for:each={para1} for:item="report">
<li role="presentation" class="slds-listbox__item" key={report.value} >
<a href="javascript:void(0);" style="color:black;">
<p key={report.value} onmouseover={handleHoverChange} class="reportLabel">{report.label}</p>
</a>
</li>
</template>
</ul>
</div>
childLWC.js
handleHoverChange(event){
const evt = event.currentTarget;
evt.classList.toggle('backGroundCls');
}
childLWC.css
.slds-dropdown {
left: 30%;
width: 250px;
overflow-y: auto;
max-height: 250px;
}
.backGroundCls {
color: rgb(0,109,204);
}
.reportLabel {
padding-bottom: 5px;
padding-left: 2px;
}
