apply custom styling to FluentUI Accordion components (Blazor .NET 8)

I am struggling to figure out how to apply custom styling to elements of the FluentUI Accordion. As an example, I'd like to change the background color of the accordion "heading" element.

Here is the rendered HTML

<fluent-accordion expand-mode="multi"><fluent-accordion-item id="groupA"><span slot="heading">Heading</span>
        item content
    </fluent-accordion-item></fluent-accordion>

And here is an image of the element inspection. fluent-accordion-item div.heading element inspection

If I manually add "background: lightblue;" to the div.heading element (highlighted in the image) through browser inspection I get the desired result, but I can't figure out how to get that same result from source code edits.

Here is my code for the .razor component that generates the above...

@page "/fluentaccordiontest"

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inject BodyFont BodyFont

<FluentAccordion>
    <FluentAccordionItem Id="groupA" Heading="Heading" >
        item content
    </FluentAccordionItem>
</FluentAccordion>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await BodyFont.WithDefault("Comic Sans MS");
            StateHasChanged();
        }
    }

}

These other SO questions were similar, but did not result in a working solution for me:

• Overriding CSS of div inside a #shadow-root
• How to override css style of shadow dom
• Change Styles to FluentUI Progress Component in Blazor

I have attempted to apply styling both via CSS, and also via FluentUI Design Tokens.

Option 1: Design Tokens. This seems a workable solution path (BodyFont is successfully setting font to "Comic Sans MS" in my sample code) but I don't understand how to track down which DesignTokens component I need to set to get a desired styling result. Is there a reference list somewhere with explanations on effect? this was not helpful (enough).

Option 2: CSS. I'd rather set custom styling in CSS than in compiled code, but I've been unsuccessful in finding the right way to do this. I'm weak in CSS, and don't have a good understanding so that I can effectively troubleshoot. Here is the CSS file littered with my attempts. I have a poor understanding of how #shadow-root, :part, :slot are affecting things here but from other misc. reading it seems they are involved. Anybody have CSS code that penetrates to the element?

fluent-accordion::part(.heading) {
    background: lightblue !important;
}

.fluent-accordion-item {
    background: lightblue !important;
}
.fluent-accordion-item.heading {
    background: lightblue !important;
}

.fluent-accordion-item::part(.heading) {
    background: lightblue !important;
}

:host(.heading) {
    background: lightblue !important;
}

:host(fluent-accordion-item) {
    background: lightblue !important;
}

:host(fluent-accordion-item.heading) {
    background: lightblue !important;
}

::slotted(*) {
    background: lightblue !important;
}

I had the same problem and after a bit of mucking around managed to get things working. Important points seem to be that FluentAccordion and FluentAccordionItem need to be wrapped in in order to get the CSS isolation to work. Anyway give this a try:

fluentaccordiontest.razor.css

::deep > fluent-accordion-item::part(heading) {
    background-color: #CE1417 !important;
}

<div>
  <FluentAccordion>
    <div>
      <FluentAccordionItem Expanded="true">
        <HeadingTemplate>
          <div>
            Your header content
          </div>
        </HeadingTemplate>
      </FluentAccordionItem>
      <FluentAccordionItem>
        <HeadingTemplate>
          More Content
        </HeadingTemplate>
        <ChildContent>

        </ChildContent>
      </FluentAccordionItem>
    </div>
  </FluentAccordion>
</div>