Can we increase the lightning-accordion-section label font size

Question

Is it possible to change the lightning-accordion-section label font size, I tried by adding

class="slds-text-heading_medium" It print like below

Play Ground

Expecting to increase the Font Size and bold the text.

<lightning-accordion class="example-accordion"
                         onsectiontoggle={handleToggleSection}
                         active-section-name="B">
        <lightning-accordion-section name="A"  class="slds-text-heading_medium" label="Accordion Title A">
            <lightning-button-menu slot="actions"
                                  alternative-text="Show menu"
                                  icon-size="x-small"
                                  menu-alignment="right">
                <lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
                <lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
            </lightning-button-menu>
            <p>This is the content area for section A.</p>
            <p>.</p>
            <p>.</p>
            <p>.</p>
            <p>The section height expands to fit your content.</p>
        </lightning-accordion-section>

        <lightning-accordion-section name="B" label="Accordion Title B">
            <p>This is the content area for section B.</p>
            <p>.</p>
            <p>.</p>
            <p>.</p>
            <p>The section height expands to fit your content.</p>
        </lightning-accordion-section>

        <lightning-accordion-section name="C" label="Accordion Title C">
            <p>This is the content area for section C.</p>
            <p>.</p>
            <p>.</p>
            <p>.</p>
            <p>The section height expands to fit your content.</p>
        </lightning-accordion-section>
    </lightning-accordion>

Answer 1

No. Its not possible as its exposed as only attribute and not as slot and you do not have any other attributes to pass the style.

Note: You can change the style using javascript as static resource but this will be at your own risk as it is not documented and may break at any time with any upgrade.

Answer 2

Yes you can by using lightning-accordion Styling Hooks, for example refer the below code

.css

.accordionClass{
--sds-c-accordion-heading-font-size:1.5rem;

}

.html

<lightning-accordion allow-multiple-sections-open active-section-name={activeSections} class="accordionClass">

            <lightning-accordion-section name="SelectCustomer" label="Select Customer For Depot Registration">

Refer : https://www.lightningdesignsystem.com/components/accordion/

Answer 3

As per @salesforce-sas's answer, you cannot control this styling on the standard LWC component. If you look at the accordion section spec, you see that there are no attributes for controlling styling. The mention of styling in the description relates to styling the content of the section, not the section itself.

It is worth noting that LWC uses Shadow DOM, which isolates the component content from external influence (including CSS).

If you absolutely have to do this (and make your UX inconsistent with other Salesforce pages) then my recommendation is to use the SLDS blueprints and create your own enhanced accordion.

Answer 4

I was able to get the bold title and regular weight text by creating two css classes. The first has already been mentioned by Seemu Saikia and the second changes the weight of the text back to normal for the particular div element.

css :

.accordionClass {
    --slds-c-accordion-heading-font-size: 1.05rem;
    --slds-c-accordion-heading-line-height: 1.5;
    font-weight: bold;
}

.normalTextWeight {
    font-weight: normal;
}

Result :

Answer 5

Seemu Saikia provided a very good answer, I just would like to add something on top of it.

You may not be able to customise the logic of OOTB component, but for style, you can always find a way considering they are mainly driven by the CSS class or var.

Take your component as example, if you right click and inspect, you will notice that the font-size is driven by the slds css variable: -sds-c-accordion-heading-font-size.

What you did is nothing but overwrite the default slds css variable. Attach it with your own class makes sure the change only apples to the element you desired.

Or you can simply overwrite it in your css file to apply for all corresponding elements.