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.


  <c-child-lwc para1={reports}></c-child-lwc>


<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>


    const evt = event.currentTarget;


.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;
  • 1
    You can't just say "doesn't work" and expect a reasonable answer. How does it not work? What's wrong? Please edit your question to include the desired and unexpected behaviors.
    – sfdcfox
    Feb 3, 2020 at 12:44
  • Updated my question.
    – devforce
    Feb 3, 2020 at 12:55
  • Not an answer, but btw the code is inconsistent with the templates. For example, the childLWC template relies on a property in the childLWC "controller", called "para1", which doesn't exist in your code.
    – Phil W
    Feb 3, 2020 at 13:02
  • 1
    strange its working fine for me also see in pg is this how you wanted developer.salesforce.com/docs/component-library/tools/…
    – User6670
    Feb 3, 2020 at 13:59
  • 1
    i also deployed this to org and it works fine there too.
    – User6670
    Feb 3, 2020 at 14:20

2 Answers 2


I could not figure out what was wrong in childLWC component. I deleted it and created child component with same code again and this time it works

  • Probably CSS file wasn't deployed correctly to the server or something
    – ytiq
    Feb 5, 2020 at 10:06

For me, the issue was misspelling the name of the .css file

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .