Feature request: pass a HTMLElement to instantsearch container in order to support Shadow DOM

[davie-robertson]

TLDR; it does work with shadowDom, but a good web component example would be a great help

I've been looking at autocomplete and instantsearch as I am working on implementing Algolia search within a modern web-component based app (using lit-element) and therefore I need to work with shadowDom/shadowRoot.

I was wondering why we don't just pass container as a HTMLElement rather than a string, so:

instantsearch.widgets.searchBox({
    container: '#searchbox',
  })

would become

const searchbox = this.shadowRoot?.querySelector<HTMLElement>('#searchbox' );
instantsearch.widgets.searchBox({
container: searchbox,
 })

Then I noticed the existing getHTMLElement.js code:

import { invariant } from '@algolia/autocomplete-shared';
export function getHTMLElement(environment, value) {
  if (typeof value === 'string') {
    var element = environment.document.querySelector(value);
    invariant(element !== null, "The element ".concat(JSON.stringify(value), " is not in the document."));
    return element;
  }
  return value;
}

so if typeof value !=== 'string' then we return value, which could be a HTMLElement I guess, however the library isn't rendering any of the searchbox, hits or paginations elements despite them being passed without error.

I've searched for references to Algolia and shadowroot/dom and not found anything, is there some documentation that I've missed?

Edit: I found an error in my code when adding the following to the DOM

<div id="autocomplete"></div>
<div id="hits"></div>
<div id="pagination"></div> 

I had placed them inside a material/web input element by mistake, so they now render in the DOM.

I still think a nice simple web component for Algolia would be a good idea. I'll share my code when I get it working in a responsive lit based PWA