0

This question already has an answer here:

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>

marked as duplicate by Pranay Jaiswal, glls, Vijay Ganji, Derek F, battery.cord Sep 25 at 14:15

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new 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.

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