How to override css style of shadow dom

Question

I am using the fluent ui web component for autocomplete drop-down. I want to change the background of the drop-down box but there is a #shadow-root(open) created which I am not able to override. So please help me how to override this shadow dom.

I attached the image of my inspect where I want to override .control class inside the #shadow-root

Can you edit shadow root content? – Anil kumar Feb 16 '23 at 08:29 — Anil kumar, Feb 16 '23 at 08:29
No I am not able to edit shadow root – Poojan3037 Feb 16 '23 at 08:34 — Poojan3037, Feb 16 '23 at 08:34

score 1 · Accepted Answer · answered Feb 16 '23 at 08:38

1

Div content has part attribute. It make your work done.
Add this line in your css file

fluent-combobox::part(control) {
    //add your css properties
}

How to override css style of shadow dom

1 Answers1