Lexical editor does not work inside Shadow DOM (web components)

[axelv]

Bug Description

When a Lexical editor is rendered inside a Shadow DOM (e.g., as part of a web component), text input does not work correctly. Characters do not appear when typing, and existing content can disappear. The editor is effectively non-functional inside Shadow DOM.

Steps to Reproduce

1. Create a web component with an open Shadow DOM (this.attachShadow({ mode: "open" }))
2. Create a React root inside the shadow root
3. Render a Lexical editor (e.g., using LexicalExtensionComposer + RichTextPlugin) inside that React root
4. Try to type in the editor

Expected: Characters appear normally, editor is fully functional.
Actual: Characters do not appear, content disappears. The editor is unusable.

Root Cause

getDOMSelection() in Lexical calls (targetWindow || window).getSelection():

// Lexical.dev.mjs:12078
function getDOMSelection(targetWindow) {
  return !CAN_USE_DOM ? null : (targetWindow || window).getSelection();
}

window.getSelection() does not reliably return selections inside Shadow DOM across browsers, causing Lexical's internal selection tracking and input handling to break.

Environment

• Lexical: 0.38.2
• Browser: Chrome 133 (also affects Firefox and Safari)
• React: 18
• Shadow DOM mode: open

Related Issues

• Feature: Editor within Custom Element Shadow DOM #4870 (closed as NOT_PLANNED)
• Bug: Binding to webcomponent shadow root fails #2119
• PR Add Lexical Shadow DOM Support #7790 (adds Shadow DOM support via getComposedRanges(), not yet merged)

Workaround

Rendering the editor in the Light DOM (outside Shadow DOM) resolves the issue. For web component use cases, this can be done by overriding createRenderRoot() to return this instead of a shadow root, or by slotting the contenteditable element into the Light DOM.

We would love to see PR #7790 merged to enable proper Shadow DOM support.