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

Answer 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
}

Read more at MDN ::part