I can't change the CSS of the accordion title because of the shadow DOM in lwc. Is there any way to accomplish that?

Here is the code:

<lightning-accordion onsectiontoggle={handleToggleSection} active-section-name={itemConfig} allow-multiple-sections-open >
    <lightning-accordion-section name="MyForm" label="MyForm" class="accordionPadding_small"></lightning-accordion-section>

1 Answer 1


This is not possible directly. You can check this answer


LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree.

That being said, there is the on-going ::part and ::theme proposal that would allow components to safely expose some of their internals outside their shadow tree to be customized. This feature will be shipped in future releases and the rest of the browser vendors are supportive. We are currently evaluating how to add this in LWC and in the lightning base components.

Also note that although officially undocumented, you can change the CSS through static resource CSS file and by using loadStyle - this can reach inside LWC shadow DOM. There is no guarantee that this will work in future releases.


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