lexical: Bug: Binding to webcomponent shadow root fails

Hopefully this might help others too and is just a patch for now. After, a lot of trial and error trying to make it work. Since my research project involved using text Editors. And the people on whose work I am basing my thesis on. They used lit-html and they too had issues trying to get their text editor working with the shadow DOM. https://github.com/PAIR-code/wordcraft

https://github.com/PAIR-code/wordcraft/blob/main/app/core/services/text_editor_service.ts

They ended up patching the current node in focus and the window.getSelection() which is what Lexical also seems to be using. So this solution works as a patch for now just call the getPatchSelection() before registering the different plugins and it should work even for components within the shadow DOM.

/**
 * We need to hack the window.getSelection method to use the shadow DOM,
 * since the mobiledoc editor internals need to get the selection to detect
 * cursor changes. First, we walk down into the shadow DOM to find the
 * actual focused element. Then, we get the root node of the active element
 * (either the shadow root or the document itself) and call that root's
 * getSelection method.
 */
export function patchGetSelection() {
    const oldGetSelection = window.getSelection.bind(window);
    window.getSelection = (useOld: boolean = false) => {
      const activeElement = findActiveElementWithinShadow();
      const shadowRootOrDocument: ShadowRoot | Document = activeElement
        ? (activeElement.getRootNode() as ShadowRoot | Document)
        : document;
      const selection = (shadowRootOrDocument as any).getSelection();
  
      if (!selection || useOld) return oldGetSelection();
      return selection;
    };
  }
  
  /**
   * Recursively walks down the DOM tree to find the active element within any
   * shadow DOM that it might be contained in.
   */
function findActiveElementWithinShadow(
    element: Element | null = document.activeElement
  ): Element | null {
    if (element?.shadowRoot) {
      return findActiveElementWithinShadow(element.shadowRoot.activeElement);
    }
    return element;
  }

All credits go to the wordcraft team contributers Andy Coen and G. Hussain Chinoy

FYI: seems like this might be a common problem and selection APIs across shadow DOM boundaries are being worked on

• https://github.com/quilljs/quill/pull/1805
• https://github.com/WICG/webcomponents/issues/79

In the meantime, I’ve opted to work around webcomponents with a simple class shim. Feel free to close this out unless you think there are better ways to work around this!