Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
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>
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
::partand::themeproposal 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.
