Detached mode ignores getEnvironmentProps().root, breaking Shadow DOM

[ntdrun]

Hello Algolia Team,

I'm integrating Autocomplete into an environment with aggressive global CSS (a WordPress theme). To avoid style conflicts, I need to use Shadow DOM for proper isolation.

However, the current implementation of detached mode prevents this.

The Problem:

The detached mode ignores the root: shadowRoot passed to getEnvironmentProps and always appends the .aa-DetachedOverlay to document.body. This breaks encapsulation and causes two main issues:

1. Broken Styles: The UI is affected by global CSS.
2. Broken Functionality: Buttons (like 'Cancel') and event listeners fail because the library can't find elements inside the Shadow DOM.

Minimal Reproduction Code:

<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@1/dist/umd/index.production.js"></script>
<div id="autocomplete-host"></div>

<script>
  const host = document.querySelector('#autocomplete-host');
  const shadow = host.attachShadow({ mode: 'open' });

  const autocompleteContainer = document.createElement('div');
  shadow.appendChild(autocompleteContainer);
  
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@1/dist/theme.min.css';
  shadow.appendChild(link);

  window['@algolia/autocomplete-js'].autocomplete({
    container: autocompleteContainer,
    detachedMediaQuery: 'all', // Force detached mode
    getEnvironmentProps: () => ({ root: shadow }), // Set Shadow DOM as the root
    getSources: () => [{
        sourceId: 'test',
        getItems: () => [{ name: 'Item 1' }]
    }]
  });
</script>

My Request:

Could you please update the detached mode to render its overlay inside the provided root from getEnvironmentProps?

This fix is essential for developers who need to build encapsulated components.

Thank you