0

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>
</lightning-accordion>
|improve this question
2

This is not possible directly. You can check this answer

Requote

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.

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.