How can i style the listbox element in the #shadow-root of FluentSelect

[madcoda9000]

Hello,

I'm using a FluentSelect in Multi mode. It is working as expected, but i want to modify the css of the rendered listbox.

I've tried the following so far (without success):

css:

:host(.listbox) {box-shadow:none !important;}
#listbox-1 {box-shadow:none !important;}

javascript:

function StyleListbox() {
    // Step 1: Select the host element (replace '.host-element' with the appropriate selector)
    const hostElement = document.querySelector('#roles-listbox');

    // Step 2: Access the shadow DOM
    console.log(hostElement);
    const shadowRoot = hostElement.shadowRoot;

    // Step 3: Select and style the shadow DOM element
    if(shadowRoot) {
        const listboxElement = shadowRoot.querySelector('.listbox'); // Replace '.listbox' with your desired selector
        listboxElement.style.boxShadow = '0 0 0px rgba(0, 0, 0, 0)'; // Apply your desired box-shadow
    }

I hope somone have an idea on how to access the listbox element in the shadow-root of FluentSelect

Best Regards
Sascha

[madcoda9000]

ok, i found it by myself:

Just if someone is interested...

Javascript:

function StyleRolesList() {
    // Step 1: Select the host element (replace '.host-element' with the appropriate selector)
    var hostElement = document.querySelectorAll('.rolesList');

    if(hostElement[0]) {
        // Step 2: Access the shadow DOM        
        var shadowRoot = hostElement[0].shadowRoot;
        // Step 3: Select and style the shadow DOM element
        var listboxElements = shadowRoot.querySelectorAll('.listbox'); // Replace '.listbox' with your desired selector
        listboxElements[0].style.boxShadow = 'none'; // Apply your desired box-shadow
    }
    
}

Result:

[vnbaaij]

Nice! I do need to mention though that by doing this, you are deviating from the Fluent design guidelines. You have every right to do so of course but because of these guidelines, it is not something we will support/facilitate from the library.

[madcoda9000]

yeah, you're completly right :-(

But as there is no functional FluentListbox (with Multi option), i had to do something. And I'am sure you'll agree that the box shadow in this case lokks not professional...

If you've a better idea to solve that, I'm open for every hint...

Best Regards
sascha

[sweco-vnchit]

Set --elevation-shadow-flyout to none should be better solution due to no js