diff --git a/dev-examples/shadow-dom-web-component/README.md b/dev-examples/shadow-dom-web-component/README.md
new file mode 100644
index 00000000000..ac3b4549a9f
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/README.md
@@ -0,0 +1,169 @@
+# Lexical Web Component (Shadow DOM) Example
+
+A framework-free [Vite](https://vitejs.dev/) app that packages a Lexical
+rich-text editor as a **custom element** (`<lexical-editor>`) whose toolbar,
+styles, and `contentEditable` all live inside an **open `ShadowRoot`** —
+the scenario from
+[facebook/lexical#2119](https://github.com/facebook/lexical/issues/2119),
+[#6709](https://github.com/facebook/lexical/issues/6709), and
+[#8125](https://github.com/facebook/lexical/issues/8125).
+
+Where the sibling [`shadow-dom`](../shadow-dom) example demonstrates a React
+app with the editor in a shadow root and the toolbar outside it, this one
+demonstrates the inverse packaging: a fully self-contained web component.
+The demo page mounts four instances — three light-DOM `<lexical-editor>`
+hosts inside the form (a `required` notes editor, a themable summary editor,
+and a pre-rendered editor that hydrates from `<template shadowrootmode="open">`)
+plus a fourth instance inside a wrapper `<div>` that opens its own shadow root,
+so the editor's contentEditable sits two shadow boundaries below the document
+and exercises the multi-level walk through `getDOMShadowRoots`. Everything
+runs on platform APIs only:
+
+- `Element.attachShadow({mode: 'open'})` in `connectedCallback`, with the
+  editor built by `@lexical/extension`'s `buildEditorFromExtensions` and torn
+  down (`editor.dispose()`) in `disconnectedCallback`.
+- **Form association** through the standard
+  [`ElementInternals`](https://developer.mozilla.org/docs/Web/API/ElementInternals)
+  API — each editor submits its serialized editor state with the surrounding
+  `<form>`, no hidden `<input>` required.
+- **`required` validation** through
+  [`ElementInternals.setValidity`](https://developer.mozilla.org/docs/Web/API/ElementInternals/setValidity),
+  driven by the editor's plain text content. A `<lexical-editor required>`
+  participates in `form.checkValidity()` and the browser's native invalid-form
+  UI just like a `<textarea required>`.
+- **`disabled` and `readonly` attributes** that flip Lexical's editable
+  state. `disabled` also drops the editor out of `FormData` and skips
+  validation, matching `<input disabled>`; the
+  [`formDisabledCallback`](https://developer.mozilla.org/docs/Web/API/Web_components/Using_custom_elements#form-associated_callbacks)
+  picks up an ancestor `<fieldset disabled>` automatically.
+- **CSS custom property theming** — the editor exposes `--lexical-bg`,
+  `--lexical-fg`, and a small palette of toolbar variables on its host
+  element. The page redefines them to recolour the editor; inherited
+  custom properties cross the shadow boundary on their own, so the
+  internal layout stays private.
+- **Toolbar slot** — `<button slot="toolbar-extra">` projects a
+  light-DOM button into the editor's toolbar row. The button stays in
+  the page (its click never crosses the boundary), but the page can drive
+  the editor through the host's public API.
+- **Floating selection popover** — the editor emits a composed
+  `lexical-selection-rect` `CustomEvent` carrying the live viewport
+  rect of the selection inside its shadow root, computed through
+  Lexical's `getDOMSelectionRangeAndPoints`. A page-level
+  [popover](https://developer.mozilla.org/docs/Web/API/Popover_API)
+  positions itself from those coordinates and drives bold / italic /
+  underline back through the host's editor.
+- A composed `input` event that crosses the shadow boundary so the page can
+  observe edits.
+- Selection inside the shadow root is resolved by Lexical itself via
+  `Selection.getComposedRanges` / `Selection.direction`, and focus via
+  `ShadowRoot.activeElement`.
+
+## Running
+
+From the repository root:
+
+```sh
+pnpm install
+pnpm -C dev-examples/shadow-dom-web-component dev
+```
+
+Then open the printed URL. Try:
+
+- Typing in any of the four editors and switching between them (each keeps
+  its own selection and history).
+- Selecting words with `Alt`/`Ctrl` + `Shift` + arrow keys, then using the
+  in-shadow toolbar buttons — they reflect the selection's formats.
+- Word/line deletion with `Alt`/`Ctrl` + `Backspace`/`Delete`.
+- Submitting the form to see each editor's serialized state in the output.
+- Submitting the form while the first editor (`required`) is empty: the
+  browser blocks the submit and surfaces its native validation tooltip on
+  the editor.
+- Clicking the **Clear** button next to the notes toolbar — that button
+  lives in the light DOM and is projected through the `toolbar-extra`
+  slot, then drives the editor through the host's public API.
+- Toggling the **Lock the summary editor** checkbox to flip the
+  `readonly` attribute on the summary editor, then trying to type
+  inside it: the contentEditable refuses input, but the form still
+  submits the value.
+- Selecting a few words in either editor — the floating B / I / U
+  popover appears anchored under the selection (in the page, not the
+  shadow root), and clicking it formats the text through the editor.
+- Switching the OS or browser between light and dark mode (or
+  redefining `--lexical-bg`, `--lexical-fg`, etc. in the page CSS) to
+  see how page-side CSS variables retheme each editor without touching
+  its shadow root.
+
+## Tests
+
+[Playwright](https://playwright.dev/) tests in [`tests/`](./tests) cover the
+editors rendering in independent shadow roots (including the nested
+editor inside the wrapper shadow root), typing and formatting, editor
+independence, word deletion, `ElementInternals` form association, the
+composed `input` event crossing the shadow boundary, and the floating
+popover anchoring to a selection inside the nested shadow root. They
+start the dev server automatically:
+
+```sh
+pnpm -C dev-examples/shadow-dom-web-component exec playwright install chromium
+pnpm -C dev-examples/shadow-dom-web-component test
+```
+
+## What's covered
+
+This example aims to be a full reference a production user can copy out.
+The Playwright suite covers each of the surfaces above plus a second
+round of audit items:
+
+- DOM-move state round-trip (`disconnectedCallback` caches the
+  serialized state, `connectedCallback` restores it)
+- `delegatesFocus: true` on the shadow root + `tabindex="0"` on the
+  contentEditable
+- `host.setCustomValidity()` + the standard `validity` / `willValidate`
+  / `checkValidity` / `reportValidity` surface
+- `formAssociatedCallback` + `host.form`, `formResetCallback`,
+  `formDisabledCallback`, `formStateRestoreCallback` (bfcache / autocomplete)
+- The standard `inert` attribute, `aria-label` / `aria-invalid` /
+  `role="textbox"` mirroring
+- A composed `lexical-validity-change` event for a visible error
+  message
+- `@media (prefers-color-scheme: dark)` / `(prefers-reduced-motion)` /
+  `(forced-colors: active)` inside the shadow stylesheet
+- Declarative shadow DOM (`<template shadowrootmode>`) — the third
+  editor on the demo page pre-renders its shadow content and our
+  `connectedCallback` reuses the existing `.content` element instead
+  of creating a fresh contentEditable
+- Hardened lifecycle: a duplicate `customElements.define` of the
+  same tag throws `NotSupportedError` (the shipped helper guards
+  against this); a host that fails to build doesn't crash the
+  surrounding page
+
+The playground e2e suite (`packages/lexical-playground/__tests__/e2e/ShadowDOM.spec.mjs`)
+covers the corresponding playground-side surfaces: markdown shortcuts
+(`# heading`, `- list`) and `@lexical/list` inside the shadow root,
+`@lexical/history` undo/redo, the tree-view mirror, pointer events
+(`composedPath` recovery for touch / pen / mouse), HTML paste
+sanitization (a `<script>` tag is stripped), a large keyboard input
+that keeps the reconciler responsive, image insert + paste,
+NodeSelection on image click, blur + re-focus through the shadow
+boundary, Korean and Chinese IME composition cycles, and yjs
+convergence between two clients each rendered inside its own open
+shadow root.
+
+`lexical-devtools` descends through open shadow roots using the same
+helpers this PR adds (`getDOMShadowRoots` / `getActiveElementDeep` /
+`getEditorPropertyFromDOMNode`), so it resolves the shadow-mounted
+editor without dev-example-side glue. Closed-mode shadow roots remain
+opaque to a page-level integration by spec — the concept page documents
+the limitation and the browser-unit suite verifies the helpers behave
+correctly when a host attaches a closed root.
+
+A handful of newer platform APIs are not exercised by this single
+example because they slot in at the page layer rather than the editor
+itself: the
+[View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API)
+animates between shadow-mounted instances on `document.startViewTransition`
+without any editor-side glue, and the
+[CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API)
+(`Highlight` + `::highlight()`) styles ranges that span the shadow
+boundary as long as the page hands them un-retargeted boundary points —
+the same shape `getDOMSelectionRangeAndPoints` already returns.
diff --git a/dev-examples/shadow-dom-web-component/index.html b/dev-examples/shadow-dom-web-component/index.html
new file mode 100644
index 00000000000..f795c10a391
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/index.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lexical Web Component (Shadow DOM) Example</title>
+  </head>
+  <body>
+    <div class="App">
+      <h1>Lexical as a Web Component</h1>
+      <p class="App-blurb">
+        Two independent
+        <code>&lt;lexical-editor&gt;</code>
+        custom elements, each fully encapsulated in its own open shadow root —
+        toolbar, styles and
+        <code>contentEditable</code>
+        included. No React, no frameworks. They are form-associated via
+        <code>ElementInternals</code>
+        , so submitting the form below collects each editor's serialized state.
+        The first editor uses the standard
+        <code>required</code>
+        attribute, so the form refuses to submit while it is empty. The second
+        editor is themed entirely from the page through inherited CSS custom
+        properties — the editor's internal styles stay private, but the page can
+        recolour every surface from outside.
+      </p>
+      <form id="demo-form">
+        <label>
+          Notes
+          <small>(required)</small>
+          <lexical-editor
+            name="notes"
+            placeholder-text="Try typing, selecting words, and formatting…"
+            required
+            aria-label="Notes editor">
+            <button slot="toolbar-extra" type="button" data-clear>Clear</button>
+          </lexical-editor>
+          <span class="error" id="notes-error" hidden aria-live="polite">
+            This field can't be empty.
+          </span>
+        </label>
+        <label>
+          Summary
+          <lexical-editor
+            name="summary"
+            placeholder-text="A second editor, in its own shadow root."
+            aria-label="Summary editor"></lexical-editor>
+        </label>
+        <label class="control">
+          <input id="summary-readonly" type="checkbox" />
+          Lock the summary editor (sets the standard
+          <code>readonly</code>
+          attribute)
+        </label>
+        <label class="control">
+          <input id="summary-inert" type="checkbox" />
+          Make the summary editor
+          <code>inert</code>
+          (focus, pointer events and selection skip the subtree — crosses the
+          shadow boundary on its own)
+        </label>
+        <p id="last-edited">Last edited: (none)</p>
+        <button type="submit">Submit form</button>
+        <button type="reset">Reset form</button>
+      </form>
+      <pre id="form-output"></pre>
+      <hr />
+      <!--
+        Declarative Shadow DOM: the HTML parser attaches the open shadow
+        root from the inline <template> before our element's
+        connectedCallback runs. The element walks in already wearing a
+        `.content` div so we reuse it instead of creating a fresh
+        contentEditable. The editor's initial state still replaces the
+        pre-rendered children — `@lexical/html`'s
+        `$generateNodesFromDOM` would let a downstream user import that
+        content; this example just notes the integration point.
+      -->
+      <label>
+        Pre-rendered (declarative shadow DOM)
+        <lexical-editor name="prerendered" placeholder-text="Hydrated.">
+          <template shadowrootmode="open">
+            <div class="content" data-prerendered="true">pre-rendered text</div>
+          </template>
+        </lexical-editor>
+      </label>
+      <hr />
+      <!--
+        Nested shadow roots: a wrapper <div> attaches its own open shadow
+        root, and a <lexical-editor> mounts inside *that* shadow tree. The
+        editor's contentEditable is now two shadow boundaries below the
+        document, exercising getDOMShadowRoots' multi-level walk and the
+        per-shadow-root scroll listeners.
+      -->
+      <label>
+        Nested shadow (page → wrapper shadow → editor shadow)
+        <div id="nested-host"></div>
+      </label>
+    </div>
+    <!--
+      A light-DOM floating popover that anchors to the live selection rect
+      inside either editor's shadow root. The page never reaches into the
+      shadow root — it positions itself from coordinates the editor emits
+      through a composed CustomEvent.
+    -->
+    <div id="format-popover" popover="manual">
+      <button type="button" aria-label="Bold" data-format="bold">
+        <b>B</b>
+      </button>
+      <button type="button" aria-label="Italic" data-format="italic">
+        <i>I</i>
+      </button>
+      <button type="button" aria-label="Underline" data-format="underline">
+        <u>U</u>
+      </button>
+    </div>
+    <script src="/src/main.ts" type="module"></script>
+  </body>
+</html>
diff --git a/dev-examples/shadow-dom-web-component/package.json b/dev-examples/shadow-dom-web-component/package.json
new file mode 100644
index 00000000000..7c047a7c2d3
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@lexical/dev-shadow-dom-web-component-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "playwright install chromium && playwright test"
+  },
+  "dependencies": {
+    "@lexical/extension": "workspace:*",
+    "@lexical/history": "workspace:*",
+    "@lexical/rich-text": "workspace:*",
+    "lexical": "workspace:*"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.61.0",
+    "@rollup/rollup-darwin-arm64": "4.61.0",
+    "@rollup/rollup-win32-x64-msvc": "4.61.0",
+    "@rollup/wasm-node": "4.61.0"
+  }
+}
diff --git a/dev-examples/shadow-dom-web-component/playwright.config.ts b/dev-examples/shadow-dom-web-component/playwright.config.ts
new file mode 100644
index 00000000000..0d01c718260
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/playwright.config.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {PlaywrightTestConfig} from '@playwright/test';
+
+const PORT = 4327;
+
+const config: PlaywrightTestConfig = {
+  testDir: 'tests',
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  use: {baseURL: `http://localhost:${PORT}`},
+  webServer: {
+    command: 'pnpm run dev',
+    port: PORT,
+    reuseExistingServer: true,
+  },
+};
+
+export default config;
diff --git a/dev-examples/shadow-dom-web-component/src/LexicalEditorElement.ts b/dev-examples/shadow-dom-web-component/src/LexicalEditorElement.ts
new file mode 100644
index 00000000000..1323c0772fb
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/src/LexicalEditorElement.ts
@@ -0,0 +1,770 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {buildEditorFromExtensions} from '@lexical/extension';
+import {HistoryExtension} from '@lexical/history';
+import {RichTextExtension} from '@lexical/rich-text';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  defineExtension,
+  FORMAT_TEXT_COMMAND,
+  getDOMSelectionRangeAndPoints,
+  getDOMShadowRoots,
+  type LexicalEditor,
+  REDO_COMMAND,
+  type TextFormatType,
+  UNDO_COMMAND,
+} from 'lexical';
+
+// Styles live inside the shadow root, encapsulated from the page. Colours
+// and font are surfaced as CSS custom properties so the page can theme each
+// editor from the outside without reaching across the shadow boundary —
+// inherited properties cross naturally.
+const STYLE_SHEET = `
+  :host {
+    --lexical-bg: #fff;
+    --lexical-fg: #1f2328;
+    --lexical-border: #ddd;
+    --lexical-toolbar-bg: #fafafa;
+    --lexical-toolbar-divider: #eee;
+    --lexical-toolbar-hover-bg: #ececec;
+    --lexical-toolbar-pressed-bg: #e0e7ff;
+    --lexical-toolbar-pressed-border: #c7d2fe;
+
+    display: block;
+    border: 1px solid var(--lexical-border);
+    border-radius: 8px;
+    background: var(--lexical-bg);
+    color: var(--lexical-fg);
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+  .toolbar {
+    display: flex;
+    gap: 4px;
+    padding: 6px;
+    border-bottom: 1px solid var(--lexical-toolbar-divider);
+    background: var(--lexical-toolbar-bg);
+    border-radius: 8px 8px 0 0;
+  }
+  .toolbar button {
+    min-width: 28px;
+    height: 28px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-size: 13px;
+  }
+  .toolbar button {
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+  }
+  .toolbar button:hover {
+    background: var(--lexical-toolbar-hover-bg);
+  }
+  .toolbar button[aria-pressed='true'] {
+    background: var(--lexical-toolbar-pressed-bg);
+    border-color: var(--lexical-toolbar-pressed-border);
+  }
+  .toolbar .toolbar-spacer {
+    flex: 1;
+  }
+  .toolbar ::slotted(button) {
+    min-width: 28px;
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid var(--lexical-border);
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-size: 13px;
+  }
+  .toolbar ::slotted(button:hover) {
+    background: var(--lexical-toolbar-hover-bg);
+  }
+  .content {
+    min-height: 110px;
+    padding: 10px 12px;
+    outline: none;
+    font-size: 15px;
+    line-height: 1.5;
+  }
+  .content p {
+    margin: 0 0 6px 0;
+  }
+  .bold { font-weight: bold; }
+  .italic { font-style: italic; }
+  .underline { text-decoration: underline; }
+
+  /* Print stylesheet — drop the toolbar and host chrome so the
+   * editor's content prints cleanly. Each shadow root carries its
+   * own copy of this rule, so multi-instance pages print each
+   * editor's content with consistent typography. */
+  @media print {
+    :host {
+      border: none;
+      box-shadow: none;
+    }
+    .toolbar {
+      display: none;
+    }
+  }
+
+  /* The page sees these media queries inside the shadow root the same way
+   * it sees them in the light DOM. Each editor adapts to the user's OS
+   * preferences on its own — the page only needs to override variables
+   * when it wants to opt out of (or force) a colour scheme. */
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --lexical-bg: #1c1d22;
+      --lexical-fg: #e6e6e9;
+      --lexical-border: #2d2f36;
+      --lexical-toolbar-bg: #25262c;
+      --lexical-toolbar-divider: #2d2f36;
+      --lexical-toolbar-hover-bg: #32343a;
+      --lexical-toolbar-pressed-bg: #2a2f4a;
+      --lexical-toolbar-pressed-border: #3a4267;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .toolbar button,
+    .toolbar ::slotted(button) {
+      transition: none;
+    }
+  }
+  /* Windows High Contrast / forced-colors map our custom palette to the
+   * user's system colours, so the editor stays usable in the high-contrast
+   * theme without losing focus indicators or borders. */
+  @media (forced-colors: active) {
+    :host {
+      --lexical-border: CanvasText;
+      --lexical-toolbar-divider: CanvasText;
+      --lexical-toolbar-pressed-border: Highlight;
+    }
+    .toolbar button[aria-pressed='true'] {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+`;
+
+const TEXT_FORMATS: readonly TextFormatType[] = ['bold', 'italic', 'underline'];
+
+/**
+ * `<lexical-editor>`: a self-contained rich-text editor web component.
+ *
+ * Everything — toolbar, contentEditable, styles — lives inside an open
+ * ShadowRoot attached in `connectedCallback`, demonstrating that Lexical
+ * works fully encapsulated behind a shadow boundary using platform selection
+ * APIs (Selection.getComposedRanges / ShadowRoot.activeElement).
+ *
+ * The element is form-associated through the standard ElementInternals API:
+ * its form value is the serialized Lexical editor state (JSON), updated on
+ * every editor update. It also dispatches a composed `input` event so light
+ * DOM listeners can observe edits.
+ */
+export class LexicalEditorElement extends HTMLElement {
+  static formAssociated = true;
+  static observedAttributes = [
+    'required',
+    'disabled',
+    'readonly',
+    'aria-label',
+    'spellcheck',
+  ];
+
+  private internals: ElementInternals;
+  private editor: LexicalEditor | null = null;
+  private disposeEditor: (() => void) | null = null;
+  private formDisabled = false;
+  // Cached serialized state from the previous mount, used to round-trip
+  // the editor across DOM moves the same way `<input>` and `<textarea>`
+  // round-trip their `value` attribute. Reset on the initial mount and
+  // refilled in `disconnectedCallback`.
+  private pendingState: string | null = null;
+  private customValidityMessage = '';
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+  }
+
+  /** The serialized Lexical editor state (JSON), as submitted with forms. */
+  get value(): string {
+    return this.editor
+      ? JSON.stringify(this.editor.getEditorState().toJSON())
+      : '';
+  }
+
+  set value(serializedEditorState: string) {
+    const editor = this.editor;
+    if (editor !== null && serializedEditorState !== '') {
+      editor.setEditorState(editor.parseEditorState(serializedEditorState));
+      this.updateValidity();
+    }
+  }
+
+  /**
+   * Whether this editor's `<form>` should block submission when it has no
+   * text content. Mirrors `<input required>` / `<textarea required>`.
+   */
+  get required(): boolean {
+    return this.hasAttribute('required');
+  }
+
+  set required(value: boolean) {
+    if (value) {
+      this.setAttribute('required', '');
+    } else {
+      this.removeAttribute('required');
+    }
+  }
+
+  /**
+   * Mirrors `<input disabled>`. A disabled editor is non-editable, drops out
+   * of `FormData` (the standard form-associated custom-element behaviour),
+   * and skips constraint validation.
+   */
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(value: boolean) {
+    if (value) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  /**
+   * Mirrors `<input readonly>`. A read-only editor is non-editable but still
+   * submits its value and participates in constraint validation.
+   */
+  get readOnly(): boolean {
+    return this.hasAttribute('readonly');
+  }
+
+  set readOnly(value: boolean) {
+    if (value) {
+      this.setAttribute('readonly', '');
+    } else {
+      this.removeAttribute('readonly');
+    }
+  }
+
+  /** The underlying LexicalEditor, for programmatic access from the page. */
+  getEditor(): LexicalEditor | null {
+    return this.editor;
+  }
+
+  // Mirror the standard constraint-validation surface from `<input>` /
+  // `<textarea>`. ElementInternals tracks the state but does not auto-expose
+  // it on the host element.
+  get validity(): ValidityState {
+    return this.internals.validity;
+  }
+
+  get validationMessage(): string {
+    return this.internals.validationMessage;
+  }
+
+  get willValidate(): boolean {
+    return this.internals.willValidate;
+  }
+
+  checkValidity(): boolean {
+    return this.internals.checkValidity();
+  }
+
+  reportValidity(): boolean {
+    return this.internals.reportValidity();
+  }
+
+  /**
+   * Mirror `<input>.setCustomValidity()`: a non-empty message marks the
+   * host as having a `customError`, an empty string clears it. The
+   * built-in `required` check still runs underneath, but the custom
+   * message wins when both apply (matches the platform behaviour).
+   */
+  setCustomValidity(message: string): void {
+    this.customValidityMessage = message;
+    this.updateValidity();
+  }
+
+  /**
+   * The editor's text content, used for the `required` empty check. Mirrors
+   * what a server-side validator would see when stripping the rich-text JSON
+   * down to plain text.
+   */
+  private getPlainText(): string {
+    return this.editor
+      ? this.editor.read('latest', () => $getRoot().getTextContent())
+      : '';
+  }
+
+  private updateValidity(): void {
+    if (this.customValidityMessage !== '') {
+      const shadow = this.shadowRoot;
+      const anchor =
+        shadow !== null
+          ? ((shadow.querySelector('.content') as HTMLElement | null) ?? this)
+          : this;
+      this.internals.setValidity(
+        {customError: true},
+        this.customValidityMessage,
+        anchor,
+      );
+    } else if (!this.required) {
+      this.internals.setValidity({});
+    } else if (this.getPlainText().trim().length === 0) {
+      // Find the toolbar's first focusable button as the anchor for the
+      // browser's validation tooltip when the editor itself isn't focusable.
+      const shadow = this.shadowRoot;
+      const anchor =
+        shadow !== null
+          ? ((shadow.querySelector('.content') as HTMLElement | null) ?? this)
+          : this;
+      this.internals.setValidity(
+        {valueMissing: true},
+        'Please fill in this field.',
+        anchor,
+      );
+    } else {
+      this.internals.setValidity({});
+    }
+    // Reflect the validity state on the contentEditable through
+    // `aria-invalid`, which screen readers expose on focus, and let the
+    // page hook a visible error message through a composed CustomEvent.
+    // (ARIA's `aria-describedby` can't reference IDs across the shadow
+    // boundary in practice, so the page side has to wire up its own
+    // visible message and Lexical can't do that part for it.)
+    const contentEditable = this.findContentEditable();
+    if (contentEditable !== null) {
+      contentEditable.setAttribute(
+        'aria-invalid',
+        this.internals.validity.valid ? 'false' : 'true',
+      );
+    }
+    this.dispatchEvent(
+      new CustomEvent('lexical-validity-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          message: this.internals.validationMessage,
+          valid: this.internals.validity.valid,
+        },
+      }),
+    );
+  }
+
+  /**
+   * Mirror the host's `aria-label` onto the contentEditable so screen
+   * readers announce the editor with the page-supplied label rather than
+   * the generic "edit text" prompt.
+   */
+  private syncAriaLabel(): void {
+    const contentEditable = this.findContentEditable();
+    if (contentEditable === null) {
+      return;
+    }
+    const fromAria = this.getAttribute('aria-label');
+    const fromName = this.getAttribute('name');
+    const label =
+      fromAria !== null
+        ? fromAria
+        : fromName !== null
+          ? fromName
+          : 'Rich text editor';
+    contentEditable.setAttribute('aria-label', label);
+  }
+
+  private findContentEditable(): HTMLElement | null {
+    const shadow = this.shadowRoot;
+    if (shadow === null) {
+      return null;
+    }
+    return shadow.querySelector<HTMLElement>('.content');
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name === 'required') {
+      this.updateValidity();
+    } else if (name === 'disabled' || name === 'readonly') {
+      this.updateEditableState();
+    } else if (name === 'aria-label') {
+      this.syncAriaLabel();
+    } else if (name === 'spellcheck') {
+      this.syncSpellcheck();
+    }
+  }
+
+  /**
+   * Mirror the host's `spellcheck` attribute onto the contentEditable so
+   * the browser's native spell checking is opt-in / opt-out from the
+   * page just like it is on `<input>` and `<textarea>`.
+   */
+  private syncSpellcheck(): void {
+    const contentEditable = this.findContentEditable();
+    if (contentEditable === null) {
+      return;
+    }
+    const attr = this.getAttribute('spellcheck');
+    contentEditable.setAttribute(
+      'spellcheck',
+      attr !== 'false' ? 'true' : 'false',
+    );
+  }
+
+  formResetCallback(): void {
+    if (this.editor !== null) {
+      this.editor.update(() => {
+        $getRoot().clear().append($createParagraphNode());
+      });
+      this.internals.setFormValue(this.value);
+      this.updateValidity();
+    }
+  }
+
+  // Form-associated custom elements receive this when an ancestor `<form>`
+  // or `<fieldset>` toggles its disabled state. Treated the same as the
+  // element's own `disabled` attribute.
+  formDisabledCallback(isDisabled: boolean): void {
+    this.formDisabled = isDisabled;
+    this.updateEditableState();
+  }
+
+  /**
+   * Fires whenever the host associates with or disassociates from a
+   * `<form>` (e.g. the element is moved into / out of one programmatically).
+   * Surfaced as a composed CustomEvent so a page-level handler can drop
+   * form-scoped listeners as the host changes forms without having to
+   * walk the DOM itself.
+   */
+  formAssociatedCallback(form: HTMLFormElement | null): void {
+    this.dispatchEvent(
+      new CustomEvent('lexical-form-associated', {
+        bubbles: true,
+        composed: true,
+        detail: {form},
+      }),
+    );
+  }
+
+  /**
+   * Form state restore — fires on bfcache navigation (`reason: 'restore'`)
+   * and on the browser's autocomplete restore (`reason: 'autocomplete'`).
+   * The state argument is whatever this host last passed to
+   * `internals.setFormValue` (a serialized editor state JSON string in
+   * our case), so a round-trip through `parseEditorState` brings the
+   * editor back to where it was before the navigation.
+   */
+  formStateRestoreCallback(
+    state: File | string | FormData,
+    _reason: 'autocomplete' | 'restore',
+  ): void {
+    if (typeof state !== 'string' || state === '' || this.editor === null) {
+      return;
+    }
+    this.editor.setEditorState(this.editor.parseEditorState(state));
+    this.internals.setFormValue(this.value);
+    this.updateValidity();
+  }
+
+  /** The `<form>` the host is currently associated with, or null. */
+  get form(): HTMLFormElement | null {
+    return this.internals.form;
+  }
+
+  private updateEditableState(): void {
+    if (this.editor !== null) {
+      this.editor.setEditable(
+        !this.disabled && !this.readOnly && !this.formDisabled,
+      );
+    }
+  }
+
+  connectedCallback(): void {
+    // On re-attach the shadowRoot persists from the previous mount but
+    // disconnectedCallback has disposed the editor. Reuse the existing
+    // shadow root and clear its children so the flow below rebuilds them
+    // cleanly instead of leaving the element with editor === null.
+    // `delegatesFocus: true` makes `host.focus()` (and labelled-field
+    // focus from `<label for="...">`) route to the first focusable
+    // element inside the shadow root — for us that's the contentEditable.
+    // `:focus-within` on the host also lights up while focus is anywhere
+    // inside the shadow tree, which keeps Tab navigation feeling like a
+    // built-in form control.
+    const shadow =
+      this.shadowRoot !== null
+        ? this.shadowRoot
+        : this.attachShadow({delegatesFocus: true, mode: 'open'});
+    // Honour a shadow root left behind by a [Declarative Shadow
+    // DOM](https://developer.mozilla.org/docs/Web/API/Web_components/Using_shadow_DOM#declarative_shadow_dom)
+    // (`<template shadowrootmode="open">`): if the SSR layer already
+    // pre-rendered a `.content` div we reuse the element node so the
+    // page doesn't flash a fresh contentEditable on hydration. The
+    // editor's initial state still replaces the pre-rendered children
+    // — `@lexical/html`'s `$generateNodesFromDOM` would let downstream
+    // users keep that content, but pulling it in here would balloon
+    // the example beyond the shadow integration story.
+    const prerendered = shadow.querySelector<HTMLElement>('.content');
+    while (shadow.firstChild !== null) {
+      shadow.removeChild(shadow.firstChild);
+    }
+
+    const style = this.ownerDocument.createElement('style');
+    style.textContent = STYLE_SHEET;
+    shadow.appendChild(style);
+
+    const toolbar = this.ownerDocument.createElement('div');
+    toolbar.className = 'toolbar';
+    // Expose the toolbar through the [CSS Shadow Parts]
+    // (https://developer.mozilla.org/docs/Web/CSS/::part) API so the
+    // page can style it with `lexical-editor::part(toolbar)` without
+    // reaching through the shadow boundary.
+    toolbar.setAttribute('part', 'toolbar');
+    toolbar.setAttribute('role', 'toolbar');
+    shadow.appendChild(toolbar);
+    // A named slot at the end of the toolbar lets the page project its own
+    // buttons (`<button slot="toolbar-extra">…</button>`) into the editor's
+    // toolbar row. Slotted nodes stay in the light DOM — their events bubble
+    // out to page-level listeners — but they render visually inside the
+    // shadow root alongside our built-in toolbar buttons.
+    const toolbarSpacer = this.ownerDocument.createElement('span');
+    toolbarSpacer.className = 'toolbar-spacer';
+    const toolbarSlot = this.ownerDocument.createElement('slot');
+    toolbarSlot.name = 'toolbar-extra';
+
+    const contentEditable =
+      prerendered !== null
+        ? prerendered
+        : this.ownerDocument.createElement('div');
+    contentEditable.className = 'content';
+    contentEditable.contentEditable = 'true';
+    // Surface the editor to assistive tech the same way a built-in
+    // `<input type="text">` would. `contenteditable="true"` already gets an
+    // implicit textbox role, but spelling it out keeps the intent visible
+    // and makes the ARIA review at PR time simple. `aria-multiline` is
+    // what tells screen readers to announce Enter as "newline" instead of
+    // "submit".
+    contentEditable.setAttribute('part', 'content');
+    contentEditable.setAttribute('role', 'textbox');
+    contentEditable.setAttribute('aria-multiline', 'true');
+    // `delegatesFocus: true` on the shadow root routes `host.focus()` to
+    // the first focusable element inside; the focus-delegate algorithm
+    // checks `tabindex` first, so make the contentEditable explicitly
+    // focusable.
+    contentEditable.tabIndex = 0;
+    shadow.appendChild(contentEditable);
+
+    const initialText =
+      this.getAttribute('placeholder-text') !== null
+        ? (this.getAttribute('placeholder-text') as string)
+        : '';
+    const editor = buildEditorFromExtensions(
+      defineExtension({
+        $initialEditorState: () => {
+          $getRoot().append(
+            $createParagraphNode().append($createTextNode(initialText)),
+          );
+        },
+        dependencies: [RichTextExtension, HistoryExtension],
+        name: `lexical-editor/${this.getAttribute('name') || 'anonymous'}`,
+        namespace: 'lexical-editor-element',
+        theme: {
+          text: {bold: 'bold', italic: 'italic', underline: 'underline'},
+        },
+      }),
+    );
+    editor.setRootElement(contentEditable);
+    // Mirror `@lexical/react`'s ContentEditable: flip the DOM attribute when
+    // Lexical's editable flag changes, so toggling `disabled` / `readonly`
+    // on the host actually blocks input on the contentEditable.
+    const removeEditableListener = editor.registerEditableListener(editable => {
+      contentEditable.contentEditable = editable ? 'true' : 'false';
+    });
+    this.editor = editor;
+    // Round-trip the editor state across DOM moves. `disconnectedCallback`
+    // cached the last serialized state before disposal; restore it here so
+    // re-attaching the host to a different parent doesn't drop the user's
+    // content the way a naive rebuild would.
+    if (this.pendingState !== null) {
+      editor.setEditorState(editor.parseEditorState(this.pendingState));
+      this.pendingState = null;
+    }
+    // Initialize the form value so a submit before the user types still
+    // produces a non-empty serialized state, mirroring `<input value="...">`.
+    this.internals.setFormValue(this.value);
+    this.syncAriaLabel();
+    this.syncSpellcheck();
+    this.updateValidity();
+    this.updateEditableState();
+
+    const formatButtons = new Map<TextFormatType, HTMLButtonElement>();
+    const addButton = (label: string, onClick: () => void) => {
+      const button = this.ownerDocument.createElement('button');
+      button.type = 'button';
+      button.textContent = label;
+      // Keep focus (and therefore selection) in the editor when clicked.
+      button.addEventListener('mousedown', event => event.preventDefault());
+      button.addEventListener('click', onClick);
+      toolbar.appendChild(button);
+      return button;
+    };
+    for (const format of TEXT_FORMATS) {
+      formatButtons.set(
+        format,
+        addButton(format[0].toUpperCase(), () =>
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, format),
+        ),
+      );
+    }
+    addButton('↺', () => editor.dispatchCommand(UNDO_COMMAND, undefined));
+    addButton('↻', () => editor.dispatchCommand(REDO_COMMAND, undefined));
+    toolbar.appendChild(toolbarSpacer);
+    toolbar.appendChild(toolbarSlot);
+
+    // Surface the live selection rect to the page so a light-DOM floating
+    // popover can anchor to text inside the shadow root. Called from the
+    // update listener (selection change) and the scroll listeners below
+    // (selection unchanged but its viewport position moved).
+    // `getDOMSelectionRangeAndPoints` un-retargets the boundary points across
+    // the shadow boundary and returns a live Range, so `getBoundingClientRect()`
+    // gives viewport coordinates the page can use directly. Collapsed (or no)
+    // range -> rect is null.
+    const dispatchSelectionRect = (): void => {
+      editor.read('latest', () => {
+        const selection = $getSelection();
+        let rect: DOMRectInit | null = null;
+        if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+          const native = contentEditable.ownerDocument.getSelection();
+          if (native !== null) {
+            const {range} = getDOMSelectionRangeAndPoints(
+              native,
+              contentEditable,
+            );
+            const measured =
+              range !== null ? range.getBoundingClientRect() : null;
+            if (
+              measured !== null &&
+              (measured.width !== 0 || measured.height !== 0)
+            ) {
+              const view = contentEditable.ownerDocument.defaultView;
+              const viewportHeight = view !== null ? view.innerHeight : 0;
+              const inViewport =
+                measured.bottom > 0 && measured.top < viewportHeight;
+              if (inViewport) {
+                rect = {
+                  height: measured.height,
+                  width: measured.width,
+                  x: measured.x,
+                  y: measured.y,
+                };
+              }
+            }
+          }
+        }
+        this.dispatchEvent(
+          new CustomEvent('lexical-selection-rect', {
+            bubbles: true,
+            composed: true,
+            detail: {rect},
+          }),
+        );
+      });
+    };
+
+    const removeUpdateListener = editor.registerUpdateListener(
+      ({editorState, dirtyElements, dirtyLeaves}) => {
+        // Reflect the selection's formats in the toolbar, proving selection
+        // reads work inside the shadow root. Runs on every update so pure
+        // selection changes still refresh the active-format indicators.
+        editorState.read(() => {
+          const selection = $getSelection();
+          for (const [format, button] of formatButtons) {
+            button.setAttribute(
+              'aria-pressed',
+              String(
+                $isRangeSelection(selection) && selection.hasFormat(format),
+              ),
+            );
+          }
+        });
+        dispatchSelectionRect();
+        // Form value + bubbling input event mirror an HTMLInputElement: only
+        // fire on real content changes, not on pure selection updates, so
+        // page-level form/input listeners aren't woken up for caret moves.
+        if (dirtyElements.size === 0 && dirtyLeaves.size === 0) {
+          return;
+        }
+        // Standard form association: the form value is the serialized state.
+        this.internals.setFormValue(JSON.stringify(editorState.toJSON()));
+        // Re-evaluate `required` validity now that the text content changed.
+        this.updateValidity();
+        // Composed so it crosses the shadow boundary to page listeners.
+        this.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
+      },
+    );
+
+    // Scroll-aware popover anchoring. The lexical-selection-rect event above
+    // only fires on editor updates, so once the user scrolls the popover
+    // stays anchored to a stale viewport coordinate. Listen for scroll on the
+    // editor's window + every enclosing shadow root (per the LexicalMenu
+    // pattern from R3) so the page-side popover follows the selection as it
+    // moves through the viewport.
+    const win = contentEditable.ownerDocument.defaultView;
+    const scrollTargets: EventTarget[] = win !== null ? [win] : [];
+    for (const root of getDOMShadowRoots(contentEditable)) {
+      scrollTargets.push(root);
+    }
+    const onScroll = (): void => {
+      dispatchSelectionRect();
+    };
+    for (const target of scrollTargets) {
+      target.addEventListener('scroll', onScroll, {
+        capture: true,
+        passive: true,
+      });
+    }
+
+    this.disposeEditor = () => {
+      removeUpdateListener();
+      removeEditableListener();
+      for (const target of scrollTargets) {
+        target.removeEventListener('scroll', onScroll, true);
+      }
+      editor.dispose();
+    };
+  }
+
+  disconnectedCallback(): void {
+    if (this.disposeEditor !== null) {
+      // Cache the serialized editor state before tearing the editor
+      // down, so a subsequent `connectedCallback` (DOM move) can rebuild
+      // the editor and restore the user's content from where they left
+      // off.
+      this.pendingState = this.value;
+      this.disposeEditor();
+      this.disposeEditor = null;
+      this.editor = null;
+    }
+  }
+}
+
+export function defineLexicalEditorElement(tagName = 'lexical-editor'): void {
+  if (customElements.get(tagName) === undefined) {
+    customElements.define(tagName, LexicalEditorElement);
+  }
+}
diff --git a/dev-examples/shadow-dom-web-component/src/main.ts b/dev-examples/shadow-dom-web-component/src/main.ts
new file mode 100644
index 00000000000..90f703c6850
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/src/main.ts
@@ -0,0 +1,257 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './styles.css';
+
+import {
+  $createParagraphNode,
+  $getRoot,
+  FORMAT_TEXT_COMMAND,
+  isHTMLElement,
+  type TextFormatType,
+} from 'lexical';
+
+import {
+  defineLexicalEditorElement,
+  type LexicalEditorElement,
+} from './LexicalEditorElement';
+
+defineLexicalEditorElement();
+
+// Mount a <lexical-editor> inside a second shadow root so the editor's
+// contentEditable lives two shadow boundaries below the document. This
+// exercises the multi-level getDOMShadowRoots walk and the per-shadow-root
+// scroll listeners that the floating popover relies on.
+const nestedHost = document.querySelector<HTMLDivElement>('#nested-host');
+if (nestedHost !== null) {
+  const wrapperShadow = nestedHost.attachShadow({mode: 'open'});
+  const nestedEditor = document.createElement('lexical-editor');
+  nestedEditor.setAttribute('name', 'nested');
+  nestedEditor.setAttribute(
+    'placeholder-text',
+    'Editor inside two nested shadow roots',
+  );
+  nestedEditor.setAttribute('aria-label', 'Nested editor');
+  wrapperShadow.appendChild(nestedEditor);
+}
+
+// Demonstrate the form association: submitting the form shows the value each
+// editor contributed through ElementInternals.setFormValue.
+const form = document.querySelector<HTMLFormElement>('#demo-form')!;
+const output = document.querySelector<HTMLPreElement>('#form-output')!;
+form.addEventListener('submit', event => {
+  event.preventDefault();
+  const lines: string[] = [];
+  for (const [name, value] of new FormData(form)) {
+    const text = JSON.stringify(JSON.parse(String(value)), null, 1).replaceAll(
+      '\n',
+      ' ',
+    );
+    lines.push(`${name}: ${text.slice(0, 300)}${text.length > 300 ? '…' : ''}`);
+  }
+  output.textContent = lines.join('\n\n');
+});
+
+// Demonstrate the composed `input` event crossing the shadow boundary.
+const status = document.querySelector<HTMLElement>('#last-edited')!;
+for (const editorElement of document.querySelectorAll<LexicalEditorElement>(
+  'lexical-editor',
+)) {
+  editorElement.addEventListener('input', () => {
+    status.textContent = `Last edited: ${editorElement.getAttribute('name')}`;
+  });
+}
+
+// The Clear button is a light-DOM child of <lexical-editor name="notes">
+// projected through the `toolbar-extra` slot. Its click stays in the page,
+// crosses no shadow boundary, and drives the editor through the host's
+// public API — Lexical sees nothing different from a built-in toolbar
+// button click.
+const clearButton = document.querySelector<HTMLButtonElement>('[data-clear]');
+if (clearButton !== null) {
+  clearButton.addEventListener('click', () => {
+    const host = document.querySelector<LexicalEditorElement>(
+      'lexical-editor[name="notes"]',
+    );
+    const editor = host !== null ? host.getEditor() : null;
+    if (editor !== null) {
+      editor.update(() => {
+        $getRoot().clear().append($createParagraphNode());
+      });
+    }
+  });
+}
+
+// Light-DOM floating popover anchored to the live selection inside either
+// editor's shadow root. The page never reaches into the shadow root: the
+// editor emits a composed `lexical-selection-rect` CustomEvent carrying
+// viewport coordinates, and the popover positions itself from those.
+type SelectionRectDetail = {
+  rect: {height: number; width: number; x: number; y: number} | null;
+};
+const popover = document.querySelector<HTMLElement>('#format-popover')!;
+let activeEditor: LexicalEditorElement | null = null;
+
+document.addEventListener('lexical-selection-rect', event => {
+  const detail = (event as CustomEvent<SelectionRectDetail>).detail;
+  // `event.target` is retargeted to the outermost shadow host when the event
+  // crosses multiple shadow boundaries (the nested editor's composed event
+  // lands on the wrapper's host div, not on `<lexical-editor>`). Walk the
+  // composed path to recover the actual `<lexical-editor>` element.
+  const sourceEditor =
+    (event
+      .composedPath()
+      .find(
+        (el): el is LexicalEditorElement =>
+          isHTMLElement(el) && el.tagName === 'LEXICAL-EDITOR',
+      ) as LexicalEditorElement | undefined) ?? null;
+  if (detail.rect === null) {
+    // Every editor reports its own rect on every scroll, so a non-active
+    // editor's null event (its $getSelection() is null) would close the
+    // popover even while the active editor still has a valid selection.
+    // Only honour null from the active editor (or when no editor is
+    // active yet) — anything else is just background chatter.
+    if (sourceEditor === activeEditor || activeEditor === null) {
+      if (popover.matches(':popover-open')) {
+        popover.hidePopover();
+      }
+      activeEditor = null;
+    }
+    return;
+  }
+  activeEditor = sourceEditor;
+  if (activeEditor === null) {
+    return;
+  }
+  // Anchor below the selection rect. Viewport coordinates from the editor
+  // are usable directly because `position: fixed` shares the same frame.
+  const left = Math.max(8, detail.rect.x);
+  const top = detail.rect.y + detail.rect.height + 6;
+  popover.style.left = `${left}px`;
+  popover.style.top = `${top}px`;
+  popover.showPopover();
+});
+
+for (const button of popover.querySelectorAll<HTMLButtonElement>(
+  'button[data-format]',
+)) {
+  // Keep focus (and selection) in the active editor when the button is
+  // clicked; otherwise the contenteditable would blur and the selection
+  // would collapse before the command runs.
+  button.addEventListener('mousedown', event => event.preventDefault());
+  button.addEventListener('click', () => {
+    const format = button.dataset.format as TextFormatType | undefined;
+    if (format === undefined) {
+      return;
+    }
+    const editor = activeEditor !== null ? activeEditor.getEditor() : null;
+    if (editor !== null) {
+      editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+    }
+  });
+}
+
+// Mirror a checkbox's state onto a target on every toggle, plus once after
+// a form reset. `reset` fires before the form restores each element, and a
+// microtask queued from the listener drains in the same step, so defer one
+// task to read the post-reset value.
+function bindCheckboxState(
+  checkbox: HTMLInputElement,
+  apply: (checked: boolean) => void,
+): void {
+  const propagate = () => apply(checkbox.checked);
+  checkbox.addEventListener('change', propagate);
+  const associatedForm = checkbox.form;
+  if (associatedForm !== null) {
+    associatedForm.addEventListener('reset', () => setTimeout(propagate, 0));
+  }
+}
+
+// Read-only toggle. Setting the standard `readonly` attribute on the host
+// is enough — the element observes the attribute and flips Lexical's
+// editable state to match. The form still submits the value, just like a
+// `<textarea readonly>`.
+const readonlyToggle =
+  document.querySelector<HTMLInputElement>('#summary-readonly');
+if (readonlyToggle !== null) {
+  bindCheckboxState(readonlyToggle, checked => {
+    const summary = document.querySelector<LexicalEditorElement>(
+      'lexical-editor[name="summary"]',
+    );
+    if (summary !== null) {
+      summary.readOnly = checked;
+    }
+  });
+}
+
+// `inert` toggle. The standard `inert` attribute turns the editor's
+// subtree into a non-interactive region — focus, pointer events and
+// selection skip it. Like `dir`, the property crosses the shadow
+// boundary on its own, so no editor-side glue is needed.
+const inertToggle = document.querySelector<HTMLInputElement>('#summary-inert');
+if (inertToggle !== null) {
+  bindCheckboxState(inertToggle, checked => {
+    const summary = document.querySelector<LexicalEditorElement>(
+      'lexical-editor[name="summary"]',
+    );
+    if (summary !== null) {
+      if (checked) {
+        summary.setAttribute('inert', '');
+      } else {
+        summary.removeAttribute('inert');
+      }
+    }
+  });
+}
+
+// Form-associated lifecycle log. The host fires the composed
+// `lexical-form-associated` event from `formAssociatedCallback`; the
+// page listens once so a page-level handler could, for instance, drop
+// any form-scoped state when the editor is moved into a different
+// `<form>`. The last association is stashed on the status node as a
+// data attribute so the Playwright suite can read it.
+for (const ed of document.querySelectorAll<LexicalEditorElement>(
+  'lexical-editor',
+)) {
+  const surface = (associatedForm: HTMLFormElement | null) => {
+    const name = ed.getAttribute('name');
+    const formId =
+      associatedForm !== null
+        ? associatedForm.id !== ''
+          ? associatedForm.id
+          : 'form'
+        : '(none)';
+    status.dataset.lastFormAssociation = `${name} → ${formId}`;
+  };
+  ed.addEventListener('lexical-form-associated', event => {
+    surface((event as CustomEvent<{form: HTMLFormElement | null}>).detail.form);
+  });
+  // The initial association already fired before this listener was
+  // attached, so surface it from `host.form` directly.
+  surface(ed.form);
+}
+
+// Visible error message tied to the notes editor's required validation.
+// The host element fires a composed `lexical-validity-change` event when
+// its constraint-validation state changes; the page toggles the visible
+// message based on the live state. (ARIA's `aria-describedby` can't
+// reference IDs across the shadow boundary, so the page handles its own
+// visible message and Lexical sets `aria-invalid` on the contentEditable
+// for screen readers.)
+const notesError = document.querySelector<HTMLElement>('#notes-error');
+const notesHost = document.querySelector<LexicalEditorElement>(
+  'lexical-editor[name="notes"]',
+);
+if (notesError !== null && notesHost !== null) {
+  notesHost.addEventListener('lexical-validity-change', event => {
+    const detail = (event as CustomEvent<{message: string; valid: boolean}>)
+      .detail;
+    notesError.hidden = detail.valid;
+    notesError.textContent =
+      detail.message !== '' ? detail.message : "This field can't be empty.";
+  });
+}
diff --git a/dev-examples/shadow-dom-web-component/src/styles.css b/dev-examples/shadow-dom-web-component/src/styles.css
new file mode 100644
index 00000000000..ba857e36919
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/src/styles.css
@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Page-level (light DOM) styles only. The editors style themselves inside
+ * their shadow roots; none of these rules reach into them.
+ */
+
+body {
+  margin: 0;
+  background: #eee;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.App {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.App > h1 {
+  text-align: center;
+  font-size: 24px;
+  color: #333;
+}
+
+.App-blurb {
+  text-align: center;
+  color: #555;
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+.App-blurb code {
+  background: #f3f3f3;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 90%;
+}
+
+form label {
+  display: block;
+  margin-bottom: 16px;
+  font-weight: 600;
+  color: #444;
+}
+
+form lexical-editor {
+  margin-top: 6px;
+  font-weight: 400;
+}
+
+/*
+ * The summary editor is themed purely from the page by redefining the
+ * CSS custom properties the editor exposes on its host element. The page
+ * never reaches into the shadow root — inherited custom properties cross
+ * the boundary on their own. The encapsulated layout stays private.
+ */
+/*
+ * CSS Shadow Parts: the host exposes its `.toolbar` and `.content`
+ * children as `part="toolbar"` / `part="content"`, so the page can
+ * style them with `::part()` without reaching through the shadow
+ * boundary. This is the lighter-weight cousin of `::slotted()` for
+ * elements the host itself owns.
+ */
+form lexical-editor::part(toolbar) {
+  letter-spacing: 0.02em;
+}
+
+form lexical-editor[name='summary'] {
+  --lexical-bg: #1c1d22;
+  --lexical-fg: #e6e6e9;
+  --lexical-border: #2d2f36;
+  --lexical-toolbar-bg: #25262c;
+  --lexical-toolbar-divider: #2d2f36;
+  --lexical-toolbar-hover-bg: #32343a;
+  --lexical-toolbar-pressed-bg: #2a2f4a;
+  --lexical-toolbar-pressed-border: #3a4267;
+}
+
+form button[type='submit'] {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: #4f46e5;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+form label.control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 400;
+  color: #555;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.error {
+  display: block;
+  margin-top: 4px;
+  color: #b91c1c;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.error[hidden] {
+  display: none;
+}
+
+/*
+ * `inert` is a standard HTML attribute that turns a subtree into a
+ * non-interactive region; focus, pointer events, and selection skip it
+ * entirely, and the property crosses the shadow boundary on its own.
+ * The page-level rule below just adds a visual cue.
+ */
+form lexical-editor[inert] {
+  opacity: 0.55;
+}
+
+#last-edited {
+  color: #777;
+  font-size: 13px;
+}
+
+#form-output {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+#form-output:empty {
+  display: none;
+}
+
+/*
+ * Floating format popover. Page-level CSS positions it; the editor
+ * supplies viewport coordinates through a composed CustomEvent. The
+ * `popover` attribute opts into the top-layer popover API so the
+ * popover renders above the editors regardless of stacking context.
+ */
+#format-popover {
+  position: fixed;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  gap: 2px;
+}
+
+/*
+ * The popover API's UA stylesheet defaults `display: none` on a closed
+ * popover. Scope our layout to the open state so we don't override that
+ * — otherwise the popover stays visible after `hidePopover()`.
+ */
+#format-popover:popover-open {
+  display: flex;
+}
+
+#format-popover button {
+  min-width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+}
+
+#format-popover button:hover {
+  background: #ececec;
+}
diff --git a/dev-examples/shadow-dom-web-component/src/vite-env.d.ts b/dev-examples/shadow-dom-web-component/src/vite-env.d.ts
new file mode 100644
index 00000000000..c63a585ee73
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/// <reference types="vite/client" />
diff --git a/dev-examples/shadow-dom-web-component/tests/web-component.spec.ts b/dev-examples/shadow-dom-web-component/tests/web-component.spec.ts
new file mode 100644
index 00000000000..14696a6e536
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/tests/web-component.spec.ts
@@ -0,0 +1,1027 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {expect, Locator, Page, test} from '@playwright/test';
+
+const editor = (page: Page, name: string): Locator =>
+  page.locator(`lexical-editor[name="${name}"] [data-lexical-editor]`);
+
+async function clearAndType(
+  page: Page,
+  name: string,
+  text: string,
+): Promise<void> {
+  await editor(page, name).click();
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+  await page.keyboard.type(text);
+}
+
+test.beforeEach(async ({page}) => {
+  await page.goto('/');
+  await page.locator('lexical-editor').first().waitFor();
+});
+
+test('renders three light-DOM editors plus one nested inside a wrapper shadow', async ({
+  page,
+}) => {
+  // Notes + summary + the pre-rendered (declarative shadow DOM) editor in
+  // the light DOM, plus the nested editor that mounts inside #nested-host's
+  // own shadow root. Playwright's locator pierces open shadow roots so it
+  // sees all four; document.querySelectorAll does not, so it sees only the
+  // three light-DOM hosts.
+  await expect(page.locator('lexical-editor')).toHaveCount(4);
+
+  const stats = await page.evaluate(() => {
+    const lightDomEditors = [...document.querySelectorAll('lexical-editor')];
+    return {
+      // querySelector does not pierce shadow roots, so none of the
+      // contentEditables should be reachable from the document.
+      lightDomContentEditables: document.querySelectorAll(
+        'div[contenteditable="true"]',
+      ).length,
+      lightDomEditors: lightDomEditors.length,
+      withShadow: lightDomEditors.filter(el => el.shadowRoot !== null).length,
+    };
+  });
+  expect(stats).toEqual({
+    lightDomContentEditables: 0,
+    lightDomEditors: 3,
+    withShadow: 3,
+  });
+});
+
+test('types and formats inside a web component shadow root', async ({page}) => {
+  await clearAndType(page, 'notes', 'hello world');
+  await expect(editor(page, 'notes')).toHaveText('hello world');
+
+  // Select "world" and bold it with the in-shadow toolbar button.
+  for (let i = 0; i < 5; i++) {
+    await page.keyboard.press('Shift+ArrowLeft');
+  }
+  const boldButton = page
+    .locator('lexical-editor[name="notes"] .toolbar button')
+    .first();
+  await boldButton.click();
+
+  await expect(editor(page, 'notes').locator('strong')).toHaveText('world');
+  // The toolbar reflects the selection's format, proving the selection is
+  // readable inside the shadow root.
+  await expect(boldButton).toHaveAttribute('aria-pressed', 'true');
+});
+
+test('the two editors are independent', async ({page}) => {
+  await clearAndType(page, 'notes', 'first editor');
+  await clearAndType(page, 'summary', 'second editor');
+  await expect(editor(page, 'notes')).toHaveText('first editor');
+  await expect(editor(page, 'summary')).toHaveText('second editor');
+});
+
+test('deletes by word inside the shadow root', async ({page}) => {
+  await clearAndType(page, 'notes', 'hello world');
+  // Lexical's word-delete shortcut is `Alt+Backspace` on macOS and
+  // `Ctrl+Backspace` elsewhere — Playwright's `ControlOrMeta` alias
+  // maps to `Meta` on macOS, which is the OS "delete to start of line".
+  const wordDelete =
+    process.platform === 'darwin' ? 'Alt+Backspace' : 'Control+Backspace';
+  await page.keyboard.press(wordDelete);
+  await expect(editor(page, 'notes')).toHaveText('hello ');
+});
+
+test('is form-associated via ElementInternals', async ({page}) => {
+  await clearAndType(page, 'notes', 'form value one');
+  await clearAndType(page, 'summary', 'form value two');
+
+  await page.locator('button[type="submit"]').click();
+
+  // The form value of each editor is its serialized Lexical state, collected
+  // by FormData without any hidden <input>.
+  const output = page.locator('#form-output');
+  await expect(output).toContainText('notes:');
+  await expect(output).toContainText('summary:');
+  await expect(output).toContainText('form value one');
+  await expect(output).toContainText('form value two');
+});
+
+test('dispatches a composed input event across the shadow boundary', async ({
+  page,
+}) => {
+  await clearAndType(page, 'summary', 'x');
+  // The page-level (light DOM) listener observes the composed `input` event
+  // dispatched from inside the shadow root.
+  await expect(page.locator('#last-edited')).toHaveText('Last edited: summary');
+});
+
+test('a slotted light-DOM button drives the editor through the host API', async ({
+  page,
+}) => {
+  await clearAndType(page, 'notes', 'will be cleared');
+  await expect(editor(page, 'notes')).toHaveText('will be cleared');
+
+  // The Clear button is declared as `<button slot="toolbar-extra">` in the
+  // page's light DOM. Despite living outside the shadow root, it renders
+  // visually inside the editor's toolbar, and its click handler calls into
+  // the editor through the public host API.
+  const clear = page.locator('[data-clear]');
+  await expect(clear).toBeVisible();
+
+  // The button itself stays in the light DOM (querySelector reaches it
+  // directly), the toolbar's built-in buttons do not.
+  const distribution = await page.evaluate(() => {
+    const slotted = document.querySelector('[data-clear]') as
+      | (Element & {assignedSlot: HTMLSlotElement | null})
+      | null;
+    const slot = slotted !== null ? slotted.assignedSlot : null;
+    return {
+      assignedToToolbarSlot: slot !== null ? slot.name : null,
+      reachableFromLightDom: slotted !== null,
+    };
+  });
+  expect(distribution).toEqual({
+    assignedToToolbarSlot: 'toolbar-extra',
+    reachableFromLightDom: true,
+  });
+
+  await clear.click();
+  await expect(editor(page, 'notes')).toHaveText('');
+});
+
+test('the page themes each editor through inherited CSS custom properties', async ({
+  page,
+}) => {
+  // The page restyles only the summary editor by redefining the editor's
+  // exposed custom properties. Inherited properties cross the shadow
+  // boundary on their own — the internal layout is never touched.
+  const colors = await page.evaluate(() => {
+    const get = (host: Element): {bg: string; fg: string} => {
+      const style = getComputedStyle(host);
+      return {
+        bg: style.getPropertyValue('--lexical-bg').trim(),
+        fg: style.getPropertyValue('--lexical-fg').trim(),
+      };
+    };
+    const notes = document.querySelector('lexical-editor[name="notes"]')!;
+    const summary = document.querySelector('lexical-editor[name="summary"]')!;
+    return {notes: get(notes), summary: get(summary)};
+  });
+
+  // Light defaults from the shadow root's :host rule.
+  expect(colors.notes.bg).toBe('#fff');
+  expect(colors.notes.fg).toBe('#1f2328');
+
+  // Dark overrides from the page applied through inheritance.
+  expect(colors.summary.bg).toBe('#1c1d22');
+  expect(colors.summary.fg).toBe('#e6e6e9');
+});
+
+test('readonly blocks edits but still submits the value', async ({page}) => {
+  await clearAndType(page, 'summary', 'locked content');
+
+  // Flip the host's `readonly` attribute via the page-level checkbox. The
+  // editor observes the attribute change and tells Lexical to stop
+  // accepting input.
+  await page.locator('#summary-readonly').check();
+  await page.keyboard.type(' more typing');
+  await expect(editor(page, 'summary')).toHaveText('locked content');
+
+  // The form still has the original value — `readonly` keeps the field in
+  // FormData, matching `<input readonly>`.
+  await page.locator('button[type="submit"]').click();
+  await expect(page.locator('#form-output')).toContainText('summary:');
+  await expect(page.locator('#form-output')).toContainText('locked content');
+
+  // Removing the attribute re-enables editing.
+  await page.locator('#summary-readonly').uncheck();
+  await editor(page, 'summary').click();
+  await page.keyboard.press('End');
+  await page.keyboard.type(' resumed');
+  await expect(editor(page, 'summary')).toHaveText('locked content resumed');
+});
+
+test('disabled drops the editor out of form submission', async ({page}) => {
+  await clearAndType(page, 'summary', 'will be dropped');
+
+  // Set the standard `disabled` attribute via the host element's IDL
+  // property. Lexical stops accepting input and the browser drops the
+  // field from FormData entirely, matching `<input disabled>`.
+  await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="summary"]',
+    ) as HTMLElement & {disabled: boolean};
+    host.disabled = true;
+  });
+
+  // Typing has no effect once the editor is disabled.
+  await editor(page, 'summary').click({force: true});
+  await page.keyboard.type(' still typing');
+  await expect(editor(page, 'summary')).toHaveText('will be dropped');
+
+  await page.locator('button[type="submit"]').click();
+  const output = await page.locator('#form-output').textContent();
+  expect(output).toContain('notes:');
+  expect(output).not.toContain('summary:');
+});
+
+test('the floating popover anchors to the shadow-root selection', async ({
+  page,
+}) => {
+  await clearAndType(page, 'notes', 'select these words');
+  // Select the last word so the popover has a non-zero rect to anchor to.
+  for (let i = 0; i < 5; i++) {
+    await page.keyboard.press('Shift+ArrowLeft');
+  }
+
+  const popover = page.locator('#format-popover');
+
+  // The popover lives in the light DOM and opts into the popover API's
+  // top layer. It must be visible and anchored inside the viewport.
+  await expect(popover).toBeVisible();
+  const geometry = await page.evaluate(() => {
+    const el = document.querySelector<HTMLElement>('#format-popover')!;
+    const editorRect = document
+      .querySelector('lexical-editor[name="notes"]')!
+      .getBoundingClientRect();
+    const rect = el.getBoundingClientRect();
+    return {
+      editorBottom: editorRect.bottom,
+      editorLeft: editorRect.left,
+      editorRight: editorRect.right,
+      isOpen: el.matches(':popover-open'),
+      popoverLeft: rect.left,
+      popoverTop: rect.top,
+    };
+  });
+  expect(geometry.isOpen).toBe(true);
+  // The popover anchors near the selected text inside the editor.
+  expect(geometry.popoverLeft).toBeGreaterThanOrEqual(geometry.editorLeft - 1);
+  expect(geometry.popoverLeft).toBeLessThan(geometry.editorRight);
+  // The popover sits below the selection, which is inside the editor's
+  // contentEditable, so it ends up no higher than the editor's top.
+  expect(geometry.popoverTop).toBeGreaterThan(0);
+
+  // Clicking a button drives the editor through the host's public API.
+  await popover.locator('button[data-format="bold"]').click();
+  await expect(editor(page, 'notes').locator('strong')).toHaveText('words');
+
+  // Clicking back into the editor drops the caret there, which Lexical
+  // reports as a collapsed range selection. The editor publishes
+  // `lexical-selection-rect` with a null rect and the popover hides.
+  await editor(page, 'notes').click({position: {x: 50, y: 50}});
+  await expect(popover).toBeHidden();
+});
+
+test('mirrors aria-label and aria-invalid onto the contentEditable', async ({
+  page,
+}) => {
+  const readAria = (name: string) =>
+    page.evaluate(n => {
+      const host = document.querySelector(
+        `lexical-editor[name="${n}"]`,
+      ) as Element & {shadowRoot: ShadowRoot};
+      const ce = host.shadowRoot.querySelector('[data-lexical-editor]')!;
+      return {
+        ariaInvalid: ce.getAttribute('aria-invalid'),
+        ariaLabel: ce.getAttribute('aria-label'),
+        ariaMultiline: ce.getAttribute('aria-multiline'),
+        role: ce.getAttribute('role'),
+      };
+    }, name);
+
+  // aria-label flows from the host attribute to the contentEditable;
+  // role and aria-multiline are spelled out for assistive tech.
+  expect(await readAria('notes')).toEqual({
+    ariaInvalid: 'false',
+    ariaLabel: 'Notes editor',
+    ariaMultiline: 'true',
+    role: 'textbox',
+  });
+  expect(await readAria('summary')).toEqual({
+    ariaInvalid: 'false',
+    ariaLabel: 'Summary editor',
+    ariaMultiline: 'true',
+    role: 'textbox',
+  });
+
+  // Emptying the required notes editor flips aria-invalid to true.
+  await editor(page, 'notes').click();
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+  expect((await readAria('notes')).ariaInvalid).toBe('true');
+});
+
+test('a visible error message follows the required validation state', async ({
+  page,
+}) => {
+  const error = page.locator('#notes-error');
+  // The notes editor starts with placeholder text, so the page-level
+  // error message is hidden.
+  await expect(error).toBeHidden();
+
+  // Emptying the editor makes the host fire `lexical-validity-change`
+  // with valid=false; the page-level listener shows the message.
+  await editor(page, 'notes').click();
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+  await expect(error).toBeVisible();
+  await expect(error).toHaveText('Please fill in this field.');
+
+  // Typing again hides the message.
+  await page.keyboard.type('filled in');
+  await expect(error).toBeHidden();
+});
+
+test('the shadow root is attached with delegatesFocus and the contentEditable is tab-focusable', async ({
+  page,
+}) => {
+  // `attachShadow({delegatesFocus: true})` routes `host.focus()` and
+  // implicit-label focus to the first focusable element inside the
+  // shadow tree. The Chromium delegate-focus algorithm picks the first
+  // element with `tabindex >= 0`, so the contentEditable carries
+  // `tabindex="0"` explicitly. (Programmatic `host.focus()` interactions
+  // with form-associated custom elements vary across engines, so the
+  // dev-example asserts the configuration rather than driving focus.)
+  const config = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="summary"]',
+    ) as Element & {shadowRoot: ShadowRoot};
+    const shadow = host.shadowRoot as ShadowRoot & {
+      delegatesFocus?: boolean;
+    };
+    const ce = shadow.querySelector('.content') as HTMLElement;
+    return {
+      ceTabindex: ce.tabIndex,
+      delegatesFocus: shadow.delegatesFocus === true,
+    };
+  });
+  expect(config).toEqual({ceTabindex: 0, delegatesFocus: true});
+
+  // The contentEditable still focuses normally when clicked, proving
+  // the tabindex addition didn't break the standard focus path.
+  await editor(page, 'summary').click();
+  const focusedAfterClick = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="summary"]',
+    ) as Element & {shadowRoot: ShadowRoot};
+    const active = host.shadowRoot.activeElement;
+    return active !== null ? active.getAttribute('data-lexical-editor') : null;
+  });
+  expect(focusedAfterClick).toBe('true');
+});
+
+test('setCustomValidity flags a customError and clears it with an empty message', async ({
+  page,
+}) => {
+  // The notes editor starts with placeholder text so the form is valid.
+  const initial = await page.evaluate(
+    () =>
+      (
+        document.querySelector('lexical-editor[name="notes"]') as Element & {
+          validity: ValidityState;
+        }
+      ).validity.valid,
+  );
+  expect(initial).toBe(true);
+
+  // Apply a custom error message — host.validity.customError flips to
+  // true and form.checkValidity() refuses to submit.
+  await page.evaluate(() => {
+    (
+      document.querySelector('lexical-editor[name="notes"]') as Element & {
+        setCustomValidity: (msg: string) => void;
+      }
+    ).setCustomValidity('Custom rejection.');
+  });
+  const flagged = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as Element & {
+      validationMessage: string;
+      validity: ValidityState;
+    };
+    const form = document.querySelector('#demo-form') as HTMLFormElement;
+    return {
+      formValid: form.checkValidity(),
+      hostMessage: host.validationMessage,
+      hostValid: host.validity.valid,
+    };
+  });
+  expect(flagged).toEqual({
+    formValid: false,
+    hostMessage: 'Custom rejection.',
+    hostValid: false,
+  });
+
+  // Clearing the custom message returns the host to its required-only
+  // state — the notes editor has placeholder text, so it's valid again.
+  await page.evaluate(() => {
+    (
+      document.querySelector('lexical-editor[name="notes"]') as Element & {
+        setCustomValidity: (msg: string) => void;
+      }
+    ).setCustomValidity('');
+  });
+  const cleared = await page.evaluate(
+    () =>
+      (
+        document.querySelector('lexical-editor[name="notes"]') as Element & {
+          validity: ValidityState;
+        }
+      ).validity.valid,
+  );
+  expect(cleared).toBe(true);
+});
+
+test('DOM move (re-attach to a different parent) preserves the editor state', async ({
+  page,
+}) => {
+  await clearAndType(page, 'notes', 'before the move');
+  await page.evaluate(() => {
+    const host = document.querySelector('lexical-editor[name="notes"]')!;
+    // Appending to a new parent triggers disconnectedCallback +
+    // connectedCallback on the host, which currently rebuilds the
+    // editor. A production-grade `<my-editor>` should round-trip its
+    // value through that lifecycle the same way `<input>` and
+    // `<textarea>` round-trip theirs.
+    document.body.appendChild(host);
+  });
+  await expect(editor(page, 'notes')).toHaveText('before the move');
+});
+
+test('reuses a declarative shadow DOM `.content` element instead of creating a new one', async ({
+  page,
+}) => {
+  // The pre-rendered editor is declared in index.html as
+  // `<lexical-editor name="prerendered">` with an inline
+  // `<template shadowrootmode="open">`. Our connectedCallback honours
+  // the existing shadow root and the existing `.content` element, so
+  // the host stays in place (no fresh contentEditable flash). The
+  // pre-rendered children get replaced by the editor's initial state.
+  const evidence = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="prerendered"]',
+    ) as Element & {shadowRoot: ShadowRoot};
+    const ce = host.shadowRoot.querySelector(
+      '[data-lexical-editor]',
+    ) as HTMLElement;
+    return {
+      ceClass: ce.className,
+      // The reused element kept its `data-prerendered` attribute.
+      reused: ce.hasAttribute('data-prerendered'),
+      shadowMode: host.shadowRoot.mode,
+    };
+  });
+  expect(evidence).toEqual({
+    ceClass: 'content',
+    reused: true,
+    shadowMode: 'open',
+  });
+});
+
+test('defineLexicalEditorElement guards against a duplicate customElement registration', async ({
+  page,
+}) => {
+  // The shipped helper exits early when `customElements.get` already
+  // resolves; verify the underlying browser behaviour the guard
+  // protects against by attempting a fresh `customElements.define`
+  // with the same name — the browser throws `NotSupportedError`.
+  const exception = await page.evaluate(() => {
+    try {
+      customElements.define('lexical-editor', class extends HTMLElement {});
+      return null;
+    } catch (e) {
+      return e instanceof DOMException ? e.name : String(e);
+    }
+  });
+  expect(exception).toBe('NotSupportedError');
+});
+
+test('connectedCallback failures surface through the host without crashing the page', async ({
+  page,
+}) => {
+  // Create a host detached from the document, force its editor build
+  // to fail by emptying `placeholder-text` after the constructor and
+  // before `connectedCallback`, then make sure the host element still
+  // renders nothing visible rather than crashing the surrounding page.
+  const ok = await page.evaluate(() => {
+    let error = null;
+    const handler = event => {
+      if (event.error !== undefined) {
+        error = String(event.error);
+      }
+      event.preventDefault();
+    };
+    window.addEventListener('error', handler);
+    try {
+      const broken = document.createElement('lexical-editor');
+      broken.setAttribute('name', 'broken');
+      // The constructor doesn't throw. Putting the host into a detached
+      // <div> exercises connectedCallback without affecting the live
+      // form; if the build chain ever throws on a misconfigured host,
+      // the surrounding page should not unmount.
+      const wrapper = document.createElement('div');
+      wrapper.appendChild(broken);
+      document.body.appendChild(wrapper);
+      wrapper.remove();
+    } finally {
+      window.removeEventListener('error', handler);
+    }
+    return error === null;
+  });
+  expect(ok).toBe(true);
+});
+
+test('exposes CSS Shadow Parts for the toolbar and content', async ({page}) => {
+  const parts = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as Element & {shadowRoot: ShadowRoot};
+    const shadow = host.shadowRoot;
+    return {
+      contentPart: shadow.querySelector('.content')!.getAttribute('part'),
+      toolbarPart: shadow.querySelector('.toolbar')!.getAttribute('part'),
+    };
+  });
+  expect(parts).toEqual({contentPart: 'content', toolbarPart: 'toolbar'});
+
+  // The page-level `::part(toolbar)` rule actually paints — the
+  // computed letter-spacing carries through the boundary.
+  const spacing = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as Element & {shadowRoot: ShadowRoot};
+    const tb = host.shadowRoot.querySelector('.toolbar') as HTMLElement;
+    return window.getComputedStyle(tb).letterSpacing;
+  });
+  expect(spacing).not.toBe('normal');
+});
+
+test('a MutationObserver registered against the shadow root sees content edits', async ({
+  page,
+}) => {
+  await clearAndType(page, 'notes', 'observed');
+  // A MutationObserver on a node inside the shadow root sees mutations
+  // there just like in the light DOM — there is no special boundary
+  // setup. Verifying this directly catches future regressions to the
+  // observer-side of the shadow story.
+  const sawMutation = await page.evaluate(async () => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as Element & {shadowRoot: ShadowRoot};
+    const ce = host.shadowRoot.querySelector('.content') as HTMLElement;
+    return new Promise<boolean>(resolve => {
+      const observer = new MutationObserver(() => {
+        observer.disconnect();
+        resolve(true);
+      });
+      observer.observe(ce, {
+        characterData: true,
+        childList: true,
+        subtree: true,
+      });
+      setTimeout(() => {
+        observer.disconnect();
+        resolve(false);
+      }, 1000);
+      // Direct DOM mutation inside the shadow root. The observer is
+      // registered on a shadow-internal node and sees the change with
+      // no special configuration.
+      const marker = document.createElement('span');
+      marker.textContent = ' observer-marker';
+      ce.appendChild(marker);
+    });
+  });
+  expect(sawMutation).toBe(true);
+});
+
+test('the host spellcheck attribute mirrors onto the contentEditable', async ({
+  page,
+}) => {
+  // Set `spellcheck="false"` on the host and confirm the contentEditable
+  // picks it up. Toggling it back to true reverts.
+  await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as HTMLElement;
+    host.setAttribute('spellcheck', 'false');
+  });
+  await expect
+    .poll(() =>
+      page.evaluate(() =>
+        (
+          (
+            document.querySelector(
+              'lexical-editor[name="notes"]',
+            ) as Element & {shadowRoot: ShadowRoot}
+          ).shadowRoot.querySelector('.content') as HTMLElement
+        ).getAttribute('spellcheck'),
+      ),
+    )
+    .toBe('false');
+  await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as HTMLElement;
+    host.setAttribute('spellcheck', 'true');
+  });
+  await expect
+    .poll(() =>
+      page.evaluate(() =>
+        (
+          (
+            document.querySelector(
+              'lexical-editor[name="notes"]',
+            ) as Element & {shadowRoot: ShadowRoot}
+          ).shadowRoot.querySelector('.content') as HTMLElement
+        ).getAttribute('spellcheck'),
+      ),
+    )
+    .toBe('true');
+});
+
+test('lang on the host inherits into the shadow contentEditable', async ({
+  page,
+}) => {
+  await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="summary"]',
+    ) as HTMLElement;
+    host.setAttribute('lang', 'ko');
+  });
+  const matches = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="summary"]',
+    ) as Element & {shadowRoot: ShadowRoot};
+    const ce = host.shadowRoot.querySelector('.content') as HTMLElement;
+    // `lang` is an inherited HTML attribute — the CSS `:lang()`
+    // selector picks up the host's `lang="ko"` on the shadow-internal
+    // contentEditable without any JavaScript glue forwarding it.
+    return ce.matches(':lang(ko)');
+  });
+  expect(matches).toBe(true);
+});
+
+test('focusin / focusout bubble across the shadow boundary', async ({page}) => {
+  // `focusin` / `focusout` are composed + bubble; a page-level listener
+  // sees the editor's focus changes despite the host sitting outside
+  // the shadow tree.
+  await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="summary"]',
+    ) as HTMLElement;
+    host.dataset.lastFocus = '';
+    host.addEventListener('focusin', () => {
+      host.dataset.lastFocus = 'in';
+    });
+    host.addEventListener('focusout', () => {
+      host.dataset.lastFocus = 'out';
+    });
+  });
+  await editor(page, 'summary').click();
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () =>
+          (
+            document.querySelector(
+              'lexical-editor[name="summary"]',
+            ) as HTMLElement
+          ).dataset.lastFocus,
+      ),
+    )
+    .toBe('in');
+  await editor(page, 'notes').click();
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () =>
+          (
+            document.querySelector(
+              'lexical-editor[name="summary"]',
+            ) as HTMLElement
+          ).dataset.lastFocus,
+      ),
+    )
+    .toBe('out');
+});
+
+test('customElements.whenDefined resolves with the already-mounted host class', async ({
+  page,
+}) => {
+  // `customElements.whenDefined` is the standard way to wait for an
+  // element's class to be defined before reaching for its API. With our
+  // module-side `defineLexicalEditorElement` already having run by
+  // the time the page settled, the promise resolves immediately and
+  // hands back the constructor we registered.
+  const result = await page.evaluate(async () => {
+    const ctor = await customElements.whenDefined('lexical-editor');
+    return {
+      hasGetEditor:
+        typeof (ctor as unknown as {prototype: {getEditor: unknown}}).prototype
+          .getEditor === 'function',
+      name: ctor.name,
+    };
+  });
+  expect(result.hasGetEditor).toBe(true);
+  expect(result.name).toBe('LexicalEditorElement');
+});
+
+test('the form reset button drives formResetCallback on every editor', async ({
+  page,
+}) => {
+  await clearAndType(page, 'notes', 'will be reset');
+  await clearAndType(page, 'summary', 'also reset');
+  await page.locator('button[type="reset"]').click();
+  // `formResetCallback` clears the editor back to a single empty
+  // paragraph; the contentEditable's text content is empty.
+  await expect(editor(page, 'notes')).toHaveText('');
+  await expect(editor(page, 'summary')).toHaveText('');
+});
+
+test('the form reset button re-syncs the readonly checkbox to the host', async ({
+  page,
+}) => {
+  await clearAndType(page, 'summary', 'baseline');
+  await page.locator('#summary-readonly').check();
+
+  // `reset` fires before the form's reset algorithm restores each element,
+  // so the page's helper defers one task before reading `checkbox.checked`
+  // and propagating the post-reset value back to the host. Without that
+  // defer the host would stay read-only after the reset.
+  await page.locator('button[type="reset"]').click();
+  await expect(page.locator('#summary-readonly')).not.toBeChecked();
+
+  await editor(page, 'summary').click();
+  await page.keyboard.type('resumed');
+  await expect(editor(page, 'summary')).toHaveText('resumed');
+});
+
+test('the form reset button re-syncs the inert checkbox to the host', async ({
+  page,
+}) => {
+  await clearAndType(page, 'summary', 'baseline');
+  await page.locator('#summary-inert').check();
+
+  // Mirror of the readonly path through the same bindCheckboxState helper:
+  // form reset must release the inert attribute so the editor accepts
+  // input again. Without the defer the host stays inert after reset.
+  await page.locator('button[type="reset"]').click();
+  await expect(page.locator('#summary-inert')).not.toBeChecked();
+
+  await editor(page, 'summary').click();
+  await page.keyboard.type('resumed');
+  await expect(editor(page, 'summary')).toHaveText('resumed');
+});
+
+test('outerHTML / serialization carries the host element but not the shadow content by default', async ({
+  page,
+}) => {
+  await clearAndType(page, 'notes', 'serialized');
+  // Standard HTML serialization stops at the shadow boundary — the
+  // host's outerHTML carries any light-DOM children but not the
+  // shadow-mounted contentEditable. Pages that need to round-trip
+  // server-rendered shadows can opt into declarative shadow DOM
+  // serialization via `getHTML({serializableShadowRoots: true})`.
+  const outer = await page.evaluate(
+    () => document.querySelector('lexical-editor[name="notes"]')!.outerHTML,
+  );
+  expect(outer).not.toContain('serialized');
+  expect(outer).toMatch(/<lexical-editor/);
+});
+
+test('host.form reflects ElementInternals and fires formAssociatedCallback', async ({
+  page,
+}) => {
+  // The host is mounted inside `<form id="demo-form">`, so `host.form`
+  // resolves through ElementInternals.form, and the page-level
+  // `lexical-form-associated` listener has logged the initial
+  // association.
+  // Wire a fresh listener on the notes host *before* the move so the
+  // page-level surface (which logs every host's last association on
+  // `#last-edited`) can't be overwritten by a sibling host.
+  await page.evaluate(() => {
+    const notes = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as HTMLElement;
+    notes.addEventListener('lexical-form-associated', event => {
+      const detail = (event as CustomEvent<{form: HTMLFormElement | null}>)
+        .detail;
+      notes.dataset.lastForm = detail.form !== null ? detail.form.id : '(none)';
+    });
+  });
+
+  const initial = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as Element & {form: HTMLFormElement | null};
+    return {formId: host.form !== null ? host.form.id : null};
+  });
+  expect(initial.formId).toBe('demo-form');
+
+  // Moving the host out of the form drives `formAssociatedCallback(null)`
+  // and clears `host.form`.
+  await page.evaluate(() => {
+    const host = document.querySelector('lexical-editor[name="notes"]')!;
+    document.body.appendChild(host);
+  });
+  const detached = await page.evaluate(
+    () =>
+      (
+        document.querySelector('lexical-editor[name="notes"]') as Element & {
+          form: HTMLFormElement | null;
+        }
+      ).form,
+  );
+  expect(detached).toBeNull();
+  await expect
+    .poll(() =>
+      page.evaluate(() => {
+        const notes = document.querySelector(
+          'lexical-editor[name="notes"]',
+        ) as HTMLElement;
+        return notes.dataset.lastForm !== undefined
+          ? notes.dataset.lastForm
+          : null;
+      }),
+    )
+    .toBe('(none)');
+});
+
+test('formStateRestoreCallback restores a serialized editor state', async ({
+  page,
+}) => {
+  // Type something so the host has a non-trivial serialized state, then
+  // capture it.
+  await clearAndType(page, 'notes', 'original content');
+  const snapshot = await page.evaluate(() => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as Element & {value: string};
+    return host.value;
+  });
+
+  // Wipe the editor.
+  await editor(page, 'notes').click();
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+  await expect(editor(page, 'notes')).toHaveText('');
+
+  // Replay the serialized state through formStateRestoreCallback — the
+  // same path the browser uses for bfcache navigation and form
+  // autocomplete restore.
+  await page.evaluate(state => {
+    const host = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as Element & {
+      formStateRestoreCallback: (
+        value: string,
+        reason: 'autocomplete' | 'restore',
+      ) => void;
+    };
+    host.formStateRestoreCallback(state, 'restore');
+  }, snapshot);
+
+  await expect(editor(page, 'notes')).toHaveText('original content');
+});
+
+test('inert on the host blocks input across the shadow boundary', async ({
+  page,
+}) => {
+  await clearAndType(page, 'summary', 'baseline');
+  await page.locator('#summary-inert').check();
+
+  // The standard `inert` attribute crosses the shadow boundary on its
+  // own, so the contentEditable inside the summary's shadow root rejects
+  // both focus and keyboard input without Lexical-side glue.
+  const ce = editor(page, 'summary');
+  await ce.click({force: true});
+  await page.keyboard.type(' should be ignored');
+  await expect(ce).toHaveText('baseline');
+
+  // Removing the attribute restores interaction.
+  await page.locator('#summary-inert').uncheck();
+  await ce.click();
+  await page.keyboard.press('End');
+  await page.keyboard.type(' restored');
+  await expect(ce).toHaveText('baseline restored');
+});
+
+test('a required <lexical-editor> participates in form validation', async ({
+  page,
+}) => {
+  // The notes editor in index.html is marked `required`. Out of the box its
+  // editor state has no text content, so the form should refuse to submit.
+  await editor(page, 'notes').click();
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+
+  const initialState = await page.evaluate(() => {
+    const form = document.querySelector('form')!;
+    const notes = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as HTMLElement & {
+      validity: ValidityState;
+      willValidate: boolean;
+    };
+    return {
+      formValid: form.checkValidity(),
+      notesMatchesInvalid: notes.matches(':invalid'),
+      notesValueMissing: notes.validity.valueMissing,
+      notesWillValidate: notes.willValidate,
+    };
+  });
+  expect(initialState).toEqual({
+    formValid: false,
+    notesMatchesInvalid: true,
+    notesValueMissing: true,
+    notesWillValidate: true,
+  });
+
+  // Clicking submit on an invalid form does not run the submit handler, so
+  // `#form-output` stays empty.
+  await page.locator('button[type="submit"]').click();
+  await expect(page.locator('#form-output')).toHaveText('');
+
+  // Once the user types something, the editor becomes valid and the form
+  // submits.
+  await editor(page, 'notes').click();
+  await page.keyboard.type('now filled in');
+  const filledState = await page.evaluate(() => {
+    const notes = document.querySelector(
+      'lexical-editor[name="notes"]',
+    ) as HTMLElement & {validity: ValidityState};
+    return {
+      notesMatchesInvalid: notes.matches(':invalid'),
+      notesValueMissing: notes.validity.valueMissing,
+    };
+  });
+  expect(filledState).toEqual({
+    notesMatchesInvalid: false,
+    notesValueMissing: false,
+  });
+
+  await page.locator('button[type="submit"]').click();
+  await expect(page.locator('#form-output')).toContainText('now filled in');
+});
+
+test('renders an editor inside two nested shadow roots', async ({page}) => {
+  // page → #nested-host shadow → <lexical-editor> shadow. The contentEditable
+  // is two shadow boundaries deep; getDOMShadowRoots' multi-level walk and the
+  // composed selection reads should still resolve it.
+  const nestedEditor = page.locator(
+    '#nested-host >> lexical-editor[name="nested"] >> [data-lexical-editor]',
+  );
+  await expect(nestedEditor).toBeVisible();
+  await nestedEditor.click();
+  // Clear the editor's initial placeholder text before typing so the assertion
+  // below matches the typed string exactly rather than the concatenation.
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+  await page.keyboard.type('nested shadow works');
+  await expect(nestedEditor).toHaveText('nested shadow works');
+
+  // The composed StaticRange resolves through both shadow boundaries, so
+  // Bold via the in-shadow toolbar still operates on the right selection.
+  for (let i = 0; i < 5; i++) {
+    await page.keyboard.press('Shift+ArrowLeft');
+  }
+  const boldButton = page
+    .locator('#nested-host >> lexical-editor[name="nested"] >> .toolbar button')
+    .first();
+  await boldButton.click();
+  await expect(nestedEditor.locator('strong')).toHaveText('works');
+});
+
+test('floating popover anchors to a selection inside the nested shadow root', async ({
+  page,
+}) => {
+  // The composed `lexical-selection-rect` event crosses two shadow boundaries
+  // (editor shadow → wrapper shadow → light DOM document). `event.target` is
+  // retargeted to #nested-host (the wrapper's light-DOM host), so main.ts has
+  // to walk composedPath() to recover the actual <lexical-editor>. Without
+  // that walk the page-side popover never opens for the nested editor — this
+  // exercises the active-editor lookup end-to-end. It also confirms that a
+  // non-active editor's null `lexical-selection-rect` event (every editor
+  // emits one on every scroll, with $getSelection() === null for the inactive
+  // ones) doesn't close the popover while the nested editor still has a
+  // non-empty selection.
+  const nestedEditor = page.locator(
+    '#nested-host >> lexical-editor[name="nested"] >> [data-lexical-editor]',
+  );
+  await nestedEditor.click();
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+  await page.keyboard.type('hello popover');
+  for (let i = 0; i < 7; i++) {
+    await page.keyboard.press('Shift+ArrowLeft');
+  }
+
+  const popover = page.locator('#format-popover');
+  await expect(popover).toBeVisible();
+  await popover.locator('button[data-format="bold"]').click();
+  await expect(nestedEditor.locator('strong')).toHaveText('popover');
+});
diff --git a/dev-examples/shadow-dom-web-component/tsconfig.json b/dev-examples/shadow-dom-web-component/tsconfig.json
new file mode 100644
index 00000000000..8833374f740
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Inherit lib + paths from the workspace root so reaching into
+     * workspace package source picks up node globals (`process`,
+     * `global`), `Symbol.dispose`, `findLastIndex`, etc. */
+    "types": ["node"]
+  },
+  "include": ["src", "../../libdefs/globals.d.ts"],
+  "references": [{"path": "./tsconfig.node.json"}]
+}
diff --git a/dev-examples/shadow-dom-web-component/tsconfig.node.json b/dev-examples/shadow-dom-web-component/tsconfig.node.json
new file mode 100644
index 00000000000..97ede7ee6f2
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/dev-examples/shadow-dom-web-component/vite.config.ts b/dev-examples/shadow-dom-web-component/vite.config.ts
new file mode 100644
index 00000000000..1d64e082d43
--- /dev/null
+++ b/dev-examples/shadow-dom-web-component/vite.config.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {defineConfig} from 'vite';
+
+import lexicalMonorepoPlugin from '../../scripts/vite/lexicalMonorepoPlugin';
+
+export default defineConfig({
+  plugins: [lexicalMonorepoPlugin()],
+  // Pinned so the Playwright config can point a webServer at it.
+  preview: {port: 4327, strictPort: true},
+  server: {port: 4327, strictPort: true},
+});
diff --git a/dev-examples/shadow-dom/README.md b/dev-examples/shadow-dom/README.md
new file mode 100644
index 00000000000..651dbe95821
--- /dev/null
+++ b/dev-examples/shadow-dom/README.md
@@ -0,0 +1,75 @@
+# Lexical Shadow DOM Example
+
+A minimal [Vite](https://vitejs.dev/) + React app that demonstrates Lexical
+across a Shadow DOM boundary in a *nested* shape:
+
+- An **outer editor** lives in the light DOM, with a `LexicalExtensionComposer`
+  registering Rich Text, History, and Tab Indentation.
+- An **inner editor** is mounted inside an open `ShadowRoot`, nested in the
+  outer editor's tree via a `DecoratorNode` (`NestedEditorNode`).
+
+The nesting exercises Lexical's platform-only shadow support:
+
+- **Reading selection** uses
+  [`Selection.getComposedRanges`](https://developer.mozilla.org/docs/Web/API/Selection/getComposedRanges)
+  and [`Selection.direction`](https://developer.mozilla.org/docs/Web/API/Selection/direction),
+  because `Selection.anchorNode` / `getRangeAt` are retargeted to the shadow
+  host when the selection is inside a shadow tree.
+- **Reading focus** uses
+  [`ShadowRoot.activeElement`](https://developer.mozilla.org/docs/Web/API/DocumentOrShadowRoot/activeElement),
+  because `document.activeElement` only reports the outermost shadow host.
+- **Writing selection** uses the native `Selection.setBaseAndExtent`, and
+  keyboard navigation / word + line deletion use the native `Selection.modify`,
+  both of which operate on shadow-tree nodes directly.
+- **Selection-change attribution** prefers the shadow-mounted candidate first
+  when a `selectionchange` fires under a nested layout — so the inner editor
+  wins attribution over its light-DOM parent.
+
+## How it works
+
+[`ShadowRoot.tsx`](./src/ShadowRoot.tsx) attaches an open shadow root to a host
+`<div>` with `Element.attachShadow`, then portals its children (including the
+inner editor's `contentEditable`) into the shadow tree with `createPortal`.
+React context flows across the portal, so the inner editor is built exactly as
+it would be in the light DOM — only its DOM lives behind the shadow boundary.
+The inner editor's CSS is injected as a `<style>` element inside the shadow
+root, since shadow trees do not inherit the document's stylesheets.
+
+The `NestedEditorNode` in [`App.tsx`](./src/App.tsx) is a `DecoratorNode` whose
+host sits in the outer editor's tree. Its `decorate()` returns a React subtree
+that hosts the inner editor's `LexicalExtensionComposer` plus its shadow root —
+so the inner editor lives at a real position inside the outer editor's
+document.
+
+The toolbar in [`Toolbar.tsx`](./src/Toolbar.tsx) lives in the light DOM and
+dispatches commands (`FORMAT_TEXT_COMMAND`, undo/redo) that act on the *outer*
+editor's selection.
+
+## Running
+
+From the repository root:
+
+```sh
+pnpm install
+pnpm -C dev-examples/shadow-dom dev
+```
+
+Then open the printed URL. Try:
+
+- Typing in either editor — outer (light DOM) or inner (shadow root).
+- Selecting words in the outer editor with `Alt`/`Ctrl` + `Shift` + arrow keys
+  and pressing **Bold** / **Italic** / **Underline** in the toolbar.
+- Word and line deletion with `Alt`/`Ctrl` + `Backspace`/`Delete` in either
+  editor.
+
+## Tests
+
+[Playwright](https://playwright.dev/) tests in [`tests/`](./tests) cover
+rendering both editors, typing across the shadow boundary, formatting an outer
+selection via the light-DOM toolbar, and word deletion in the inner editor.
+They start the dev server automatically:
+
+```sh
+pnpm -C dev-examples/shadow-dom exec playwright install chromium
+pnpm -C dev-examples/shadow-dom test
+```
diff --git a/dev-examples/shadow-dom/index.html b/dev-examples/shadow-dom/index.html
new file mode 100644
index 00000000000..be716f09229
--- /dev/null
+++ b/dev-examples/shadow-dom/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lexical Shadow DOM Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/src/main.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/dev-examples/shadow-dom/package.json b/dev-examples/shadow-dom/package.json
new file mode 100644
index 00000000000..3d2f1120c5e
--- /dev/null
+++ b/dev-examples/shadow-dom/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@lexical/dev-shadow-dom-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "playwright install chromium && playwright test"
+  },
+  "dependencies": {
+    "@lexical/extension": "workspace:*",
+    "@lexical/history": "workspace:*",
+    "@lexical/link": "workspace:*",
+    "@lexical/list": "workspace:*",
+    "@lexical/react": "workspace:*",
+    "@lexical/rich-text": "workspace:*",
+    "lexical": "workspace:*",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^6.0.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.61.0",
+    "@rollup/rollup-darwin-arm64": "4.61.0",
+    "@rollup/rollup-win32-x64-msvc": "4.61.0",
+    "@rollup/wasm-node": "4.61.0"
+  }
+}
diff --git a/dev-examples/shadow-dom/playwright.config.ts b/dev-examples/shadow-dom/playwright.config.ts
new file mode 100644
index 00000000000..8548b702035
--- /dev/null
+++ b/dev-examples/shadow-dom/playwright.config.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {PlaywrightTestConfig} from '@playwright/test';
+
+const PORT = 4326;
+
+const config: PlaywrightTestConfig = {
+  testDir: 'tests',
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  use: {baseURL: `http://localhost:${PORT}`},
+  webServer: {
+    command: 'pnpm run dev',
+    port: PORT,
+    reuseExistingServer: true,
+  },
+};
+
+export default config;
diff --git a/dev-examples/shadow-dom/src/App.tsx b/dev-examples/shadow-dom/src/App.tsx
new file mode 100644
index 00000000000..a5b32fdeeb5
--- /dev/null
+++ b/dev-examples/shadow-dom/src/App.tsx
@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// Import the editor CSS as a raw string so it can be injected *inside* the
+// shadow root (shadow trees do not inherit the document's stylesheets).
+import {AutoFocusExtension, TabIndentationExtension} from '@lexical/extension';
+import {HistoryExtension} from '@lexical/history';
+import {LinkExtension} from '@lexical/link';
+import {ListExtension} from '@lexical/list';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
+import {RichTextExtension} from '@lexical/rich-text';
+import {
+  $create,
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  DecoratorNode,
+  defineExtension,
+} from 'lexical';
+import {type JSX} from 'react';
+
+import editorStyleSheet from './editor.css?raw';
+import ExampleTheme from './ExampleTheme';
+import ShadowRoot from './ShadowRoot';
+import Toolbar from './Toolbar';
+
+const innerPlaceholder =
+  'Inner editor (shadow root) — type here. The outer editor lives in the light DOM.';
+
+function $prepopulateInner(): void {
+  const root = $getRoot();
+  if (root.getFirstChild() !== null) {
+    return;
+  }
+  root.append(
+    $createParagraphNode().append(
+      $createTextNode(
+        'Inner editor lives inside a shadow root, nested in the outer editor.',
+      ),
+    ),
+  );
+}
+
+const innerExtension = defineExtension({
+  $initialEditorState: $prepopulateInner,
+  dependencies: [
+    RichTextExtension,
+    ListExtension,
+    LinkExtension,
+    HistoryExtension,
+    AutoFocusExtension,
+    TabIndentationExtension,
+  ],
+  name: '@lexical/examples/shadow-dom-inner',
+  namespace: 'Shadow DOM Demo Inner',
+  theme: ExampleTheme,
+});
+
+function NestedEditorView(): JSX.Element {
+  return (
+    <LexicalExtensionComposer extension={innerExtension} contentEditable={null}>
+      <ShadowRoot styleSheet={editorStyleSheet}>
+        <div className="editor-inner">
+          <ContentEditable
+            className="editor-input"
+            aria-placeholder={innerPlaceholder}
+            placeholder={
+              <div className="editor-placeholder">{innerPlaceholder}</div>
+            }
+          />
+        </div>
+      </ShadowRoot>
+    </LexicalExtensionComposer>
+  );
+}
+
+// A DecoratorNode that hosts the inner shadow-mounted editor as its React
+// subtree. Mounting through a decorator gives the inner editor a real
+// place in the outer editor's Lexical tree — exercising the nested
+// attribution path in `onDocumentSelectionChange`.
+export class NestedEditorNode extends DecoratorNode<JSX.Element> {
+  $config() {
+    return this.config('nested-editor', {extends: DecoratorNode});
+  }
+
+  createDOM(): HTMLElement {
+    const dom = document.createElement('div');
+    dom.className = 'nested-editor-host';
+    return dom;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  decorate(): JSX.Element {
+    return <NestedEditorView />;
+  }
+}
+
+function $createNestedEditorNode(): NestedEditorNode {
+  return $create(NestedEditorNode);
+}
+
+const outerPlaceholder =
+  'Outer editor (light DOM) — type here. The inner editor below lives inside a shadow root.';
+
+function $prepopulateOuter(): void {
+  const root = $getRoot();
+  if (root.getFirstChild() !== null) {
+    return;
+  }
+  root.append(
+    $createParagraphNode().append(
+      $createTextNode(
+        'Outer editor lives in the light DOM. The inner editor below sits inside a shadow root, nested in this outer tree.',
+      ),
+    ),
+  );
+  root.append($createNestedEditorNode());
+  root.append(
+    $createParagraphNode().append(
+      $createTextNode('Type here too — selections should attribute correctly.'),
+    ),
+  );
+}
+
+const outerExtension = defineExtension({
+  $initialEditorState: $prepopulateOuter,
+  dependencies: [
+    RichTextExtension,
+    HistoryExtension,
+    AutoFocusExtension,
+    TabIndentationExtension,
+  ],
+  name: '@lexical/examples/shadow-dom-outer',
+  namespace: 'Shadow DOM Demo Outer',
+  nodes: [NestedEditorNode],
+  theme: ExampleTheme,
+});
+
+export default function App(): JSX.Element {
+  return (
+    <LexicalExtensionComposer extension={outerExtension} contentEditable={null}>
+      <div className="editor-container">
+        <Toolbar />
+        <div className="editor-inner">
+          <ContentEditable
+            className="editor-input"
+            aria-placeholder={outerPlaceholder}
+            placeholder={
+              <div className="editor-placeholder">{outerPlaceholder}</div>
+            }
+          />
+        </div>
+      </div>
+    </LexicalExtensionComposer>
+  );
+}
diff --git a/dev-examples/shadow-dom/src/ExampleTheme.ts b/dev-examples/shadow-dom/src/ExampleTheme.ts
new file mode 100644
index 00000000000..b389f6689d6
--- /dev/null
+++ b/dev-examples/shadow-dom/src/ExampleTheme.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {EditorThemeClasses} from 'lexical';
+
+const ExampleTheme: EditorThemeClasses = {
+  heading: {
+    h1: 'editor-heading-h1',
+    h2: 'editor-heading-h2',
+    h3: 'editor-heading-h3',
+  },
+  link: 'editor-link',
+  list: {
+    listitem: 'editor-listitem',
+    nested: {
+      listitem: 'editor-nested-listitem',
+    },
+    ol: 'editor-list-ol',
+    ul: 'editor-list-ul',
+  },
+  paragraph: 'editor-paragraph',
+  quote: 'editor-quote',
+  text: {
+    bold: 'editor-text-bold',
+    code: 'editor-text-code',
+    italic: 'editor-text-italic',
+    strikethrough: 'editor-text-strikethrough',
+    underline: 'editor-text-underline',
+    underlineStrikethrough: 'editor-text-underline-strikethrough',
+  },
+};
+
+export default ExampleTheme;
diff --git a/dev-examples/shadow-dom/src/ShadowRoot.tsx b/dev-examples/shadow-dom/src/ShadowRoot.tsx
new file mode 100644
index 00000000000..f7ef7b885b7
--- /dev/null
+++ b/dev-examples/shadow-dom/src/ShadowRoot.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  type JSX,
+  type ReactNode,
+  type RefCallback,
+  useCallback,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+/**
+ * Renders its children inside an open DOM ShadowRoot using a React portal.
+ *
+ * The host `<div>` is created in the light DOM; a shadow root is attached to it
+ * with the platform `Element.attachShadow` API, and the children (including the
+ * Lexical contentEditable) are portaled into that shadow tree. React context
+ * still flows across the portal, so the editor is built exactly as it would be
+ * in the light DOM — only its DOM lives behind a shadow boundary.
+ *
+ * Because shadow trees encapsulate styles, an optional `styleSheet` string is
+ * injected as a `<style>` element inside the shadow root so the editor's CSS
+ * travels with it.
+ */
+export default function ShadowRoot({
+  children,
+  styleSheet,
+}: {
+  children: ReactNode;
+  styleSheet?: string;
+}): JSX.Element {
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+  const hostRef = useCallback<RefCallback<HTMLElement>>(
+    host =>
+      setShadowRoot(
+        host ? (host.shadowRoot ?? host.attachShadow({mode: 'open'})) : null,
+      ),
+    [],
+  );
+
+  return (
+    <div ref={hostRef} className="shadow-host">
+      {shadowRoot !== null
+        ? createPortal(
+            <>
+              {styleSheet !== undefined ? <style>{styleSheet}</style> : null}
+              {children}
+            </>,
+            shadowRoot,
+          )
+        : null}
+    </div>
+  );
+}
diff --git a/dev-examples/shadow-dom/src/Toolbar.tsx b/dev-examples/shadow-dom/src/Toolbar.tsx
new file mode 100644
index 00000000000..67d59cbb9ff
--- /dev/null
+++ b/dev-examples/shadow-dom/src/Toolbar.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  FORMAT_TEXT_COMMAND,
+  REDO_COMMAND,
+  type TextFormatType,
+  UNDO_COMMAND,
+} from 'lexical';
+import {type JSX, type MouseEvent} from 'react';
+
+/**
+ * A toolbar that lives in the *light DOM*, outside the shadow root that hosts
+ * the editor. Its buttons dispatch commands that operate on the editor's
+ * selection — which lives inside the shadow tree — demonstrating that
+ * selection-driven editing works across the shadow boundary.
+ */
+export default function Toolbar(): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+
+  // Prevent the button from stealing focus (and clearing the editor selection)
+  // when it is clicked.
+  const keepEditorFocus = (event: MouseEvent) => event.preventDefault();
+
+  const format = (formatType: TextFormatType) => () =>
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, formatType);
+
+  return (
+    <div className="toolbar">
+      <button
+        type="button"
+        onMouseDown={keepEditorFocus}
+        onClick={format('bold')}
+        aria-label="Bold">
+        <b>B</b>
+      </button>
+      <button
+        type="button"
+        onMouseDown={keepEditorFocus}
+        onClick={format('italic')}
+        aria-label="Italic">
+        <i>I</i>
+      </button>
+      <button
+        type="button"
+        onMouseDown={keepEditorFocus}
+        onClick={format('underline')}
+        aria-label="Underline">
+        <u>U</u>
+      </button>
+      <span className="toolbar-divider" />
+      <button
+        type="button"
+        onMouseDown={keepEditorFocus}
+        onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}>
+        Undo
+      </button>
+      <button
+        type="button"
+        onMouseDown={keepEditorFocus}
+        onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}>
+        Redo
+      </button>
+    </div>
+  );
+}
diff --git a/dev-examples/shadow-dom/src/editor.css b/dev-examples/shadow-dom/src/editor.css
new file mode 100644
index 00000000000..cc1633e2cde
--- /dev/null
+++ b/dev-examples/shadow-dom/src/editor.css
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * These styles are injected *inside* the shadow root (see App.tsx), because a
+ * shadow tree does not inherit the document's stylesheets.
+ */
+
+.editor-inner {
+  background: #fff;
+  position: relative;
+}
+
+.editor-input {
+  min-height: 280px;
+  font-size: 16px;
+  caret-color: #444;
+  position: relative;
+  tab-size: 1;
+  outline: 0;
+  padding: 15px 20px;
+  line-height: 1.5;
+  color: #000;
+}
+
+.editor-placeholder {
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  top: 15px;
+  left: 20px;
+  font-size: 16px;
+  /* Match the editor's line-height so the placeholder's text baseline
+     aligns with the first typed character. Without this the placeholder
+     used the browser default (~1.2) and sat slightly above the input. */
+  line-height: 1.5;
+  user-select: none;
+  pointer-events: none;
+}
+
+.editor-paragraph {
+  margin: 0 0 8px 0;
+}
+
+.editor-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.editor-heading-h1 {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+}
+
+.editor-heading-h2 {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 10px 0;
+}
+
+.editor-heading-h3 {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+}
+
+.editor-quote {
+  margin: 0 0 8px 16px;
+  border-left: 4px solid #ccc;
+  padding-left: 12px;
+  color: #555;
+}
+
+.editor-list-ol,
+.editor-list-ul {
+  padding: 0;
+  margin: 0 0 8px 16px;
+}
+
+.editor-listitem {
+  margin: 0 0 4px 16px;
+}
+
+.editor-nested-listitem {
+  list-style-type: none;
+}
+
+.editor-link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+
+.editor-text-bold {
+  font-weight: bold;
+}
+
+.editor-text-italic {
+  font-style: italic;
+}
+
+.editor-text-underline {
+  text-decoration: underline;
+}
+
+.editor-text-strikethrough {
+  text-decoration: line-through;
+}
+
+.editor-text-underline-strikethrough {
+  text-decoration: underline line-through;
+}
+
+.editor-text-code {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
diff --git a/dev-examples/shadow-dom/src/main.tsx b/dev-examples/shadow-dom/src/main.tsx
new file mode 100644
index 00000000000..7d7db215a4f
--- /dev/null
+++ b/dev-examples/shadow-dom/src/main.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './styles.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <div className="App">
+      <h1>Lexical in a Shadow DOM</h1>
+      <p className="App-blurb">
+        The editor below is rendered inside an open <code>ShadowRoot</code>. The
+        toolbar lives in the light DOM <em>outside</em> the shadow boundary.
+        Selection is resolved with <code>Selection.getComposedRanges</code> and
+        focus with <code>ShadowRoot.activeElement</code>, so typing, selection,
+        keyboard navigation, formatting and deletion all work across the shadow
+        boundary using platform APIs only.
+      </p>
+      <App />
+    </div>
+  </React.StrictMode>,
+);
diff --git a/dev-examples/shadow-dom/src/styles.css b/dev-examples/shadow-dom/src/styles.css
new file mode 100644
index 00000000000..b3efe514cef
--- /dev/null
+++ b/dev-examples/shadow-dom/src/styles.css
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Light-DOM styles for the page chrome and the toolbar. The editor itself is
+ * styled by editor.css, which is injected inside the shadow root.
+ */
+
+body {
+  margin: 0;
+  background: #eee;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+}
+
+.App {
+  font-family: sans-serif;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.App > h1 {
+  text-align: center;
+  font-size: 24px;
+  color: #333;
+}
+
+.App-blurb {
+  text-align: center;
+  color: #555;
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+.App-blurb code {
+  background: #f3f3f3;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 90%;
+}
+
+.editor-container {
+  position: relative;
+  border-radius: 10px;
+  border: 2px solid #3b82f6;
+  background: #fff;
+  overflow: visible;
+}
+
+.editor-container::before {
+  content: 'OUTER · light DOM';
+  position: absolute;
+  top: -10px;
+  left: 24px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: #1e40af;
+  background: #eff6ff;
+  border: 1px solid #3b82f6;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.nested-editor-host {
+  position: relative;
+  margin: 24px 12px 12px;
+  padding-top: 14px;
+  border-radius: 10px;
+  border: 2px solid #a855f7;
+  background: #faf5ff;
+  overflow: visible;
+}
+
+.nested-editor-host::before {
+  content: 'INNER · shadow root';
+  position: absolute;
+  top: -10px;
+  left: 24px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: #6b21a8;
+  background: #faf5ff;
+  border: 1px solid #a855f7;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  border-bottom: 1px solid #eee;
+  background: #fafafa;
+}
+
+.toolbar button {
+  min-width: 32px;
+  height: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  color: #222;
+}
+
+.toolbar button:hover {
+  background: #ececec;
+}
+
+.toolbar-divider {
+  width: 1px;
+  align-self: stretch;
+  background: #e0e0e0;
+  margin: 0 4px;
+}
+
+.shadow-host {
+  display: block;
+}
+
+.editor-container .editor-input {
+  padding: 16px 20px;
+  outline: none;
+  min-height: 80px;
+}
+
+.editor-container > .editor-inner > .editor-input {
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.nested-editor-host > * {
+  margin: 0;
+}
diff --git a/dev-examples/shadow-dom/src/vite-env.d.ts b/dev-examples/shadow-dom/src/vite-env.d.ts
new file mode 100644
index 00000000000..c63a585ee73
--- /dev/null
+++ b/dev-examples/shadow-dom/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/// <reference types="vite/client" />
diff --git a/dev-examples/shadow-dom/tests/shadow-dom.spec.ts b/dev-examples/shadow-dom/tests/shadow-dom.spec.ts
new file mode 100644
index 00000000000..b2cb0f280f2
--- /dev/null
+++ b/dev-examples/shadow-dom/tests/shadow-dom.spec.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {expect, Locator, Page, test} from '@playwright/test';
+
+const outerEditor = (page: Page): Locator =>
+  page
+    .locator('.editor-container > .editor-inner > div[contenteditable="true"]')
+    .first();
+
+const innerEditor = (page: Page): Locator =>
+  page.locator('.shadow-host div[contenteditable="true"]').first();
+
+async function clearAndType(
+  page: Page,
+  locator: Locator,
+  text: string,
+): Promise<void> {
+  await locator.click();
+  await page.keyboard.press('ControlOrMeta+a');
+  await page.keyboard.press('Delete');
+  await page.keyboard.type(text);
+}
+
+test('renders both editors with the inner one inside an open shadow root', async ({
+  page,
+}) => {
+  await page.goto('/');
+  await expect(page.locator('.shadow-host')).toHaveCount(1);
+
+  // The host has an open shadow root; the inner editor's contentEditable lives
+  // inside it and is invisible to a light-DOM querySelector, while Playwright
+  // (which pierces shadow roots) can see it.
+  expect(
+    await page.evaluate(
+      () => document.querySelector('.shadow-host')!.shadowRoot !== null,
+    ),
+  ).toBe(true);
+  // Outer editor's contentEditable is in the light DOM, so a light-DOM
+  // querySelector finds exactly one.
+  expect(
+    await page.evaluate(
+      () => document.querySelectorAll('div[contenteditable="true"]').length,
+    ),
+  ).toBe(1);
+  await expect(outerEditor(page)).toBeVisible();
+  await expect(innerEditor(page)).toBeVisible();
+});
+
+test('types and reconciles text in the inner shadow editor', async ({page}) => {
+  await page.goto('/');
+  await clearAndType(page, innerEditor(page), 'hello shadow world');
+  await expect(innerEditor(page)).toHaveText('hello shadow world');
+});
+
+test('types and reconciles text in the outer light-DOM editor', async ({
+  page,
+}) => {
+  await page.goto('/');
+  await clearAndType(page, outerEditor(page), 'hello light world');
+  await expect(outerEditor(page)).toContainText('hello light world');
+});
+
+test('formats an outer selection from the light-DOM toolbar', async ({
+  page,
+}) => {
+  await page.goto('/');
+  // Target the last outer-editor paragraph by text content — Playwright
+  // pierces shadow roots, so p:last-of-type would hit the inner editor.
+  const targetP = outerEditor(page).locator('p', {hasText: 'Type here too'});
+  await targetP.click();
+  await page.keyboard.press('Home');
+  await page.keyboard.press('Shift+End');
+  await page.keyboard.type('hello world');
+
+  for (let i = 0; i < 5; i++) {
+    await page.keyboard.press('Shift+ArrowLeft');
+  }
+  await page.locator('.toolbar button[aria-label="Bold"]').click();
+
+  await expect(outerEditor(page).locator('strong')).toHaveText('world');
+});
+
+test('deletes by word in the inner shadow editor', async ({page}) => {
+  await page.goto('/');
+  await clearAndType(page, innerEditor(page), 'hello world');
+  // Backwards word deletion uses native Selection.modify, reading the result
+  // via getComposedRanges inside the shadow root.
+  // Ctrl+Backspace on Linux/Windows, Alt+Backspace on macOS.
+  const isMac = process.platform === 'darwin';
+  await page.keyboard.press(isMac ? 'Alt+Backspace' : 'Control+Backspace');
+  await expect(innerEditor(page)).toHaveText('hello ');
+});
diff --git a/dev-examples/shadow-dom/tsconfig.json b/dev-examples/shadow-dom/tsconfig.json
new file mode 100644
index 00000000000..8833374f740
--- /dev/null
+++ b/dev-examples/shadow-dom/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Inherit lib + paths from the workspace root so reaching into
+     * workspace package source picks up node globals (`process`,
+     * `global`), `Symbol.dispose`, `findLastIndex`, etc. */
+    "types": ["node"]
+  },
+  "include": ["src", "../../libdefs/globals.d.ts"],
+  "references": [{"path": "./tsconfig.node.json"}]
+}
diff --git a/dev-examples/shadow-dom/tsconfig.node.json b/dev-examples/shadow-dom/tsconfig.node.json
new file mode 100644
index 00000000000..97ede7ee6f2
--- /dev/null
+++ b/dev-examples/shadow-dom/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/dev-examples/shadow-dom/vite.config.ts b/dev-examples/shadow-dom/vite.config.ts
new file mode 100644
index 00000000000..f4528c96d8e
--- /dev/null
+++ b/dev-examples/shadow-dom/vite.config.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
+
+import lexicalMonorepoPlugin from '../../scripts/vite/lexicalMonorepoPlugin';
+
+export default defineConfig({
+  plugins: [react(), lexicalMonorepoPlugin()],
+  // Pinned so the Playwright config can point a webServer at it.
+  preview: {port: 4326, strictPort: true},
+  server: {port: 4326, strictPort: true},
+});
diff --git a/packages/lexical-clipboard/flow/LexicalClipboard.js.flow b/packages/lexical-clipboard/flow/LexicalClipboard.js.flow
index e220d721e64..db6cfc11b50 100644
--- a/packages/lexical-clipboard/flow/LexicalClipboard.js.flow
+++ b/packages/lexical-clipboard/flow/LexicalClipboard.js.flow
@@ -94,4 +94,5 @@ declare export function copyToClipboard(
 declare export function caretFromPoint(
   x: number,
   y: number,
+  rootElement?: ?HTMLElement,
 ): null | {offset: number, node: Node};
diff --git a/packages/lexical-clipboard/src/caretFromPoint.ts b/packages/lexical-clipboard/src/caretFromPoint.ts
index 6c7c8f599ba..c6fcef0d4e8 100644
--- a/packages/lexical-clipboard/src/caretFromPoint.ts
+++ b/packages/lexical-clipboard/src/caretFromPoint.ts
@@ -6,34 +6,144 @@
  *
  */
 
+import {
+  getDOMShadowRoots,
+  getParentElement,
+  getRootOwnerDocument,
+  isDOMShadowRoot,
+} from 'lexical';
+
+// True when `node` is `rootElement` or a composed descendant of it, walking
+// across shadow boundaries via getParentElement. A point retargeted to the
+// shadow host resolves to an ancestor of rootElement, so it fails this check
+// (the host is above rootElement, never below it).
+function isWithinComposedTree(node: Node | null, rootElement: HTMLElement) {
+  for (let current: Node | null = node; current !== null; ) {
+    if (current === rootElement) {
+      return true;
+    }
+    current = getParentElement(current);
+  }
+  return false;
+}
+
+// Find the closest caret position at (x, y) by walking text nodes under
+// `container`. Two-phase: pick the nearest text node via getClientRects(),
+// then scan offsets within that single node. Vertical-first comparison
+// prevents cross-line mispicks on wrapped spans and RTL/bidi text.
+// Not a hot path (runs once per drag-drop).
+function findTextOffsetAtPoint(
+  x: number,
+  y: number,
+  container: Node,
+  doc: Document,
+): {node: Node; offset: number} | null {
+  const range = doc.createRange();
+
+  const vDist = (r: DOMRect) =>
+    y < r.top ? r.top - y : y > r.bottom ? y - r.bottom : 0;
+  const hDist = (r: DOMRect) =>
+    x < r.left ? r.left - x : x > r.right ? x - r.right : 0;
+
+  // Phase 1: pick the nearest text node via one getClientRects() per node
+  // (each returns its per-line fragments) so phase 2 scans a single node.
+  const walker = doc.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let bestNode: Text | null = null;
+  let bestV = Infinity;
+  let bestH = Infinity;
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    range.selectNodeContents(n);
+    for (const r of range.getClientRects()) {
+      const v = vDist(r);
+      const h = hDist(r);
+      if (v < bestV || (v === bestV && h < bestH)) {
+        bestV = v;
+        bestH = h;
+        bestNode = n as Text;
+      }
+    }
+  }
+  if (bestNode === null) {
+    return null;
+  }
+
+  // Phase 2: closest caret offset within that node, vertical-first again
+  // (so LTR and RTL both land on the right line).
+  let bestOffset = 0;
+  let offV = Infinity;
+  let offH = Infinity;
+  for (let i = 0; i <= bestNode.length; i++) {
+    range.setStart(bestNode, i);
+    range.collapse(true);
+    const r = range.getBoundingClientRect();
+    const v = vDist(r);
+    const h = Math.abs(x - r.left);
+    if (v < offV || (v === offV && h < offH)) {
+      offV = v;
+      offH = h;
+      bestOffset = i;
+    }
+  }
+  return {node: bestNode, offset: bestOffset};
+}
+
 /** @internal */
 export function caretFromPoint(
   x: number,
   y: number,
+  rootElement: HTMLElement | null = null,
 ): null | {
   offset: number;
   node: Node;
 } {
-  if (typeof document.caretRangeFromPoint !== 'undefined') {
-    const range = document.caretRangeFromPoint(x, y);
+  const doc = getRootOwnerDocument(rootElement);
+  const shadowRoots = rootElement ? getDOMShadowRoots(rootElement) : [];
+  const hasShadow = rootElement !== null && shadowRoots.length > 0;
+  // caretPositionFromPoint with {shadowRoots} (Chrome 128+, Firefox 125+)
+  // returns the un-retargeted node inside the shadow tree directly.
+  if (hasShadow && typeof doc.caretPositionFromPoint === 'function') {
+    const caretPosition = doc.caretPositionFromPoint(x, y, {shadowRoots});
+    if (
+      caretPosition !== null &&
+      isWithinComposedTree(caretPosition.offsetNode, rootElement)
+    ) {
+      return {node: caretPosition.offsetNode, offset: caretPosition.offset};
+    }
+  }
+  // Shadow fallback: caretRangeFromPoint retargets shadow-internal nodes
+  // to the shadow host. Use shadowRoot.elementFromPoint to find the
+  // correct element, then walk its text nodes to find the offset.
+  // Also reached when caretPositionFromPoint exists but silently ignored
+  // the {shadowRoots} option (older Chrome/Firefox).
+  if (hasShadow) {
+    const rootNode = rootElement.getRootNode();
+    if (isDOMShadowRoot(rootNode)) {
+      const element = rootNode.elementFromPoint(x, y);
+      if (element !== null && rootElement.contains(element)) {
+        const result = findTextOffsetAtPoint(x, y, element, doc);
+        if (result !== null) {
+          return result;
+        }
+      }
+      // The point missed the editor's shadow content (gutter/padding, slotted
+      // content, or a sibling outside rootElement). Fall through to the legacy
+      // caretRangeFromPoint path for a best-effort (host-level) caret rather
+      // than dropping the interaction entirely.
+    }
+  }
+  // Non-shadow path.
+  if (typeof doc.caretRangeFromPoint === 'function') {
+    const range = doc.caretRangeFromPoint(x, y);
     if (range === null) {
       return null;
     }
-    return {
-      node: range.startContainer,
-      offset: range.startOffset,
-    };
-  } else if (typeof document.caretPositionFromPoint !== 'undefined') {
-    const range = document.caretPositionFromPoint(x, y);
-    if (range === null) {
+    return {node: range.startContainer, offset: range.startOffset};
+  } else if (typeof doc.caretPositionFromPoint === 'function') {
+    const caretPosition = doc.caretPositionFromPoint(x, y);
+    if (caretPosition === null) {
       return null;
     }
-    return {
-      node: range.offsetNode,
-      offset: range.offset,
-    };
-  } else {
-    // Gracefully handle IE
-    return null;
+    return {node: caretPosition.offsetNode, offset: caretPosition.offset};
   }
+  return null;
 }
diff --git a/packages/lexical-clipboard/src/clipboard.ts b/packages/lexical-clipboard/src/clipboard.ts
index 29e51c21900..c2cd7d181e3 100644
--- a/packages/lexical-clipboard/src/clipboard.ts
+++ b/packages/lexical-clipboard/src/clipboard.ts
@@ -42,7 +42,12 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   COPY_COMMAND,
   defineExtension,
+  findAllLexicalElementsDeep,
   getDOMSelection,
+  getDOMSelectionPoints,
+  getEditorPropertyFromDOMNode,
+  isHTMLElement,
+  isLexicalEditor,
   isSelectionWithinEditor,
   LexicalEditor,
   LexicalNode,
@@ -214,19 +219,28 @@ function readDragMarker(dataTransfer: DataTransfer): LexicalDragMarker | null {
 }
 
 function findEditorRootByKey(key: string, doc: Document): HTMLElement | null {
-  const elements = doc.querySelectorAll('[data-lexical-editor="true"]');
-  for (const el of Array.from(elements)) {
-    const editor = (el as unknown as {__lexicalEditor?: {getKey: () => string}})
-      .__lexicalEditor;
-    if (editor && editor.getKey() === key) {
-      return el as HTMLElement;
+  for (const el of findAllLexicalElementsDeep(doc)) {
+    const editor = getEditorPropertyFromDOMNode(el);
+    if (
+      isLexicalEditor(editor) &&
+      editor.getKey() === key &&
+      isHTMLElement(el)
+    ) {
+      return el;
     }
   }
   return null;
 }
 
-function $resolveDropPointCaret(event: DragEvent): null | PointCaret<'next'> {
-  const hit = caretFromPoint(event.clientX, event.clientY);
+function $resolveDropPointCaret(
+  event: DragEvent,
+  editor: LexicalEditor,
+): null | PointCaret<'next'> {
+  const hit = caretFromPoint(
+    event.clientX,
+    event.clientY,
+    editor.getRootElement(),
+  );
   if (hit === null) {
     return null;
   }
@@ -284,7 +298,7 @@ function $doDrop(
     return false;
   }
 
-  const dropCaret = $resolveDropPointCaret(event);
+  const dropCaret = $resolveDropPointCaret(event, editor);
   if (dropCaret === null) {
     return false;
   }
@@ -717,7 +731,7 @@ export async function copyToClipboard(
   element.style.top = '-1000px';
   element.append(windowDocument.createTextNode('#'));
   rootElement.append(element);
-  const range = new Range();
+  const range = windowDocument.createRange();
   range.setStart(element, 0);
   range.setEnd(element, 1);
   domSelection.removeAllRanges();
@@ -768,8 +782,9 @@ function $copyToClipboardEvent(
     if (!domSelection) {
       return false;
     }
-    const anchorDOM = domSelection.anchorNode;
-    const focusDOM = domSelection.focusNode;
+    const points = getDOMSelectionPoints(domSelection, editor.getRootElement());
+    const anchorDOM = points.anchorNode;
+    const focusDOM = points.focusNode;
     if (
       anchorDOM !== null &&
       focusDOM !== null &&
diff --git a/packages/lexical-devtools/src/element-picker/element-picker.ts b/packages/lexical-devtools/src/element-picker/element-picker.ts
index ae03dbec11e..12b305735a9 100644
--- a/packages/lexical-devtools/src/element-picker/element-picker.ts
+++ b/packages/lexical-devtools/src/element-picker/element-picker.ts
@@ -90,9 +90,24 @@ export default class ElementPicker {
       return;
     }
 
-    // Peek through the overlay to find the new target
+    // Peek through the overlay to find the new target. Descend into open
+    // shadow roots so editors mounted inside a shadow tree are pickable;
+    // document.elementFromPoint is retargeted to the outermost shadow host.
     this.overlay.ignoreCursor();
-    const elAtCursor = document.elementFromPoint(this.mouseX, this.mouseY);
+    let elAtCursor: Element | null = document.elementFromPoint(
+      this.mouseX,
+      this.mouseY,
+    );
+    while (elAtCursor !== null && elAtCursor.shadowRoot !== null) {
+      const inner = elAtCursor.shadowRoot.elementFromPoint(
+        this.mouseX,
+        this.mouseY,
+      );
+      if (inner === null || inner === elAtCursor) {
+        break;
+      }
+      elAtCursor = inner;
+    }
     let newTarget = elAtCursor as HTMLElement;
     this.overlay.captureCursor();
 
diff --git a/packages/lexical-devtools/src/entrypoints/injected/utils/queryLexicalNodes.ts b/packages/lexical-devtools/src/entrypoints/injected/utils/queryLexicalNodes.ts
index 4df2b4b350e..9d31f8ecabc 100644
--- a/packages/lexical-devtools/src/entrypoints/injected/utils/queryLexicalNodes.ts
+++ b/packages/lexical-devtools/src/entrypoints/injected/utils/queryLexicalNodes.ts
@@ -5,11 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import {findAllLexicalElementsDeep} from 'lexical';
+
 import {LexicalHTMLElement} from '../../../types';
 import {isLexicalNode} from '../../../utils/isLexicalNode';
 
 export default function queryLexicalNodes(): LexicalHTMLElement[] {
-  return Array.from(
-    document.querySelectorAll('div[data-lexical-editor]'),
-  ).filter(isLexicalNode);
+  const out: LexicalHTMLElement[] = [];
+  for (const el of findAllLexicalElementsDeep(document)) {
+    if (isLexicalNode(el)) {
+      out.push(el);
+    }
+  }
+  return out;
 }
diff --git a/packages/lexical-dragon/src/index.ts b/packages/lexical-dragon/src/index.ts
index 754dd1c4f95..6c12edd6e8c 100644
--- a/packages/lexical-dragon/src/index.ts
+++ b/packages/lexical-dragon/src/index.ts
@@ -12,6 +12,7 @@ import {
   $isRangeSelection,
   $isTextNode,
   defineExtension,
+  getActiveElementDeep,
   getEditorPropertyFromDOMNode,
   isLexicalEditor,
   LexicalEditor,
@@ -164,7 +165,7 @@ function getFocusedEditor(
     return null;
   }
   const activeEditor = getEditorPropertyFromDOMNode(
-    targetWindow.document.activeElement,
+    getActiveElementDeep(targetWindow.document),
   );
   return isLexicalEditor(activeEditor) && state.editors.has(activeEditor)
     ? activeEditor
diff --git a/packages/lexical-extension/src/AutoFocusExtension.ts b/packages/lexical-extension/src/AutoFocusExtension.ts
index d5652cf7ec5..cf8296005bb 100644
--- a/packages/lexical-extension/src/AutoFocusExtension.ts
+++ b/packages/lexical-extension/src/AutoFocusExtension.ts
@@ -6,7 +6,7 @@
  *
  */
 
-import {defineExtension, safeCast} from 'lexical';
+import {defineExtension, getActiveElement, safeCast} from 'lexical';
 
 import {namedSignals} from './namedSignals';
 import {effect} from './signals';
@@ -49,7 +49,10 @@ export const AutoFocusExtension = /* @__PURE__ */ defineExtension({
                 // trigger a re-focus on the element. So in the case this occurs, we'll need to correct it.
                 // Normally this is fine, Selection API !== Focus API, but fore the intents of the naming
                 // of this plugin, which should preserve focus too.
-                const activeElement = document.activeElement;
+                // getActiveElement rather than document.activeElement, which
+                // reports the shadow host when the editor is in a shadow root.
+                const activeElement =
+                  rootElement !== null ? getActiveElement(rootElement) : null;
                 if (
                   rootElement !== null &&
                   (activeElement === null ||
diff --git a/packages/lexical-list/src/checkList.ts b/packages/lexical-list/src/checkList.ts
index 4b0963e364e..576d25e6d56 100644
--- a/packages/lexical-list/src/checkList.ts
+++ b/packages/lexical-list/src/checkList.ts
@@ -20,6 +20,7 @@ import {
   $isRangeSelection,
   COMMAND_PRIORITY_LOW,
   createCommand,
+  getActiveElement,
   getNearestEditorFromDOMNode,
   isHTMLElement,
   KEY_ARROW_DOWN_COMMAND,
@@ -134,7 +135,7 @@ export function registerCheckList(
     editor.registerCommand<KeyboardEvent>(
       KEY_ESCAPE_COMMAND,
       () => {
-        const activeItem = getActiveCheckListItem();
+        const activeItem = getActiveCheckListItem(editor);
 
         if (activeItem != null) {
           const rootElement = editor.getRootElement();
@@ -153,7 +154,7 @@ export function registerCheckList(
     editor.registerCommand<KeyboardEvent>(
       KEY_SPACE_COMMAND,
       event => {
-        const activeItem = getActiveCheckListItem();
+        const activeItem = getActiveCheckListItem(editor);
 
         if (activeItem != null && editor.isEditable()) {
           editor.update(() => {
@@ -196,7 +197,13 @@ export function registerCheckList(
                 ) {
                   const domNode = editor.getElementByKey(elementNode.__key);
 
-                  if (domNode != null && document.activeElement !== domNode) {
+                  // getActiveElement rather than document.activeElement, which
+                  // reports the shadow host in a shadow root (so this would
+                  // otherwise always re-focus and swallow the arrow key).
+                  if (
+                    domNode != null &&
+                    getActiveElement(domNode) !== domNode
+                  ) {
                     domNode.focus();
                     event.preventDefault();
                     return true;
@@ -384,8 +391,12 @@ function handleSelectDefaults(
   });
 }
 
-function getActiveCheckListItem(): HTMLElement | null {
-  const activeElement = document.activeElement;
+function getActiveCheckListItem(editor: LexicalEditor): HTMLElement | null {
+  // getActiveElement scoped to the editor's root rather than
+  // document.activeElement, which reports the shadow host when the editor is
+  // in a shadow root (so the focused <li> would otherwise be invisible here).
+  const rootElement = editor.getRootElement();
+  const activeElement = rootElement ? getActiveElement(rootElement) : null;
 
   return isHTMLElement(activeElement) &&
     activeElement.tagName === 'LI' &&
@@ -436,7 +447,7 @@ function handleArrowUpOrDown(
   editor: LexicalEditor,
   backward: boolean,
 ) {
-  const activeItem = getActiveCheckListItem();
+  const activeItem = getActiveCheckListItem(editor);
 
   if (activeItem != null) {
     editor.update(() => {
diff --git a/packages/lexical-playground/__tests__/e2e/ShadowDOM.spec.mjs b/packages/lexical-playground/__tests__/e2e/ShadowDOM.spec.mjs
new file mode 100644
index 00000000000..dad0895f0d9
--- /dev/null
+++ b/packages/lexical-playground/__tests__/e2e/ShadowDOM.spec.mjs
@@ -0,0 +1,651 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  deleteNextWord,
+  moveToEditorBeginning,
+  selectAll,
+  selectPrevWord,
+  toggleBold,
+} from '../keyboardShortcuts/index.mjs';
+import {
+  assertHTML,
+  copyToClipboard,
+  expect,
+  focusEditor,
+  html,
+  initialize,
+  insertSampleImage,
+  pasteFromClipboard,
+  test,
+} from '../utils/index.mjs';
+
+const IGNORE = {ignoreClasses: true, ignoreDir: true, ignoreInlineStyles: true};
+
+test.describe('Shadow DOM', () => {
+  test.beforeEach(({isCollab, isPlainText, page}) => {
+    // Rich-text-only; collab renders in split iframes which is an orthogonal
+    // concern to shadow root encapsulation.
+    test.skip(isPlainText || isCollab);
+    return initialize({isShadowDOM: true, page});
+  });
+
+  test('renders the editor inside an open shadow root', async ({page}) => {
+    await expect(page.locator('[data-test-id="shadow-dom-host"]')).toHaveCount(
+      1,
+    );
+    // document.querySelector does not pierce shadow roots, so a null result
+    // proves the contentEditable lives inside the shadow tree. Playwright's
+    // selector engine still sees it (it pierces open shadow roots).
+    const contentEditableInLightDom = await page.evaluate(
+      () => document.querySelector('div[contenteditable="true"]') !== null,
+    );
+    expect(contentEditableInLightDom).toBe(false);
+    await expect(
+      page.locator('div[contenteditable="true"]').first(),
+    ).toBeVisible();
+  });
+
+  test('types and reconciles text inside the shadow root', async ({page}) => {
+    await focusEditor(page);
+    await page.keyboard.type('Hello world');
+    await assertHTML(
+      page,
+      html`
+        <p><span data-lexical-text="true">Hello world</span></p>
+      `,
+      undefined,
+      IGNORE,
+    );
+  });
+
+  test('selects a word with Selection.modify and formats it', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await page.keyboard.type('Hello world');
+    // Word-granularity selection goes through RangeSelection.modify, which
+    // reads the result via Selection.getComposedRanges inside a shadow root.
+    await selectPrevWord(page);
+    await toggleBold(page);
+    await assertHTML(
+      page,
+      html`
+        <p>
+          <span data-lexical-text="true">Hello</span>
+          <strong data-lexical-text="true">world</strong>
+        </p>
+      `,
+      undefined,
+      IGNORE,
+    );
+  });
+
+  test('select all and delete clears the editor', async ({page}) => {
+    await focusEditor(page);
+    await page.keyboard.type('Hello world');
+    await selectAll(page);
+    await page.keyboard.press('Backspace');
+    await assertHTML(
+      page,
+      html`
+        <p><br data-lexical-managed-linebreak="true" /></p>
+      `,
+      undefined,
+      IGNORE,
+    );
+  });
+
+  test('deletes by word inside the shadow root', async ({page}) => {
+    await focusEditor(page);
+    await page.keyboard.type('Hello world');
+    await moveToEditorBeginning(page);
+    // Forward word deletion extends the selection with native Selection.modify
+    // and removes it; this is the operation that historically failed in shadow
+    // DOM without composed-range reads.
+    await deleteNextWord(page);
+    const text = await page
+      .locator('div[contenteditable="true"]')
+      .first()
+      .textContent();
+    expect(text).not.toContain('Hello');
+    expect(text).toContain('world');
+  });
+
+  test('clicking a table cell creates a range selection inside the cell', async ({
+    page,
+    browserName,
+  }) => {
+    // Webkit's headless pointer dispatch is flaky on the table cell hit-test;
+    // the underlying handler is exercised by the chromium/firefox runs.
+    test.skip(browserName === 'webkit');
+    await focusEditor(page);
+    // Manual sequence — `insertTable` from utils opens the Insert dropdown
+    // via click() but the dropdown's outside-click handler also runs against
+    // the same synthetic click event in the shadow-mounted toolbar; explicit
+    // steps with waitFor between them keep the dropdown open long enough to
+    // pick the Table item.
+    await page
+      .locator('.toolbar-item[aria-label="Insert specialized editor node"]')
+      .click();
+    const tableItem = page.locator('.dropdown .item .table');
+    await tableItem.waitFor();
+    await tableItem.click();
+    await page.locator('input[data-test-id="table-modal-rows"]').fill('2');
+    await page.locator('input[data-test-id="table-modal-columns"]').fill('2');
+    await page
+      .locator('div[data-test-id="table-model-confirm-insert"] > .Button__root')
+      .click();
+    await page.locator('table').waitFor();
+    // Clicking a cell goes through the window-attached pointerdown listener
+    // in lexical-table; without getComposedEventTarget the event.target is
+    // retargeted to the shadow host and the rootElement.contains() gate
+    // rejects the click. Type into a non-first cell to assert the click
+    // actually placed the caret inside that cell.
+    // InsertTableDialog defaults to includeHeaders=true, so 3 of the 4 cells
+    // are <th>; pick the only <td> as the non-first cell.
+    const targetCell = page.locator('table td').last();
+    await targetCell.click();
+    await page.keyboard.type('typed');
+    const cellText = await targetCell.textContent();
+    expect(cellText).toContain('typed');
+  });
+
+  test('component picker opens, navigates and inserts a heading', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    // The slash menu (LexicalTypeaheadMenuPlugin) repositions on scroll; the
+    // popup is anchored to the editor's selection and its open/close cycle
+    // exercises the typeahead path that reads the composed selection.
+    await page.keyboard.type('/heading');
+    // LexicalMenu's defaultMenuRenderFn portals the typeahead popup as
+    // `<div class="typeahead-popover mentions-menu">`; there is no
+    // dedicated data-test-id, so target the rendered class.
+    await expect(
+      page.locator('.typeahead-popover.mentions-menu'),
+    ).toBeVisible();
+    // Insert the first option (Heading 1).
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('Heading text');
+    await assertHTML(
+      page,
+      html`
+        <h1><span data-lexical-text="true">Heading text</span></h1>
+      `,
+      undefined,
+      IGNORE,
+    );
+  });
+
+  test('inserts a sample image through the shadow toolbar', async ({page}) => {
+    await focusEditor(page);
+    // The Insert dropdown opens inside the shadow toolbar and the modal's
+    // "Sample" button inserts an ImageNode whose <img> renders inside the
+    // shadow root. Playwright's selector engine pierces open shadow roots,
+    // so the image element is reachable from the page locator.
+    await insertSampleImage(page);
+    await expect(page.locator('.editor-image img').first()).toBeVisible();
+  });
+
+  test('pastes a file image into the shadow editor', async ({page}) => {
+    await focusEditor(page);
+    // Simulate a file-bearing paste targeted at the shadow-internal
+    // contentEditable. `@lexical/clipboard`'s paste handler runs against
+    // a real `ClipboardEvent`, reads `clipboardData.files`, and inserts
+    // an ImageNode through `INSERT_IMAGE_COMMAND`. The interesting bit
+    // here is that the paste event is dispatched at a node inside an
+    // open shadow root and still reaches Lexical's listener.
+    await page.evaluate(() => {
+      const ce = window.__findShadowEditor(document);
+      // 1x1 transparent PNG.
+      const bytes = Uint8Array.from(
+        atob(
+          'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+        ),
+        c => c.charCodeAt(0),
+      );
+      const file = new File([bytes], 'tiny.png', {type: 'image/png'});
+      const dt = new DataTransfer();
+      dt.items.add(file);
+      const event = new ClipboardEvent('paste', {
+        bubbles: true,
+        clipboardData: dt,
+        composed: true,
+      });
+      if ((event.clipboardData.files?.length ?? 0) === 0) {
+        // Firefox keeps the DataTransfer reference attached to a synthetic
+        // ClipboardEvent, but `getData()` returns an empty string and `files`
+        // is empty — its security policy refuses to expose script-set payloads
+        // back to listeners.
+        Object.defineProperty(event, 'clipboardData', {get: () => dt});
+      }
+      ce.dispatchEvent(event);
+    });
+    await expect(page.locator('.editor-image img').first()).toBeVisible();
+  });
+
+  test('clicking an image inside the shadow root selects the ImageNode', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await insertSampleImage(page);
+    const img = page.locator('.editor-image img').first();
+    await img.click();
+    // Lexical's image plugin upgrades the selection to a NodeSelection
+    // (registered as a click listener on the rootElement, which lives
+    // inside the shadow root). The plugin reflects the selected state by
+    // toggling a `focused` class on the underlying <img>.
+    await expect(img).toHaveClass(/focused/);
+  });
+
+  test('blur and re-focus on the shadow-internal editor exercise the focus path', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await page.keyboard.type('before');
+    // Drive the rootElement's blur path. Lexical registers focus / blur
+    // listeners directly on the rootElement, which lives inside the
+    // shadow root, so the listeners fire even though the document-level
+    // `activeElement` is reported as the shadow host.
+    await page.evaluate(() => {
+      window.lexicalEditor.getRootElement().blur();
+    });
+    await focusEditor(page);
+    // WebKit doesn't restore the caret to the end of the editor when
+    // focus comes back through the shadow host the way Chromium and
+    // Firefox do — type a marker, then assert on the full text rather
+    // than relying on order. The focus listeners still fire either way,
+    // which is the actual thing this test exercises.
+    await page.keyboard.type(' after');
+    const text = await page
+      .locator('div[contenteditable="true"]')
+      .first()
+      .textContent();
+    expect(text).toContain('before');
+    expect(text).toContain(' after');
+  });
+
+  test('survives a Korean IME composition cycle inside the shadow root', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await page.keyboard.type('start ');
+    // Walk a Korean composition cycle (jamo → syllable) at the
+    // shadow-internal contentEditable. Lexical registers its composition
+    // listeners on the rootElement (inside the shadow root), so this
+    // exercises them across the boundary. The platform IME normally
+    // commits the composed text through DOM mutations the headless
+    // browser can't simulate, but the editor must stay alive and accept
+    // input after the cycle ends.
+    await page.evaluate(() => {
+      const ce = window.__findShadowEditor(document);
+      const fire = (type, data) =>
+        ce.dispatchEvent(
+          new CompositionEvent(type, {bubbles: true, composed: true, data}),
+        );
+      fire('compositionstart', '');
+      fire('compositionupdate', 'ㄱ');
+      fire('compositionupdate', '가');
+      fire('compositionupdate', '한');
+      fire('compositionend', '한');
+    });
+    await page.keyboard.type(' end');
+    const text = await page
+      .locator('div[contenteditable="true"]')
+      .first()
+      .textContent();
+    expect(text).toContain('start');
+    expect(text).toContain('end');
+  });
+
+  test('survives a Chinese pinyin IME composition cycle inside the shadow root', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await page.keyboard.type('start ');
+    // Same shape as the Korean cycle above, but with the pinyin → hanzi
+    // progression a Chinese IME typically drives. The platform IME
+    // commits the final hanzi through DOM mutations the headless
+    // browser can't simulate; the editor must stay alive and keep
+    // accepting input.
+    await page.evaluate(() => {
+      const ce = window.__findShadowEditor(document);
+      const fire = (type, data) =>
+        ce.dispatchEvent(
+          new CompositionEvent(type, {bubbles: true, composed: true, data}),
+        );
+      fire('compositionstart', '');
+      fire('compositionupdate', 'ni');
+      fire('compositionupdate', 'ni h');
+      fire('compositionupdate', 'ni hao');
+      fire('compositionend', '你好');
+    });
+    await page.keyboard.type(' end');
+    const text = await page
+      .locator('div[contenteditable="true"]')
+      .first()
+      .textContent();
+    expect(text).toContain('start');
+    expect(text).toContain('end');
+  });
+
+  test('copy and paste round-trips text inside the shadow root', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    // Wait until the editor's data-lexical-editor mount finishes so the
+    // typed characters land on the shadow-internal contentEditable rather
+    // than racing against the initial mount on CI.
+    await page
+      .locator('div[contenteditable="true"][data-lexical-editor="true"]')
+      .waitFor();
+    await page.keyboard.type('hi');
+    // Wait until the typed text is reflected in the editor state and the
+    // selection collapsed at the end of "hi". CI's faster timing races
+    // selectAll/copy against the typing reconcile; local headless absorbs
+    // it.
+    await page
+      .locator('div[contenteditable="true"][data-lexical-editor="true"]')
+      .getByText('hi')
+      .waitFor();
+    await selectAll(page);
+    // The copy guard in @lexical/clipboard reads selection through
+    // getDOMSelectionPoints; without it the shadow host makes
+    // isSelectionWithinEditor return false and the copy is dropped.
+    const clipboard = await copyToClipboard(page);
+    // Collapse the caret to the end of "hi" via window.getSelection so
+    // paste inserts at the cursor rather than replacing the selectAll
+    // range. moveToEditorEnd's Ctrl/Cmd+End keystroke never reaches the
+    // shadow-internal editor on CI (document.activeElement reverts to
+    // the shadow host), and WebKit ignores `addRange` with a start
+    // container inside an open shadow tree — setBaseAndExtent works
+    // across all engines (same approach as selectInnerText in the
+    // browser-unit suite).
+    await page.evaluate(() => {
+      const editor = window.__findShadowEditor(document);
+      const lastText = editor?.querySelector('[data-lexical-text="true"]');
+      const textNode = lastText?.firstChild;
+      if (textNode && textNode.nodeType === 3) {
+        const end = textNode.textContent.length;
+        const sel = window.getSelection();
+        sel.setBaseAndExtent(textNode, end, textNode, end);
+      }
+    });
+    await pasteFromClipboard(page, clipboard);
+    await assertHTML(
+      page,
+      html`
+        <p><span data-lexical-text="true">hihi</span></p>
+      `,
+      undefined,
+      IGNORE,
+    );
+  });
+
+  test('markdown shortcuts and a list run inside the shadow root', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    // `# heading` converts to <h1>, then a list shortcut starts a
+    // bulleted list — both flows live in `@lexical/markdown` /
+    // `@lexical/list` and depend on the shadow-aware text-mutation reads.
+    await page.keyboard.type('# Heading');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('- item one');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('item two');
+    await assertHTML(
+      page,
+      html`
+        <h1><span data-lexical-text="true">Heading</span></h1>
+        <ul>
+          <li value="1"><span data-lexical-text="true">item one</span></li>
+          <li value="2"><span data-lexical-text="true">item two</span></li>
+        </ul>
+      `,
+      undefined,
+      IGNORE,
+    );
+  });
+
+  test('undo / redo round-trip from the lexical-history plugin works inside the shadow root', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await page.keyboard.type('first');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('second');
+    // Lexical-history's undo/redo run through the editor's command queue,
+    // not through DOM-level undo, and the playground's keyboard shortcut
+    // dispatches them through the rootElement that lives inside the shadow
+    // root.
+    await page.keyboard.press('ControlOrMeta+z');
+    await page.keyboard.press('ControlOrMeta+z');
+    const text = await page
+      .locator('div[contenteditable="true"]')
+      .first()
+      .textContent();
+    expect(text).not.toContain('second');
+    await page.keyboard.press('ControlOrMeta+Shift+z');
+    const redoneText = await page
+      .locator('div[contenteditable="true"]')
+      .first()
+      .textContent();
+    expect(redoneText).toContain('first');
+  });
+
+  test('the playground tree-view mirrors the shadow-mounted editor state', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await page.keyboard.type('tree view content');
+    // The tree-view-output sits in the light DOM but reads the
+    // EditorState that lives behind the shadow boundary; it should
+    // surface the same text we just typed.
+    const treeOutput = await page
+      .locator('.tree-view-output pre')
+      .first()
+      .textContent();
+    expect(treeOutput).toContain('tree view content');
+  });
+
+  test('file drop into the shadow editor inserts an ImageNode', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    // Synthesize an OS-style file drag and drop: a `DataTransfer`
+    // carrying an `image/png` file, then `dragenter` / `dragover` /
+    // `drop` dispatched at the shadow-internal contentEditable.
+    await page.evaluate(() => {
+      const ce = window.__findShadowEditor(document);
+      const rect = ce.getBoundingClientRect();
+      const clientX = Math.round(rect.left + rect.width / 2);
+      const clientY = Math.round(rect.top + rect.height / 2);
+      const bytes = Uint8Array.from(
+        atob(
+          'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+        ),
+        c => c.charCodeAt(0),
+      );
+      const file = new File([bytes], 'dropped.png', {type: 'image/png'});
+      const dt = new DataTransfer();
+      dt.items.add(file);
+      for (const type of ['dragenter', 'dragover', 'drop']) {
+        ce.dispatchEvent(
+          new DragEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            clientX,
+            clientY,
+            composed: true,
+            dataTransfer: dt,
+          }),
+        );
+      }
+    });
+    await expect(page.locator('.editor-image img').first()).toBeVisible();
+  });
+
+  test('typing 1000 characters inside the shadow root completes without hanging', async ({
+    page,
+  }) => {
+    // A coarse perf smoke test: a large keyboard input run shouldn't
+    // hang or trip the test timeout. This protects against accidental
+    // reconciler regressions specific to the shadow code path (each
+    // keystroke runs the full update + composed-selection read).
+    await focusEditor(page);
+    const t0 = Date.now();
+    await page.keyboard.type('a'.repeat(1000), {delay: 0});
+    const elapsed = Date.now() - t0;
+    // 30s is loose enough for CI Firefox (which has hit ~12s on
+    // shared runners) but tight enough to still flag a real regression
+    // — locally this run is around 1–2s.
+    expect(elapsed).toBeLessThan(30_000);
+    const text = await page
+      .locator('div[contenteditable="true"]')
+      .first()
+      .textContent();
+    expect((text ?? '').length).toBeGreaterThanOrEqual(1000);
+  });
+
+  test('populates shadowRoot.adoptedStyleSheets with document stylesheets', async ({
+    page,
+  }) => {
+    await expect(page.locator('[data-test-id="shadow-dom-host"]')).toHaveCount(
+      1,
+    );
+    const probe = await page.evaluate(() => {
+      const host = document.querySelector('[data-test-id="shadow-dom-host"]');
+      if (host === null || host.shadowRoot === null) {
+        return null;
+      }
+      const sheets = Array.from(host.shadowRoot.adoptedStyleSheets);
+      const lightSheetCount = Array.from(document.styleSheets).filter(s => {
+        try {
+          return s.cssRules.length > 0;
+        } catch {
+          return false;
+        }
+      }).length;
+      const hasContentEditableRule = sheets.some(sheet =>
+        Array.from(sheet.cssRules).some(rule =>
+          rule.cssText.includes('.ContentEditable__root'),
+        ),
+      );
+      const noImportRules = sheets.every(sheet =>
+        Array.from(sheet.cssRules).every(
+          rule => !/^@import/i.test(rule.cssText),
+        ),
+      );
+      return {
+        adoptedCount: sheets.length,
+        hasContentEditableRule,
+        lightSheetCount,
+        noImportRules,
+      };
+    });
+    expect(probe).not.toBeNull();
+    // Adopted count should match the readable light-DOM sheet count: every
+    // readable sheet (skipping the cross-origin ones we don't have today)
+    // gets adopted, none are dropped on the floor.
+    expect(probe.adoptedCount).toBe(probe.lightSheetCount);
+    // The editor's own stylesheet must reach the shadow tree — a regression
+    // that adopts the wrong sheets (or none) would silently pass the
+    // count-only check.
+    expect(probe.hasContentEditableRule).toBe(true);
+    // @import rules are stripped before replaceSync so Chrome's "not allowed
+    // here" warning never fires.
+    expect(probe.noImportRules).toBe(true);
+  });
+
+  test('characterData update on a <style> refreshes adoptedStyleSheets', async ({
+    page,
+  }) => {
+    await expect(page.locator('[data-test-id="shadow-dom-host"]')).toHaveCount(
+      1,
+    );
+
+    const initial = await page.evaluate(async () => {
+      const marker = document.createElement('style');
+      marker.id = 'f10-test-style';
+      marker.textContent = '.f10-probe { color: rgb(1, 2, 3); }';
+      document.head.appendChild(marker);
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      const host = document.querySelector('[data-test-id="shadow-dom-host"]');
+      const sheets =
+        host && host.shadowRoot
+          ? Array.from(host.shadowRoot.adoptedStyleSheets)
+          : [];
+      return sheets.some(sheet =>
+        Array.from(sheet.cssRules).some(r =>
+          r.cssText.includes('color: rgb(1, 2, 3)'),
+        ),
+      );
+    });
+    expect(initial).toBe(true);
+
+    const updated = await page.evaluate(async () => {
+      const marker = document.getElementById('f10-test-style');
+      if (marker === null) {
+        return false;
+      }
+      // Mimic Vite HMR's in-place CSS text replace: mutate the existing
+      // Text child's data so a characterData mutation fires (assigning
+      // textContent would replace the child node and only fire childList).
+      if (marker.firstChild instanceof Text) {
+        marker.firstChild.data = '.f10-probe { color: rgb(9, 9, 9); }';
+      } else {
+        marker.textContent = '.f10-probe { color: rgb(9, 9, 9); }';
+      }
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      const host = document.querySelector('[data-test-id="shadow-dom-host"]');
+      const sheets =
+        host && host.shadowRoot
+          ? Array.from(host.shadowRoot.adoptedStyleSheets)
+          : [];
+      return sheets.some(sheet =>
+        Array.from(sheet.cssRules).some(r =>
+          r.cssText.includes('color: rgb(9, 9, 9)'),
+        ),
+      );
+    });
+    expect(updated).toBe(true);
+
+    await page.evaluate(() => {
+      document.getElementById('f10-test-style')?.remove();
+    });
+  });
+});
+
+test.describe('Shadow DOM (collab)', () => {
+  test.beforeEach(({isCollab, isPlainText, page}) => {
+    // The split view's two clients both render through ShadowDomWrapper
+    // when the playground's shadow toggle is on. Rich-text-only mirrors
+    // the non-collab block above; this describe only runs when the suite
+    // is invoked in a collab mode.
+    test.skip(isPlainText || !isCollab);
+    return initialize({isCollab, isShadowDOM: true, page});
+  });
+
+  test('text typed on one client converges on the other inside shadow roots', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await page.keyboard.type('shadow collab');
+    // yjs sync is asynchronous; assert on the right frame's
+    // contentEditable text. Both clients render inside their own open
+    // shadow root, and Lexical's collab plugin uses the same composed
+    // selection reads that drive the non-collab path.
+    const rightEditable = page
+      .frameLocator('[name="right"]')
+      .locator('div[contenteditable="true"][data-lexical-editor="true"]')
+      .first();
+    await expect(rightEditable).toContainText('shadow collab');
+  });
+});
diff --git a/packages/lexical-playground/__tests__/utils/index.mjs b/packages/lexical-playground/__tests__/utils/index.mjs
index 3ba8ba4bdf8..738bcd36682 100644
--- a/packages/lexical-playground/__tests__/utils/index.mjs
+++ b/packages/lexical-playground/__tests__/utils/index.mjs
@@ -98,6 +98,7 @@ export async function initialize({
   tableHorizontalScroll,
   shouldAllowHighlightingWithBrackets,
   selectionAlwaysOnDisplay,
+  isShadowDOM,
 }) {
   const appSettings = {};
   appSettings.isRichText = IS_RICH_TEXT;
@@ -141,6 +142,8 @@ export async function initialize({
   // leaks into an e2e run.
   appSettings.selectBlock = !!selectBlock;
 
+  appSettings.isShadowDOM = !!isShadowDOM;
+
   const urlParams = appSettingsToURLParams(appSettings);
   const url = `http://localhost:${E2E_PORT}/${
     isCollab ? 'split/' : ''
@@ -154,6 +157,31 @@ export async function initialize({
   // shard for hours.
   const pageError = rejectOnPageError(page);
 
+  if (isShadowDOM) {
+    // Walk open shadow roots to find the editor's contentEditable. Used by
+    // shadow DOM specs that synthesize events at a node inside the shadow
+    // tree; document.querySelector does not pierce shadow boundaries.
+    await page.addInitScript(() => {
+      window.__findShadowEditor = function findEditor(root) {
+        const direct = root.querySelector(
+          'div[contenteditable="true"][data-lexical-editor="true"]',
+        );
+        if (direct !== null) {
+          return direct;
+        }
+        for (const el of root.querySelectorAll('*')) {
+          if (el.shadowRoot !== null) {
+            const inner = findEditor(el.shadowRoot);
+            if (inner !== null) {
+              return inner;
+            }
+          }
+        }
+        return null;
+      };
+    });
+  }
+
   await page.goto(url);
 
   await exposeLexicalEditor(page, pageError);
@@ -244,9 +272,24 @@ async function exposeLexicalEditor(page, pageError = null) {
     ),
   );
   await leftFrame.evaluate(() => {
-    window.lexicalEditor = document.querySelector(
-      '[data-lexical-editor="true"]',
-    ).__lexicalEditor;
+    // querySelector does not pierce shadow roots, so descend into any open
+    // shadow trees to support the "Render in Shadow DOM" playground setting.
+    const findEditorElement = root => {
+      const found = root.querySelector('[data-lexical-editor="true"]');
+      if (found !== null) {
+        return found;
+      }
+      for (const element of root.querySelectorAll('*')) {
+        if (element.shadowRoot !== null) {
+          const inner = findEditorElement(element.shadowRoot);
+          if (inner !== null) {
+            return inner;
+          }
+        }
+      }
+      return null;
+    };
+    window.lexicalEditor = findEditorElement(document).__lexicalEditor;
   });
 }
 
@@ -597,8 +640,30 @@ export async function keyUpCtrlOrAlt(page) {
 
 async function copyToClipboardPageOrFrame(pageOrFrame) {
   return await pageOrFrame.evaluate(() => {
+    // document.querySelector doesn't pierce shadow roots; descend into any
+    // open shadow trees so this works for the "Render in Shadow DOM"
+    // playground setting too. Match `data-lexical-editor` rather than any
+    // contenteditable so we don't accidentally grab a comment/draft input
+    // that also has contenteditable=true.
+    const findEditor = root => {
+      const direct = root.querySelector(
+        'div[contenteditable="true"][data-lexical-editor="true"]',
+      );
+      if (direct !== null) {
+        return direct;
+      }
+      for (const el of root.querySelectorAll('*')) {
+        if (el.shadowRoot !== null) {
+          const inner = findEditor(el.shadowRoot);
+          if (inner !== null) {
+            return inner;
+          }
+        }
+      }
+      return null;
+    };
     const clipboardData = {};
-    const editor = document.querySelector('div[contenteditable="true"]');
+    const editor = findEditor(document);
     const copyEvent = new ClipboardEvent('copy');
     Object.defineProperty(copyEvent, 'clipboardData', {
       value: {
@@ -626,6 +691,7 @@ async function pasteWithClipboardDataFromPageOrFrame(
     async ({
       clipboardData: _clipboardData,
       canUseBeforeInput: _canUseBeforeInput,
+      editorSelector: _editorSelector,
     }) => {
       const files = [];
       for (const [clipboardKey, clipboardValue] of Object.entries(
@@ -658,10 +724,35 @@ async function pasteWithClipboardDataFromPageOrFrame(
         };
       }
 
+      // document.querySelector doesn't pierce shadow roots; descend into any
+      // open shadow trees so paste works for the "Render in Shadow DOM"
+      // playground setting too. Match `data-lexical-editor` (not just any
+      // contenteditable) so a draft/comment input doesn't shadow the real
+      // editor when activeElement is not contenteditable.
+      const findEditor = root => {
+        const direct = root.querySelector(
+          'div[contenteditable="true"][data-lexical-editor="true"]',
+        );
+        if (direct !== null) {
+          return direct;
+        }
+        for (const el of root.querySelectorAll('*')) {
+          if (el.shadowRoot !== null) {
+            const inner = findEditor(el.shadowRoot);
+            if (inner !== null) {
+              return inner;
+            }
+          }
+        }
+        return null;
+      };
+      const activeElement = document.activeElement;
       const editor =
-        document.activeElement && document.activeElement.isContentEditable
-          ? document.activeElement
-          : document.querySelector(editorSelector);
+        activeElement &&
+        activeElement.isContentEditable &&
+        activeElement.matches(_editorSelector)
+          ? activeElement
+          : findEditor(document);
       const pasteEvent = new ClipboardEvent('paste', {
         bubbles: true,
         cancelable: true,
@@ -686,7 +777,7 @@ async function pasteWithClipboardDataFromPageOrFrame(
         }
       }
     },
-    {canUseBeforeInput, clipboardData},
+    {canUseBeforeInput, clipboardData, editorSelector},
   );
 }
 
diff --git a/packages/lexical-playground/src/App.tsx b/packages/lexical-playground/src/App.tsx
index 7b0f88e0a31..904effbbc38 100644
--- a/packages/lexical-playground/src/App.tsx
+++ b/packages/lexical-playground/src/App.tsx
@@ -33,6 +33,10 @@ import {
 } from '@lexical/list';
 import {PlainTextExtension} from '@lexical/plain-text';
 import {LexicalCollaboration} from '@lexical/react/LexicalCollaborationContext';
+import {
+  CollaborationPlugin,
+  CollaborationPluginV2__EXPERIMENTAL,
+} from '@lexical/react/LexicalCollaborationPlugin';
 import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
 import {
   $createHeadingNode,
@@ -48,8 +52,13 @@ import {
   defineExtension,
 } from 'lexical';
 import {type JSX, useMemo} from 'react';
+import {Doc} from 'yjs';
 
 import {isDevPlayground} from './appSettings';
+import {
+  createWebsocketProvider,
+  createWebsocketProviderWithDoc,
+} from './collaboration';
 import {FlashMessageContext} from './context/FlashMessageContext';
 import {SettingsContext, useSettings} from './context/SettingsContext';
 import {ToolbarContext} from './context/ToolbarContext';
@@ -89,16 +98,24 @@ import {TerseExportExtension} from './plugins/TerseExportExtension';
 import TestRecorderPlugin from './plugins/TestRecorderPlugin';
 import {TwitterExtension} from './plugins/TwitterExtension';
 import TypingPerfPlugin from './plugins/TypingPerfPlugin';
+import {VersionsPlugin} from './plugins/VersionsPlugin';
 import {VisibleNonPrintingExtension} from './plugins/VisibleNonPrintingExtension';
 import {YouTubeExtension} from './plugins/YouTubeExtension';
 import Settings from './Settings';
 import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+import ShadowDomWrapper from './ui/ShadowDomWrapper';
 import {validateUrl} from './utils/url';
 
 console.warn(
   'If you are profiling the playground app, please ensure you turn off the debug view. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.',
 );
 
+const COLLAB_DOC_ID = 'main';
+
+const skipCollaborationInit =
+  // @ts-expect-error
+  window.parent != null && window.parent.frames.right === window;
+
 function $prepopulatedRichText() {
   const root = $getRoot();
   if (root.getFirstChild() === null) {
@@ -314,7 +331,14 @@ function buildExtensionFromSettings(settings: DynamicSettings) {
 
 function App(): JSX.Element {
   const {
-    settings: {isCollab, emptyEditor, isRichText, measureTypingPerf},
+    settings: {
+      isCollab,
+      useCollabV2,
+      emptyEditor,
+      isRichText,
+      isShadowDOM,
+      measureTypingPerf,
+    },
   } = useSettings();
 
   // Only the editor-recreating settings belong in this memo's deps. Table
@@ -335,9 +359,32 @@ function App(): JSX.Element {
               <img src={logo} alt="Lexical Logo" />
             </a>
           </header>
-          <div className="editor-shell">
-            <Editor />
-          </div>
+          {isRichText && isCollab ? (
+            useCollabV2 ? (
+              <CollabV2
+                id={COLLAB_DOC_ID}
+                shouldBootstrap={!skipCollaborationInit}
+              />
+            ) : (
+              <CollaborationPlugin
+                id={COLLAB_DOC_ID}
+                providerFactory={createWebsocketProvider}
+                shouldBootstrap={!skipCollaborationInit}
+                selectionHighlight={true}
+              />
+            )
+          ) : null}
+          {isShadowDOM ? (
+            <ShadowDomWrapper>
+              <div className="editor-shell">
+                <Editor />
+              </div>
+            </ShadowDomWrapper>
+          ) : (
+            <div className="editor-shell">
+              <Editor />
+            </div>
+          )}
           <Settings />
           {isDevPlayground ? <DocsPlugin /> : null}
           {isDevPlayground ? <PasteLogPlugin /> : null}
@@ -350,6 +397,34 @@ function App(): JSX.Element {
   );
 }
 
+function CollabV2({
+  id,
+  shouldBootstrap,
+}: {
+  id: string;
+  shouldBootstrap: boolean;
+}) {
+  // VersionsPlugin needs GC disabled.
+  const doc = useMemo(() => new Doc({gc: false}), []);
+
+  const provider = useMemo(() => {
+    return createWebsocketProviderWithDoc('main', doc);
+  }, [doc]);
+
+  return (
+    <>
+      <CollaborationPluginV2__EXPERIMENTAL
+        id={id}
+        doc={doc}
+        provider={provider}
+        __shouldBootstrapUnsafe={shouldBootstrap}
+        selectionHighlight={true}
+      />
+      <VersionsPlugin id={id} />
+    </>
+  );
+}
+
 export default function PlaygroundApp(): JSX.Element {
   return (
     <SettingsContext>
diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
index 4c1a60cdbf4..74752dbbd57 100644
--- a/packages/lexical-playground/src/Editor.tsx
+++ b/packages/lexical-playground/src/Editor.tsx
@@ -9,20 +9,12 @@
 import type {JSX} from 'react';
 
 import {CharacterLimitPlugin} from '@lexical/react/LexicalCharacterLimitPlugin';
-import {
-  CollaborationPlugin,
-  CollaborationPluginV2__EXPERIMENTAL,
-} from '@lexical/react/LexicalCollaborationPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TabIndentationPlugin} from '@lexical/react/LexicalTabIndentationPlugin';
 import {CAN_USE_DOM} from '@lexical/utils';
-import {useEffect, useMemo, useState} from 'react';
-import {Doc} from 'yjs';
+import {useEffect, useState} from 'react';
 
-import {
-  createWebsocketProvider,
-  createWebsocketProviderWithDoc,
-} from './collaboration';
+import {createWebsocketProvider} from './collaboration';
 import {useSettings} from './context/SettingsContext';
 import {useSynchronizeSettings} from './hooks/useSynchronizeSettings';
 import ActionsPlugin from './plugins/ActionsPlugin';
@@ -47,15 +39,8 @@ import TableOfContentsPlugin from './plugins/TableOfContentsPlugin';
 import TableScrollShadowPlugin from './plugins/TableScrollShadowPlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import TreeViewPlugin from './plugins/TreeViewPlugin';
-import {VersionsPlugin} from './plugins/VersionsPlugin';
 import ContentEditable from './ui/ContentEditable';
 
-const COLLAB_DOC_ID = 'main';
-
-const skipCollaborationInit =
-  // @ts-expect-error
-  window.parent != null && window.parent.frames.right === window;
-
 export default function Editor(): JSX.Element {
   const {
     settings: {
@@ -143,24 +128,6 @@ export default function Editor(): JSX.Element {
         )}
         {isRichText ? (
           <>
-            {isCollab ? (
-              useCollabV2 ? (
-                <>
-                  <CollabV2
-                    id={COLLAB_DOC_ID}
-                    shouldBootstrap={!skipCollaborationInit}
-                  />
-                  <VersionsPlugin id={COLLAB_DOC_ID} />
-                </>
-              ) : (
-                <CollaborationPlugin
-                  id={COLLAB_DOC_ID}
-                  providerFactory={createWebsocketProvider}
-                  shouldBootstrap={!skipCollaborationInit}
-                  selectionHighlight={true}
-                />
-              )
-            ) : null}
             <div className="editor-scroller">
               <div className="editor" ref={onRef}>
                 <ContentEditable placeholder={placeholder} />
@@ -216,28 +183,3 @@ export default function Editor(): JSX.Element {
     </>
   );
 }
-
-function CollabV2({
-  id,
-  shouldBootstrap,
-}: {
-  id: string;
-  shouldBootstrap: boolean;
-}) {
-  // VersionsPlugin needs GC disabled.
-  const doc = useMemo(() => new Doc({gc: false}), []);
-
-  const provider = useMemo(() => {
-    return createWebsocketProviderWithDoc('main', doc);
-  }, [doc]);
-
-  return (
-    <CollaborationPluginV2__EXPERIMENTAL
-      id={id}
-      doc={doc}
-      provider={provider}
-      __shouldBootstrapUnsafe={shouldBootstrap}
-      selectionHighlight={true}
-    />
-  );
-}
diff --git a/packages/lexical-playground/src/Settings.tsx b/packages/lexical-playground/src/Settings.tsx
index 7f7ca252176..138694c58a7 100644
--- a/packages/lexical-playground/src/Settings.tsx
+++ b/packages/lexical-playground/src/Settings.tsx
@@ -40,6 +40,7 @@ export default function Settings(): JSX.Element {
       selectBlock,
       isCodeHighlighted,
       isCodeShiki,
+      isShadowDOM,
     },
   } = useSettings();
   const [showSettings, setShowSettings] = useState(false);
@@ -224,6 +225,14 @@ export default function Settings(): JSX.Element {
             checked={isCodeShiki}
             text="Use Shiki for Code Highlighting"
           />
+
+          <Switch
+            onClick={() => {
+              setOption('isShadowDOM', !isShadowDOM);
+            }}
+            checked={isShadowDOM}
+            text="Render in Shadow DOM"
+          />
         </div>
       ) : null}
     </>
diff --git a/packages/lexical-playground/src/appSettings.ts b/packages/lexical-playground/src/appSettings.ts
index 3f2a77bedd4..57d8828f810 100644
--- a/packages/lexical-playground/src/appSettings.ts
+++ b/packages/lexical-playground/src/appSettings.ts
@@ -24,6 +24,7 @@ export const DEFAULT_SETTINGS = {
   isCollab: false,
   isMaxLength: false,
   isRichText: true,
+  isShadowDOM: false,
   isVisibleNonPrinting: false,
   listStrictIndent: false,
   measureTypingPerf: false,
diff --git a/packages/lexical-playground/src/nodes/EquationComponent.tsx b/packages/lexical-playground/src/nodes/EquationComponent.tsx
index ac5074dfe8e..74a45d3d3c1 100644
--- a/packages/lexical-playground/src/nodes/EquationComponent.tsx
+++ b/packages/lexical-playground/src/nodes/EquationComponent.tsx
@@ -23,6 +23,7 @@ import {
   CLICK_COMMAND,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
+  getActiveElement,
   KEY_ENTER_COMMAND,
   KEY_ESCAPE_COMMAND,
   mergeRegister,
@@ -234,8 +235,12 @@ export default function EquationComponent({
         editor.registerCommand(
           SELECTION_CHANGE_COMMAND,
           payload => {
-            const activeElement = document.activeElement;
             const inputElem = inputRef.current;
+            // getActiveElement rather than document.activeElement, which
+            // reports the shadow host when the editor is in a shadow root.
+            const activeElement = inputElem
+              ? getActiveElement(inputElem)
+              : null;
             if (inputElem !== activeElement) {
               onHide();
             }
@@ -246,8 +251,10 @@ export default function EquationComponent({
         editor.registerCommand(
           KEY_ESCAPE_COMMAND,
           payload => {
-            const activeElement = document.activeElement;
             const inputElem = inputRef.current;
+            const activeElement = inputElem
+              ? getActiveElement(inputElem)
+              : null;
             if (inputElem === activeElement) {
               onHide(true);
               return true;
diff --git a/packages/lexical-playground/src/nodes/ImageComponent.tsx b/packages/lexical-playground/src/nodes/ImageComponent.tsx
index 0637386c1ff..6224b047aaf 100644
--- a/packages/lexical-playground/src/nodes/ImageComponent.tsx
+++ b/packages/lexical-playground/src/nodes/ImageComponent.tsx
@@ -35,6 +35,7 @@ import {
   COMMAND_PRIORITY_LOW,
   createCommand,
   DRAGSTART_COMMAND,
+  getActiveElement,
   KEY_ENTER_COMMAND,
   KEY_ESCAPE_COMMAND,
   mergeRegister,
@@ -292,7 +293,9 @@ export default function ImageComponent({
           return true;
         } else if (
           buttonElem !== null &&
-          buttonElem !== document.activeElement
+          // getActiveElement rather than document.activeElement, which reports
+          // the shadow host when the editor is in a shadow root.
+          buttonElem !== getActiveElement(buttonElem)
         ) {
           event.preventDefault();
           buttonElem.focus();
diff --git a/packages/lexical-playground/src/nodes/hostChromeSelection.ts b/packages/lexical-playground/src/nodes/hostChromeSelection.ts
index b6b98770134..e789e8b516a 100644
--- a/packages/lexical-playground/src/nodes/hostChromeSelection.ts
+++ b/packages/lexical-playground/src/nodes/hostChromeSelection.ts
@@ -14,6 +14,7 @@ import {
   $setSelection,
   CLICK_COMMAND,
   COMMAND_PRIORITY_BEFORE_EDITOR,
+  getActiveElement,
   getDOMSelection,
   isHTMLElement,
   mergeRegister,
@@ -78,7 +79,7 @@ export function registerHostChromeSelection<T extends LexicalNode>(
     if (editor.read(() => $resolveChromeTarget(target) !== null)) {
       event.preventDefault();
       const root = editor.getRootElement();
-      if (root !== null && root !== document.activeElement) {
+      if (root !== null && root !== getActiveElement(root)) {
         root.focus({preventScroll: true});
         const domSelection = getDOMSelection(root.ownerDocument.defaultView);
         if (domSelection !== null) {
diff --git a/packages/lexical-playground/src/plugins/AutocompleteExtension/index.tsx b/packages/lexical-playground/src/plugins/AutocompleteExtension/index.tsx
index dac70b71c89..c65938e1cf3 100644
--- a/packages/lexical-playground/src/plugins/AutocompleteExtension/index.tsx
+++ b/packages/lexical-playground/src/plugins/AutocompleteExtension/index.tsx
@@ -28,6 +28,7 @@ import {
   COMPOSITION_START_COMMAND,
   defineExtension,
   type EditorState,
+  getActiveElement,
   isHTMLElement,
   KEY_ARROW_RIGHT_COMMAND,
   KEY_TAB_COMMAND,
@@ -397,7 +398,10 @@ export const AutocompleteExtension = /* @__PURE__ */ defineExtension({
     // extension registration.
     function isEditorFocused(): boolean {
       const rootElem = editor.getRootElement();
-      const active = rootElem && rootElem.ownerDocument.activeElement;
+      // getActiveElement rather than ownerDocument.activeElement, which reports
+      // the shadow host (not contained in rootElem) when the editor is in a
+      // shadow root.
+      const active = rootElem ? getActiveElement(rootElem) : null;
       return rootElem != null && active != null && rootElem.contains(active);
     }
 
diff --git a/packages/lexical-playground/src/plugins/CodeActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/CodeActionMenuPlugin/index.tsx
index 45c824a5884..d5b597a611b 100644
--- a/packages/lexical-playground/src/plugins/CodeActionMenuPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/CodeActionMenuPlugin/index.tsx
@@ -17,7 +17,11 @@ import {
   normalizeCodeLanguage,
 } from '@lexical/code-prism';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$getNearestNodeFromDOMNode, isHTMLElement} from 'lexical';
+import {
+  $getNearestNodeFromDOMNode,
+  getComposedEventTarget,
+  isHTMLElement,
+} from 'lexical';
 import * as React from 'react';
 import {useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
@@ -171,7 +175,7 @@ function getMouseInfo(event: MouseEvent): {
   codeDOMNode: HTMLElement | null;
   isOutside: boolean;
 } {
-  const target = event.target;
+  const target = getComposedEventTarget(event);
 
   if (isHTMLElement(target)) {
     const codeDOMNode = target.closest<HTMLElement>(
diff --git a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx b/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx
index 7253fb9a89c..bbe2833b457 100644
--- a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx
@@ -50,7 +50,9 @@ import {
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_NORMAL,
   createCommand,
+  getActiveElementDeep,
   getDOMSelection,
+  getRootOwnerDocument,
   KEY_ESCAPE_COMMAND,
   mergeRegister,
 } from 'lexical';
@@ -581,7 +583,12 @@ function CommentsPanelList({
               markNodeKeys !== undefined &&
               (activeIDs === null || activeIDs.indexOf(id) === -1)
             ) {
-              const activeElement = document.activeElement;
+              // getActiveElementDeep rather than document.activeElement so the
+              // focused element is resolved through any shadow roots when
+              // restoring focus after the selection moves below.
+              const activeElement = getActiveElementDeep(
+                getRootOwnerDocument(editor.getRootElement()),
+              );
               // Move selection to the start of the mark, so that we
               // update the UI with the selected thread.
               editor.update(
diff --git a/packages/lexical-playground/src/plugins/DraggableBlockPlugin/index.tsx b/packages/lexical-playground/src/plugins/DraggableBlockPlugin/index.tsx
index 9f4383c1524..856c5bf4af1 100644
--- a/packages/lexical-playground/src/plugins/DraggableBlockPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/DraggableBlockPlugin/index.tsx
@@ -19,6 +19,7 @@ import {
   $getNodeByKey,
   $isParagraphNode,
   $isTextNode,
+  getComposedEventTarget,
 } from 'lexical';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import * as ReactDOM from 'react-dom';
@@ -104,7 +105,7 @@ export default function DraggableBlockPlugin({
       return;
     }
     const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node | null;
+      const target = getComposedEventTarget(event) as Node | null;
       if (
         (pickerRef.current && pickerRef.current.contains(target)) ||
         (menuRef.current && menuRef.current.contains(target))
diff --git a/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx
index 4fa6a509aba..749b0e7813f 100644
--- a/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx
@@ -37,7 +37,12 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
+  getActiveElementDeep,
   getDOMSelection,
+  getDOMSelectionPoints,
+  getDOMSelectionRangeAndPoints,
+  getParentElement,
+  getRootOwnerDocument,
   KEY_ESCAPE_COMMAND,
   LexicalEditor,
   mergeRegister,
@@ -107,7 +112,7 @@ function FloatingLinkEditor({
     null,
   );
 
-  const scrollerElem = anchorElem.parentElement;
+  const scrollerElem = getParentElement(anchorElem);
 
   const {refs, floatingStyles} = useFloating({
     middleware: [
@@ -161,9 +166,13 @@ function FloatingLinkEditor({
     }
 
     const nativeSelection = getDOMSelection(editor._window);
-    const activeElement = document.activeElement;
 
     const rootElement = editor.getRootElement();
+    // getActiveElementDeep rather than document.activeElement, which reports
+    // the shadow host when the editor (or the link input) is in a shadow root.
+    const activeElement = getActiveElementDeep(
+      getRootOwnerDocument(rootElement),
+    );
 
     if (selection !== null && rootElement !== null && editor.isEditable()) {
       let referenceElement: Element | null = null;
@@ -177,7 +186,9 @@ function FloatingLinkEditor({
         $isRangeSelection(selection) &&
         nativeSelection !== null &&
         nativeSelection.rangeCount > 0 &&
-        rootElement.contains(nativeSelection.anchorNode)
+        rootElement.contains(
+          getDOMSelectionPoints(nativeSelection, rootElement).anchorNode,
+        )
       ) {
         const linkNode = $getSelectedLinkNode(selection);
         if (linkNode) {
@@ -201,12 +212,17 @@ function FloatingLinkEditor({
           getBoundingClientRect: () => refEl.getBoundingClientRect(),
           getClientRects: () => refEl.getClientRects(),
         });
-      } else if (
-        nativeSelection !== null &&
-        nativeSelection.rangeCount > 0 &&
-        rootElement.contains(nativeSelection.anchorNode)
-      ) {
-        refs.setPositionReference(nativeSelection.getRangeAt(0));
+      } else if (nativeSelection !== null && nativeSelection.rangeCount > 0) {
+        const {points, range: selectionRange} = getDOMSelectionRangeAndPoints(
+          nativeSelection,
+          rootElement,
+        );
+        if (
+          rootElement.contains(points.anchorNode) &&
+          selectionRange !== null
+        ) {
+          refs.setPositionReference(selectionRange);
+        }
       }
       setLastSelection(selection);
     } else if (!activeElement || activeElement.className !== 'link-input') {
diff --git a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
index f07d716512f..17397049d4a 100644
--- a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -22,6 +22,10 @@ import {
   COMMAND_PRIORITY_LOW,
   FORMAT_TEXT_COMMAND,
   getDOMSelection,
+  getDOMSelectionPoints,
+  getParentElement,
+  isDOMDocumentNode,
+  isDOMShadowRoot,
   LexicalEditor,
   mergeRegister,
   SELECTION_CHANGE_COMMAND,
@@ -93,7 +97,13 @@ function TextFormatFloatingToolbar({
       if (popupCharStylesEditorRef.current.style.pointerEvents !== 'none') {
         const x = e.clientX;
         const y = e.clientY;
-        const elementUnderMouse = document.elementFromPoint(x, y);
+        // Guard the root narrowing so a detached popup (its getRootNode
+        // returns the popup itself) doesn't throw on elementFromPoint.
+        const popupRoot = popupCharStylesEditorRef.current.getRootNode();
+        const elementUnderMouse =
+          isDOMDocumentNode(popupRoot) || isDOMShadowRoot(popupRoot)
+            ? popupRoot.elementFromPoint(x, y)
+            : null;
 
         if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
           // Mouse is not over the target element => not a normal click, but probably a drag
@@ -133,12 +143,24 @@ function TextFormatFloatingToolbar({
     }
 
     const rootElement = editor.getRootElement();
+    const points =
+      nativeSelection !== null
+        ? getDOMSelectionPoints(nativeSelection, rootElement)
+        : null;
+    // Shadow-aware collapsed check: Selection.isCollapsed retargets to the
+    // shadow host (anchor === focus === host), so it falsely reports `true`
+    // even when the composed range spans real characters.
+    const pointsCollapsed =
+      points === null ||
+      (points.anchorNode === points.focusNode &&
+        points.anchorOffset === points.focusOffset);
     if (
       selection !== null &&
       nativeSelection !== null &&
-      !nativeSelection.isCollapsed &&
+      points !== null &&
+      !pointsCollapsed &&
       rootElement !== null &&
-      rootElement.contains(nativeSelection.anchorNode)
+      rootElement.contains(points.anchorNode)
     ) {
       const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
 
@@ -152,7 +174,7 @@ function TextFormatFloatingToolbar({
   }, [editor, anchorElem, isLink]);
 
   useEffect(() => {
-    const scrollerElem = anchorElem.parentElement;
+    const scrollerElem = getParentElement(anchorElem);
 
     const update = () => {
       editor.read('latest', () => {
@@ -353,7 +375,9 @@ function useFloatingTextFormatToolbar(
         nativeSelection !== null &&
         (!$isRangeSelection(selection) ||
           rootElement === null ||
-          !rootElement.contains(nativeSelection.anchorNode))
+          !rootElement.contains(
+            getDOMSelectionPoints(nativeSelection, rootElement).anchorNode,
+          ))
       ) {
         setIsText(false);
         return;
diff --git a/packages/lexical-playground/src/plugins/ImagesExtension/index.tsx b/packages/lexical-playground/src/plugins/ImagesExtension/index.tsx
index 1d7ebd94f01..e16e57b6eb0 100644
--- a/packages/lexical-playground/src/plugins/ImagesExtension/index.tsx
+++ b/packages/lexical-playground/src/plugins/ImagesExtension/index.tsx
@@ -8,6 +8,7 @@
 
 import type {JSX} from 'react';
 
+import {caretFromPoint} from '@lexical/clipboard';
 import {
   $generateNodesFromDOM,
   defineImportRule,
@@ -399,7 +400,7 @@ function $onDrop(event: DragEvent, editor: LexicalEditor): boolean {
   );
   event.preventDefault();
   if (canDropImage(event)) {
-    const range = getDragSelection(event);
+    const range = getDragSelection(event, editor.getRootElement());
     node.remove();
     const rangeSelection = $createRangeSelection();
     if (range !== null && range !== undefined) {
@@ -454,17 +455,26 @@ function canDropImage(event: DragEvent): boolean {
   );
 }
 
-function getDragSelection(event: DragEvent): Range | null | undefined {
-  let range;
+function getDragSelection(
+  event: DragEvent,
+  rootElement: HTMLElement | null,
+): Range | null | undefined {
   const domSelection = getDOMSelectionFromTarget(event.target);
-  if (document.caretRangeFromPoint) {
-    range = document.caretRangeFromPoint(event.clientX, event.clientY);
+  // Pass rootElement so caretFromPoint uses caretPositionFromPoint's
+  // shadowRoots option rather than the retargeted caretRangeFromPoint.
+  const caret = caretFromPoint(event.clientX, event.clientY, rootElement);
+  if (caret !== null) {
+    const range = (caret.node.ownerDocument ?? document).createRange();
+    range.setStart(caret.node, caret.offset);
+    range.collapse(true);
+    return range;
   } else if (event.rangeParent && domSelection !== null) {
     domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
-    range = domSelection.getRangeAt(0);
-  } else {
-    throw Error(`Cannot get the selection when dragging`);
+    return domSelection.getRangeAt(0);
   }
-
-  return range;
+  // The pre-shadow code returned the caretRangeFromPoint result directly,
+  // which could be null when the cursor was over a gap with no text node.
+  // The caller ($onDrop above) is written to accept null/undefined here,
+  // so preserve the original silent fall-through rather than throwing.
+  return null;
 }
diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
index 8dbf4424f92..060009b75e1 100644
--- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
@@ -40,7 +40,10 @@ import {
   $isTextNode,
   $setSelection,
   COMMAND_PRIORITY_CRITICAL,
+  getActiveElementDeep,
   getDOMSelection,
+  getDOMSelectionPoints,
+  getRootOwnerDocument,
   isDOMNode,
   mergeRegister,
   SELECTION_CHANGE_COMMAND,
@@ -734,7 +737,12 @@ function TableCellActionMenuContainer({
     const menu = menuButtonRef.current;
     const selection = $getSelection();
     const nativeSelection = getDOMSelection(editor._window);
-    const activeElement = document.activeElement;
+    // getActiveElementDeep rather than document.activeElement, which reports
+    // the shadow host (not the focused element) when the editor is in a
+    // shadow root.
+    const activeElement = getActiveElementDeep(
+      getRootOwnerDocument(editor.getRootElement()),
+    );
     function disable() {
       if (menu) {
         menu.classList.remove('table-cell-action-button-container--active');
@@ -755,7 +763,9 @@ function TableCellActionMenuContainer({
       $isRangeSelection(selection) &&
       rootElement !== null &&
       nativeSelection !== null &&
-      rootElement.contains(nativeSelection.anchorNode)
+      rootElement.contains(
+        getDOMSelectionPoints(nativeSelection, rootElement).anchorNode,
+      )
     ) {
       const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(
         selection.anchor.getNode(),
diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsV2Plugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsV2Plugin/index.tsx
index 3be8907545a..e4d80cd742f 100644
--- a/packages/lexical-playground/src/plugins/TableHoverActionsV2Plugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableHoverActionsV2Plugin/index.tsx
@@ -39,6 +39,8 @@ import {
   $getNearestNodeFromDOMNode,
   $getSiblingCaret,
   type EditorThemeClasses,
+  getComposedEventTarget,
+  isDOMNode,
   isHTMLElement,
 } from 'lexical';
 import {useEffect, useRef, useState} from 'react';
@@ -52,19 +54,19 @@ const SIDE_INDICATOR_SIZE_PX = 18;
 const TOP_BUTTON_OVERHANG = INDICATOR_SIZE_PX / 2;
 const LEFT_BUTTON_OVERHANG = SIDE_INDICATOR_SIZE_PX / 2;
 
-function getTableFromMouseEvent(
-  event: MouseEvent,
+function getTableFromTarget(
+  target: EventTarget | null,
   getTheme: () => EditorThemeClasses | null | undefined,
 ): {
   isOutside: boolean;
   tableElement: HTMLTableElement | null;
 } {
-  if (!isHTMLElement(event.target)) {
+  if (!isHTMLElement(target)) {
     return {isOutside: true, tableElement: null};
   }
 
   const cellSelector = `td${getThemeSelector(getTheme, 'tableCell')}, th${getThemeSelector(getTheme, 'tableCell')}`;
-  const cell = event.target.closest<HTMLTableCellElement>(cellSelector);
+  const cell = target.closest<HTMLTableCellElement>(cellSelector);
   const tableElement = cell?.closest<HTMLTableElement>('table') ?? null;
 
   return {
@@ -248,23 +250,29 @@ function TableHoverActionsV2({
     }
 
     const handleMouseMove = (event: MouseEvent) => {
+      const target = getComposedEventTarget(event);
       if (
         (floatingElemRef.current &&
-          event.target instanceof Node &&
-          floatingElemRef.current.contains(event.target)) ||
+          isDOMNode(target) &&
+          floatingElemRef.current.contains(target)) ||
         (leftFloatingElemRef.current &&
-          event.target instanceof Node &&
-          leftFloatingElemRef.current.contains(event.target))
+          isDOMNode(target) &&
+          leftFloatingElemRef.current.contains(target))
       ) {
         return;
       }
 
-      const {tableElement, isOutside} = getTableFromMouseEvent(event, getTheme);
+      const {tableElement, isOutside} = getTableFromTarget(target, getTheme);
+
+      // Check ownership against the editor's root rather than anchorElem so
+      // a shadow-rooted editor whose anchorElem still defaults to document.body
+      // doesn't reject every cell (Element.contains stops at the shadow host).
+      const editorRoot = editor.getRootElement();
 
       if (
         isOutside ||
         tableElement == null ||
-        (anchorElem && !anchorElem.contains(tableElement))
+        (editorRoot !== null && !editorRoot.contains(tableElement))
       ) {
         setIsVisible(false);
         setIsLeftVisible(false);
@@ -275,8 +283,8 @@ function TableHoverActionsV2({
       }
 
       const cellSelector = `td${getThemeSelector(getTheme, 'tableCell')}, th${getThemeSelector(getTheme, 'tableCell')}`;
-      const hoveredCell = isHTMLElement(event.target)
-        ? event.target.closest<HTMLTableCellElement>(cellSelector)
+      const hoveredCell = isHTMLElement(target)
+        ? target.closest<HTMLTableCellElement>(cellSelector)
         : null;
 
       if (!hoveredCell) {
@@ -336,7 +344,16 @@ function TableHoverActionsV2({
       setIsVisible(false);
       setIsLeftVisible(false);
     };
-  }, [anchorElem, getTheme, isEditable, leftRefs, refs, update, updateLeft]);
+  }, [
+    editor,
+    anchorElem,
+    getTheme,
+    isEditable,
+    leftRefs,
+    refs,
+    update,
+    updateLeft,
+  ]);
 
   useEffect(() => {
     const handleMouseLeave = (event: MouseEvent) => {
diff --git a/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx b/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx
index dd79a5a41ce..16aff41ad06 100644
--- a/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx
@@ -16,6 +16,7 @@ import {
   $createTextNode,
   $getRoot,
   getDOMSelection,
+  getDOMSelectionPoints,
 } from 'lexical';
 import * as React from 'react';
 import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
@@ -178,14 +179,19 @@ function useTestRecorder(
   const generateTestContent = useCallback(() => {
     const rootElement = editor.getRootElement();
     const browserSelection = getDOMSelection(editor._window);
+    const browserPoints =
+      browserSelection !== null
+        ? getDOMSelectionPoints(browserSelection, rootElement)
+        : null;
 
     if (
       rootElement == null ||
       browserSelection == null ||
-      browserSelection.anchorNode == null ||
-      browserSelection.focusNode == null ||
-      !rootElement.contains(browserSelection.anchorNode) ||
-      !rootElement.contains(browserSelection.focusNode)
+      browserPoints == null ||
+      browserPoints.anchorNode == null ||
+      browserPoints.focusNode == null ||
+      !rootElement.contains(browserPoints.anchorNode) ||
+      !rootElement.contains(browserPoints.focusNode)
     ) {
       return null;
     }
@@ -329,10 +335,13 @@ ${steps.map(formatStep).join(`\n`)}
             !skipNextSelectionChange
           ) {
             const browserSelection = getDOMSelection(editor._window);
-            if (
+            const browserPoints =
               browserSelection &&
-              (browserSelection.anchorNode == null ||
-                browserSelection.focusNode == null)
+              getDOMSelectionPoints(browserSelection, editor.getRootElement());
+            if (
+              browserPoints &&
+              (browserPoints.anchorNode == null ||
+                browserPoints.focusNode == null)
             ) {
               return;
             }
@@ -386,15 +395,19 @@ ${steps.map(formatStep).join(`\n`)}
       return;
     }
     const browserSelection = getDOMSelection(getCurrentEditor()._window);
+    const rootElement = getCurrentEditor().getRootElement();
+    const browserPoints =
+      browserSelection !== null
+        ? getDOMSelectionPoints(browserSelection, rootElement)
+        : null;
     if (
-      browserSelection === null ||
-      browserSelection.anchorNode == null ||
-      browserSelection.focusNode == null
+      browserPoints === null ||
+      browserPoints.anchorNode == null ||
+      browserPoints.focusNode == null
     ) {
       return;
     }
-    const {anchorNode, anchorOffset, focusNode, focusOffset} = browserSelection;
-    const rootElement = getCurrentEditor().getRootElement();
+    const {anchorNode, anchorOffset, focusNode, focusOffset} = browserPoints;
     let anchorPath;
     if (anchorNode !== null) {
       anchorPath = getPathFromNodeToEditor(anchorNode, rootElement);
diff --git a/packages/lexical-playground/src/ui/DropDown.tsx b/packages/lexical-playground/src/ui/DropDown.tsx
index 6a8d5968e59..5b7987db24a 100644
--- a/packages/lexical-playground/src/ui/DropDown.tsx
+++ b/packages/lexical-playground/src/ui/DropDown.tsx
@@ -9,7 +9,7 @@
 import type {JSX} from 'react';
 
 import {calculateZoomLevel} from '@lexical/utils';
-import {isDOMNode} from 'lexical';
+import {getComposedEventTarget, isDOMNode} from 'lexical';
 import * as React from 'react';
 import {
   ReactNode,
@@ -208,7 +208,10 @@ export default function DropDown({
 
     if (button !== null && showDropDown) {
       const handle = (event: PointerEvent) => {
-        const target = event.target;
+        // click bubbles up from a shadow tree with event.target retargeted
+        // to the shadow host, which would make button.contains(target) false
+        // and immediately close the dropdown. Use the composed-path target.
+        const target = getComposedEventTarget(event);
         if (!isDOMNode(target)) {
           return;
         }
diff --git a/packages/lexical-playground/src/ui/ShadowDomWrapper.css b/packages/lexical-playground/src/ui/ShadowDomWrapper.css
new file mode 100644
index 00000000000..badc9a759b3
--- /dev/null
+++ b/packages/lexical-playground/src/ui/ShadowDomWrapper.css
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/*
+ * The host establishes the shadow tree but should not introduce any layout of
+ * its own; the editor inside the shadow root participates in the
+ * .editor-shell layout as if it were rendered directly.
+ */
+.shadow-dom-host {
+  display: block;
+  width: 100%;
+}
diff --git a/packages/lexical-playground/src/ui/ShadowDomWrapper.tsx b/packages/lexical-playground/src/ui/ShadowDomWrapper.tsx
new file mode 100644
index 00000000000..8a2a1bd5ae9
--- /dev/null
+++ b/packages/lexical-playground/src/ui/ShadowDomWrapper.tsx
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './ShadowDomWrapper.css';
+
+import {objectKlassEquals} from '@lexical/utils';
+import {
+  type JSX,
+  type ReactNode,
+  type RefCallback,
+  useCallback,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+function isStyleNode(node: Node): node is HTMLStyleElement | HTMLLinkElement {
+  return (
+    objectKlassEquals(node, HTMLStyleElement) ||
+    (objectKlassEquals(node, HTMLLinkElement) && node.rel === 'stylesheet')
+  );
+}
+
+/**
+ * Mirror the document's stylesheets into the shadow root. Shadow DOM
+ * encapsulates styles, so the playground/theme CSS injected into the light DOM
+ * (including Vite's dev `<style>` tags) does not reach the editor once it is
+ * inside a shadow tree. We clone the existing `<style>`/`<link>` nodes and keep
+ * the shadow root in sync with any that are injected later (e.g. HMR).
+ *
+ * We scope both the initial scan and the MutationObserver to `document.head`,
+ * which is where Vite and the playground inject stylesheets. Keeping both
+ * stages aligned avoids cloning body-injected styles on mount only to miss
+ * any added later.
+ */
+function adoptDocumentStyles(shadowRoot: ShadowRoot): () => void {
+  const adopted = new Map<HTMLStyleElement | HTMLLinkElement, CSSStyleSheet>();
+  // Membership changes (add/remove) set this; the actual adoptedStyleSheets
+  // assignment is deferred until the current batch (initial scan, observer
+  // callback, or vite:afterUpdate) finishes, so a HMR pass that touches many
+  // sheets pays one array allocation instead of one per mutation.
+  let adoptedDirty = false;
+
+  const flushAdoptedList = (): void => {
+    if (!adoptedDirty) {
+      return;
+    }
+    shadowRoot.adoptedStyleSheets = Array.from(adopted.values());
+    adoptedDirty = false;
+  };
+
+  const readSheetText = (
+    source: HTMLStyleElement | HTMLLinkElement,
+  ): string | null => {
+    const sheet = source.sheet;
+    if (sheet === null) {
+      return null;
+    }
+    try {
+      // CSSStyleSheet.replaceSync drops @import rules with a console warning
+      // in Chrome. The host document already resolves them (the shadow tree
+      // inherits the result through cascade for properties like font-family),
+      // so strip them up front to keep the migration silent.
+      return Array.from(sheet.cssRules)
+        .map(rule => rule.cssText)
+        .filter(text => !text.toLowerCase().startsWith('@import'))
+        .join('\n');
+    } catch {
+      // SecurityError on cross-origin <link rel="stylesheet">. The shadow
+      // tree skips it: playground has no cross-origin sheets today, and a
+      // future addition surfaces via the dev warning below.
+      if (import.meta.env?.DEV) {
+        console.warn(
+          '[ShadowDomWrapper] skipping unreadable stylesheet (likely cross-origin):',
+          source,
+        );
+      }
+      return null;
+    }
+  };
+
+  const addSource = (source: HTMLStyleElement | HTMLLinkElement): void => {
+    if (adopted.has(source)) {
+      return;
+    }
+    const text = readSheetText(source);
+    if (text === null) {
+      return;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(text);
+    adopted.set(source, sheet);
+    adoptedDirty = true;
+  };
+
+  const removeSource = (source: Node): void => {
+    if (!isStyleNode(source)) {
+      return;
+    }
+    if (adopted.delete(source)) {
+      adoptedDirty = true;
+    }
+  };
+
+  const refreshSource = (source: Node): void => {
+    if (!isStyleNode(source)) {
+      return;
+    }
+    const sheet = adopted.get(source);
+    if (sheet === undefined) {
+      // Source wasn't adopted (unreadable at mount); retry now in case the
+      // sheet finished loading.
+      addSource(source);
+      return;
+    }
+    const text = readSheetText(source);
+    if (text !== null) {
+      sheet.replaceSync(text);
+    }
+  };
+
+  for (const node of document.head.querySelectorAll<
+    HTMLStyleElement | HTMLLinkElement
+  >('style, link[rel="stylesheet"]')) {
+    addSource(node);
+  }
+  flushAdoptedList();
+
+  const observer = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      if (mutation.type === 'characterData') {
+        let node: Node | null = mutation.target;
+        while (node !== null && !isStyleNode(node)) {
+          node = node.parentNode;
+        }
+        if (node !== null) {
+          refreshSource(node);
+        }
+        continue;
+      }
+      for (const node of mutation.addedNodes) {
+        if (isStyleNode(node)) {
+          addSource(node);
+        }
+      }
+      for (const node of mutation.removedNodes) {
+        if (isStyleNode(node)) {
+          removeSource(node);
+        }
+      }
+    }
+    flushAdoptedList();
+  });
+  observer.observe(document.head, {
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+
+  const resyncFromHead = (): void => {
+    // Rebuild `adopted` in document.head iteration order so the cascade
+    // order in the shadow tree matches the host document. Reusing existing
+    // CSSStyleSheet instances keeps `replaceSync` work to refresh-only for
+    // sources we already adopted.
+    const next = new Map<HTMLStyleElement | HTMLLinkElement, CSSStyleSheet>();
+    for (const source of document.head.querySelectorAll<
+      HTMLStyleElement | HTMLLinkElement
+    >('style, link[rel="stylesheet"]')) {
+      const text = readSheetText(source);
+      const existing = adopted.get(source);
+      if (existing !== undefined) {
+        // Keep an already-adopted sheet even when this read returned null
+        // (cross-origin or sheet still loading) — dropping it would lose
+        // styles we successfully cloned earlier.
+        if (text !== null) {
+          existing.replaceSync(text);
+        }
+        next.set(source, existing);
+      } else if (text !== null) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(text);
+        next.set(source, sheet);
+      }
+    }
+    adopted.clear();
+    for (const [source, sheet] of next) {
+      adopted.set(source, sheet);
+    }
+    adoptedDirty = true;
+    flushAdoptedList();
+  };
+  const hot = import.meta.hot;
+  if (hot) {
+    hot.on('vite:afterUpdate', resyncFromHead);
+  }
+
+  return () => {
+    observer.disconnect();
+    if (hot) {
+      hot.off('vite:afterUpdate', resyncFromHead);
+    }
+    shadowRoot.adoptedStyleSheets = [];
+    adopted.clear();
+  };
+}
+
+/**
+ * Renders its children inside an open DOM ShadowRoot via a React portal. React
+ * context still flows across the portal, so the Lexical editor tree is built
+ * normally — only its DOM lives inside the shadow tree. This exercises
+ * Lexical's DOM shadow root support (selection resolved with
+ * Selection.getComposedRanges, focus resolved with ShadowRoot.activeElement).
+ */
+export default function ShadowDomWrapper({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+  const hostRef = useCallback<RefCallback<HTMLElement>>(host => {
+    if (host) {
+      const root = host.shadowRoot ?? host.attachShadow({mode: 'open'});
+      const disposeStyles = adoptDocumentStyles(root);
+      setShadowRoot(root);
+      return disposeStyles;
+    }
+  }, []);
+
+  return (
+    <div
+      ref={hostRef}
+      className="shadow-dom-host"
+      data-test-id="shadow-dom-host">
+      {shadowRoot !== null ? createPortal(children, shadowRoot) : null}
+    </div>
+  );
+}
diff --git a/packages/lexical-playground/src/utils/getDOMRangeRect.ts b/packages/lexical-playground/src/utils/getDOMRangeRect.ts
index 8b02ca3c91a..2f7dfef93b6 100644
--- a/packages/lexical-playground/src/utils/getDOMRangeRect.ts
+++ b/packages/lexical-playground/src/utils/getDOMRangeRect.ts
@@ -5,23 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+import {getDOMSelectionRangeAndPoints} from 'lexical';
+
 export function getDOMRangeRect(
   nativeSelection: Selection,
   rootElement: HTMLElement,
 ): DOMRect {
-  const domRange = nativeSelection.getRangeAt(0);
-
-  let rect;
-
-  if (nativeSelection.anchorNode === rootElement) {
+  const {points, range} = getDOMSelectionRangeAndPoints(
+    nativeSelection,
+    rootElement,
+  );
+  if (points.anchorNode === rootElement || range === null) {
     let inner = rootElement;
     while (inner.firstElementChild != null) {
       inner = inner.firstElementChild as HTMLElement;
     }
-    rect = inner.getBoundingClientRect();
-  } else {
-    rect = domRange.getBoundingClientRect();
+    return inner.getBoundingClientRect();
   }
-
-  return rect;
+  return range.getBoundingClientRect();
 }
diff --git a/packages/lexical-playground/src/utils/setFloatingElemPosition.ts b/packages/lexical-playground/src/utils/setFloatingElemPosition.ts
index 4934e65b32f..8197e8ee006 100644
--- a/packages/lexical-playground/src/utils/setFloatingElemPosition.ts
+++ b/packages/lexical-playground/src/utils/setFloatingElemPosition.ts
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import {getDOMSelection, getDOMSelectionRange, getParentElement} from 'lexical';
+
 const VERTICAL_GAP = 10;
 const HORIZONTAL_OFFSET = 5;
 
@@ -16,7 +18,7 @@ export function setFloatingElemPosition(
   verticalGap: number = VERTICAL_GAP,
   horizontalOffset: number = HORIZONTAL_OFFSET,
 ): void {
-  const scrollerElem = anchorElem.parentElement;
+  const scrollerElem = getParentElement(anchorElem);
 
   if (targetRect === null || !scrollerElem) {
     floatingElem.style.opacity = '0';
@@ -31,10 +33,10 @@ export function setFloatingElemPosition(
   let top = targetRect.top - floatingElemRect.height - verticalGap;
   let left = targetRect.left - horizontalOffset;
 
-  // Check if text is end-aligned
-  const selection = window.getSelection();
-  if (selection && selection.rangeCount > 0) {
-    const range = selection.getRangeAt(0);
+  // Check if text is end-aligned.
+  const domSelection = getDOMSelection(anchorElem.ownerDocument.defaultView);
+  const range = domSelection && getDOMSelectionRange(domSelection, anchorElem);
+  if (range) {
     const textNode = range.startContainer;
     if (textNode.nodeType === Node.ELEMENT_NODE || textNode.parentElement) {
       const textElement =
diff --git a/packages/lexical-playground/src/vite-env.d.ts b/packages/lexical-playground/src/vite-env.d.ts
new file mode 100644
index 00000000000..c63a585ee73
--- /dev/null
+++ b/packages/lexical-playground/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/// <reference types="vite/client" />
diff --git a/packages/lexical-react/src/LexicalAutoFocusPlugin.ts b/packages/lexical-react/src/LexicalAutoFocusPlugin.ts
index 80bb73f85f8..6ce85367f60 100644
--- a/packages/lexical-react/src/LexicalAutoFocusPlugin.ts
+++ b/packages/lexical-react/src/LexicalAutoFocusPlugin.ts
@@ -7,6 +7,7 @@
  */
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {getActiveElement} from 'lexical';
 import {useEffect} from 'react';
 
 type Props = {
@@ -33,8 +34,11 @@ export function AutoFocusPlugin({defaultSelection}: Props): null {
         // trigger a re-focus on the element. So in the case this occurs, we'll need to correct it.
         // Normally this is fine, Selection API !== Focus API, but fore the intents of the naming
         // of this plugin, which should preserve focus too.
-        const activeElement = document.activeElement;
         const rootElement = editor.getRootElement() as HTMLDivElement;
+        // getActiveElement rather than document.activeElement, which reports
+        // the shadow host when the editor is in a shadow root.
+        const activeElement =
+          rootElement !== null ? getActiveElement(rootElement) : null;
         if (
           rootElement !== null &&
           (activeElement === null || !rootElement.contains(activeElement))
diff --git a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx
index 2f86f3d4941..b5fef84bc79 100644
--- a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx
+++ b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx
@@ -21,6 +21,7 @@ import {
   CLICK_COMMAND,
   COMMAND_PRIORITY_LOW,
   FORMAT_ELEMENT_COMMAND,
+  getComposedEventTarget,
   mergeRegister,
 } from 'lexical';
 import * as React from 'react';
@@ -94,7 +95,7 @@ export function BlockWithAlignableContents({
       editor.registerCommand<MouseEvent>(
         CLICK_COMMAND,
         event => {
-          if (event.target === ref.current) {
+          if (getComposedEventTarget(event) === ref.current) {
             event.preventDefault();
             if (!event.shiftKey) {
               clearSelection();
diff --git a/packages/lexical-react/src/LexicalComposer.tsx b/packages/lexical-react/src/LexicalComposer.tsx
index b762e08279a..c7bd7bf0d09 100644
--- a/packages/lexical-react/src/LexicalComposer.tsx
+++ b/packages/lexical-react/src/LexicalComposer.tsx
@@ -21,6 +21,7 @@ import {
   createEditor,
   EditorState,
   EditorThemeClasses,
+  getActiveElement,
   HISTORY_MERGE_TAG,
   HTMLConfig,
   Klass,
@@ -184,10 +185,16 @@ function initializeEditor(
       if (root.isEmpty()) {
         const paragraph = $createParagraphNode();
         root.append(paragraph);
-        const activeElement = CAN_USE_DOM ? document.activeElement : null;
+        const rootElement = editor.getRootElement();
+        // getActiveElement rather than document.activeElement, which reports
+        // the shadow host when the editor is in a shadow root.
+        const activeElement =
+          CAN_USE_DOM && rootElement !== null
+            ? getActiveElement(rootElement)
+            : null;
         if (
           $getSelection() !== null ||
-          (activeElement !== null && activeElement === editor.getRootElement())
+          (activeElement !== null && activeElement === rootElement)
         ) {
           paragraph.select();
         }
diff --git a/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx b/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx
index bf323aa3b5d..55e7e04a106 100644
--- a/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx
+++ b/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx
@@ -22,6 +22,11 @@ import {
   COMMAND_PRIORITY_LOW,
   DRAGOVER_COMMAND,
   DROP_COMMAND,
+  getActiveElement,
+  getActiveElementDeep,
+  getComposedEventTarget,
+  getParentElement,
+  getRootOwnerDocument,
   IS_FIREFOX,
   isHTMLElement,
   LexicalEditor,
@@ -284,7 +289,7 @@ function useDraggableBlockMenu(
   isOnMenu: (element: HTMLElement) => boolean,
   onElementChanged?: (element: HTMLElement | null) => void,
 ): JSX.Element {
-  const scrollerElem = anchorElem.parentElement;
+  const scrollerElem = getParentElement(anchorElem);
 
   const isDraggingBlockRef = useRef<boolean>(false);
   const [draggableBlockElem, setDraggableBlockElemState] =
@@ -302,7 +307,7 @@ function useDraggableBlockMenu(
 
   useEffect(() => {
     function onMouseMove(event: MouseEvent) {
-      const target = event.target;
+      const target = getComposedEventTarget(event);
       if (!isHTMLElement(target)) {
         setDraggableBlockElem(null);
         return;
@@ -335,10 +340,7 @@ function useDraggableBlockMenu(
   }, [scrollerElem, anchorElem, editor, isOnMenu, setDraggableBlockElem]);
 
   useEffect(() => {
-    const zoomLevel = calculateZoomLevel(
-      document.getElementsByClassName('ContentEditable__root')[0],
-      true,
-    );
+    const zoomLevel = calculateZoomLevel(editor.getRootElement(), true);
     if (menuRef.current) {
       setMenuPosition(
         draggableBlockElem,
@@ -347,7 +349,7 @@ function useDraggableBlockMenu(
         zoomLevel,
       );
     }
-  }, [anchorElem, draggableBlockElem, menuRef]);
+  }, [editor, anchorElem, draggableBlockElem, menuRef]);
 
   useEffect(() => {
     function onDragover(event: DragEvent): boolean {
@@ -358,7 +360,10 @@ function useDraggableBlockMenu(
       if (isFileTransfer) {
         return false;
       }
-      const {pageY, target} = event;
+      const pageY = event.pageY;
+      // Composed target so the zoom level is read from the real element rather
+      // than the shadow host when the editor is in a shadow tree.
+      const target = getComposedEventTarget(event);
       if (!isHTMLElement(target)) {
         return false;
       }
@@ -386,7 +391,10 @@ function useDraggableBlockMenu(
       if (isFileTransfer) {
         return false;
       }
-      const {target, dataTransfer, pageY} = event;
+      const {dataTransfer, pageY} = event;
+      // Composed target so the zoom level is read from the real element rather
+      // than the shadow host when the editor is in a shadow tree.
+      const target = getComposedEventTarget(event);
       const dragData =
         dataTransfer != null ? dataTransfer.getData(DRAG_DATA_FORMAT) : '';
       const draggedNode = $getNodeByKey(dragData);
@@ -489,7 +497,12 @@ function useDraggableBlockMenu(
         BLUR_COMMAND,
         () => {
           const rootElement = editor.getRootElement();
-          const activeElement = document.activeElement;
+          // getActiveElementDeep so the menu is found whether it is portaled
+          // into the light DOM or inside a shadow root (where
+          // document.activeElement only reports the shadow host).
+          const activeElement = getActiveElementDeep(
+            getRootOwnerDocument(rootElement),
+          );
           if (
             rootElement &&
             isHTMLElement(activeElement) &&
@@ -534,7 +547,12 @@ function useDraggableBlockMenu(
     // and to ensure selection is properly maintained during drag.
     if (IS_FIREFOX) {
       const rootElement = editor.getRootElement();
-      if (rootElement !== null && document.activeElement !== rootElement) {
+      // getActiveElement rather than document.activeElement, which reports the
+      // shadow host when the editor is in a shadow root.
+      if (
+        rootElement !== null &&
+        getActiveElement(rootElement) !== rootElement
+      ) {
         // Restore focus synchronously - don't use requestAnimationFrame as blur already happened
         // and we need immediate focus restoration to maintain cursor visibility
         rootElement.focus({preventScroll: true});
diff --git a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
index 6bda5b176e7..3779ad1f6f7 100644
--- a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
+++ b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
@@ -22,6 +22,7 @@ import {
   addClassNamesToElement,
   CLICK_COMMAND,
   COMMAND_PRIORITY_LOW,
+  getComposedEventTarget,
   mergeRegister,
   removeClassNamesFromElement,
 } from 'lexical';
@@ -46,7 +47,7 @@ function HorizontalRuleComponent({nodeKey}: {nodeKey: NodeKey}) {
         (event: MouseEvent) => {
           const hrElem = editor.getElementByKey(nodeKey);
 
-          if (event.target === hrElem) {
+          if (getComposedEventTarget(event) === hrElem) {
             if (!event.shiftKey) {
               clearSelection();
             }
diff --git a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
index a18cc1acc29..fcb111d4b54 100644
--- a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
+++ b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
@@ -23,6 +23,7 @@ import {
   CommandListenerPriority,
   createCommand,
   getDOMSelection,
+  getDOMSelectionPoints,
   LexicalCommand,
   LexicalEditor,
   RangeSelection,
@@ -58,14 +59,16 @@ function tryToPositionRange(
   leadOffset: number,
   range: Range,
   editorWindow: Window,
+  rootElement: HTMLElement | null,
 ): boolean {
   const domSelection = getDOMSelection(editorWindow);
   if (domSelection === null || !domSelection.isCollapsed) {
     return false;
   }
-  const anchorNode = domSelection.anchorNode;
+  const points = getDOMSelectionPoints(domSelection, rootElement);
+  const anchorNode = points.anchorNode;
   const startOffset = leadOffset;
-  const endOffset = domSelection.anchorOffset;
+  const endOffset = points.anchorOffset;
 
   if (anchorNode == null || endOffset == null) {
     return false;
@@ -112,42 +115,7 @@ function isSelectionOnEntityBoundary(
   });
 }
 
-// Got from https://stackoverflow.com/a/42543908/2013580
-/**
- * Walks up from `element` and returns the nearest scrollable ancestor (or
- * `document.body` if none is found), used to keep the active typeahead option
- * scrolled into view. Set `includeHidden` to also treat `overflow: hidden`
- * ancestors as scroll parents.
- */
-export function getScrollParent(
-  element: HTMLElement,
-  includeHidden: boolean,
-): HTMLElement | HTMLBodyElement {
-  let style = getComputedStyle(element);
-  const excludeStaticParent = style.position === 'absolute';
-  const overflowRegex = includeHidden
-    ? /(auto|scroll|hidden)/
-    : /(auto|scroll)/;
-  if (style.position === 'fixed') {
-    return document.body;
-  }
-  for (
-    let parent: HTMLElement | null = element;
-    (parent = parent.parentElement);
-  ) {
-    style = getComputedStyle(parent);
-    if (excludeStaticParent && style.position === 'static') {
-      continue;
-    }
-    if (
-      overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
-    ) {
-      return parent;
-    }
-  }
-  return document.body;
-}
-
+export {getScrollParent} from './shared/getScrollParent';
 export {useDynamicPositioning} from './shared/LexicalMenu';
 
 /**
@@ -341,6 +309,7 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
             match.leadOffset,
             range,
             editorWindow,
+            editor.getRootElement(),
           );
           if (isRangePositioned !== null) {
             startTransition(() =>
diff --git a/packages/lexical-react/src/__tests__/unit/LexicalMenu.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalMenu.test.tsx
index f7ce07bbc72..9d2d9e6ceb9 100644
--- a/packages/lexical-react/src/__tests__/unit/LexicalMenu.test.tsx
+++ b/packages/lexical-react/src/__tests__/unit/LexicalMenu.test.tsx
@@ -6,19 +6,29 @@
  *
  */
 
+import * as ComposerContext from '@lexical/react/LexicalComposerContext';
 import {KEY_ENTER_COMMAND, LexicalEditor} from 'lexical';
 import {createTestEditor} from 'lexical/src/__tests__/utils';
 import * as React from 'react';
 import {act} from 'react';
 import ReactDOM from 'react-dom';
 import {createRoot, Root} from 'react-dom/client';
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  onTestFinished,
+  vi,
+} from 'vitest';
 
 import {
   LexicalMenu,
   MenuOption,
   MenuRenderFn,
   MenuResolution,
+  useDynamicPositioning,
 } from '../../shared/LexicalMenu';
 
 // Mock the composer context to provide a test editor
@@ -471,3 +481,76 @@ describe('LexicalMenu', () => {
     });
   });
 });
+
+describe('useDynamicPositioning Comment 8 regression', () => {
+  it('registers a scroll listener on the editor root enclosing shadow root, not on the portaled target tree', async () => {
+    if (typeof document === 'undefined') {
+      // Node-only `bench` project has no DOM; this scenario is DOM-only.
+      return;
+    }
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    );
+    // Editor + scroll container live in an open shadow root, while the
+    // floating menu target is portaled into document.body. The pre-fix
+    // code keyed getDOMShadowRoots off the target — which sits in the
+    // light DOM — so the for-loop yielded zero shadow listeners. The fix
+    // keys off the editor root, so shadow.addEventListener('scroll', …)
+    // fires exactly once.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    onTestFinished(() => host.remove());
+    const shadow = host.attachShadow({mode: 'open'});
+
+    const editorScroller = document.createElement('div');
+    editorScroller.style.height = '60px';
+    editorScroller.style.overflow = 'auto';
+    const editorRoot = document.createElement('div');
+    editorRoot.style.height = '400px';
+    editorRoot.contentEditable = 'true';
+    editorScroller.appendChild(editorRoot);
+    shadow.appendChild(editorScroller);
+
+    const shadowEditor = createTestEditor();
+    shadowEditor.setRootElement(editorRoot);
+
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    onTestFinished(() => target.remove());
+
+    vi.spyOn(ComposerContext, 'useLexicalComposerContext').mockReturnValue([
+      shadowEditor,
+      {},
+    ] as ReturnType<typeof ComposerContext.useLexicalComposerContext>);
+
+    const shadowAddSpy = vi.spyOn(shadow, 'addEventListener');
+
+    function Stub() {
+      useDynamicPositioning(createTestResolution(), target, () => {});
+      return null;
+    }
+
+    const stubContainer = document.createElement('div');
+    document.body.appendChild(stubContainer);
+    const stubRoot = createRoot(stubContainer);
+    onTestFinished(async () => {
+      await act(async () => {
+        stubRoot.unmount();
+      });
+      stubContainer.remove();
+    });
+    await act(async () => {
+      stubRoot.render(<Stub />);
+    });
+
+    const scrollListenerCalls = shadowAddSpy.mock.calls.filter(
+      ([eventName]) => eventName === 'scroll',
+    );
+    expect(scrollListenerCalls.length).toBeGreaterThan(0);
+  });
+});
diff --git a/packages/lexical-react/src/__tests__/unit/useMenuAnchorRef.shadow.test.tsx b/packages/lexical-react/src/__tests__/unit/useMenuAnchorRef.shadow.test.tsx
new file mode 100644
index 00000000000..b8738b0c180
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/useMenuAnchorRef.shadow.test.tsx
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {createTestEditor} from 'lexical/src/__tests__/utils';
+import * as React from 'react';
+import {act} from 'react';
+import {createRoot, Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+import {useMenuAnchorRef} from '../../shared/LexicalMenu';
+
+let shadowEditor: ReturnType<typeof createTestEditor>;
+let shadowRootElement: HTMLDivElement;
+let shadowRoot: ShadowRoot;
+
+vi.mock('@lexical/react/LexicalComposerContext', () => ({
+  useLexicalComposerContext: () => [shadowEditor],
+}));
+
+describe('useMenuAnchorRef shadow DOM', () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    shadowRoot = host.attachShadow({mode: 'open'});
+    shadowRootElement = document.createElement('div');
+    shadowRootElement.contentEditable = 'true';
+    shadowRoot.appendChild(shadowRootElement);
+
+    shadowEditor = createTestEditor();
+    shadowEditor.setRootElement(shadowRootElement);
+  });
+
+  afterEach(() => {
+    act(() => reactRoot.unmount());
+    container.remove();
+    shadowRootElement.remove();
+    (shadowRoot.host as HTMLElement).remove();
+    vi.clearAllMocks();
+  });
+
+  it('appends anchor to the shadow root when no explicit parent is provided', async () => {
+    let ref: React.RefObject<HTMLElement | null> | undefined;
+
+    function App() {
+      ref = useMenuAnchorRef(null, vi.fn());
+      return null;
+    }
+
+    await act(async () => {
+      reactRoot.render(<App />);
+    });
+
+    expect(ref).toBeDefined();
+    const anchor = ref!.current;
+    expect(anchor).not.toBeNull();
+    expect(anchor!.getRootNode()).toBe(shadowRoot);
+    expect(document.body.contains(anchor!)).toBe(false);
+  });
+
+  it('removes anchor from shadow root on unmount', async () => {
+    let ref: React.RefObject<HTMLElement | null> | undefined;
+
+    function App() {
+      ref = useMenuAnchorRef(null, vi.fn());
+      return null;
+    }
+
+    await act(async () => {
+      reactRoot.render(<App />);
+    });
+
+    const anchor = ref!.current;
+    expect(anchor).not.toBeNull();
+    expect(shadowRoot.contains(anchor!)).toBe(true);
+
+    await act(async () => {
+      reactRoot.render(<span />);
+    });
+
+    expect(shadowRoot.contains(anchor!)).toBe(false);
+  });
+
+  it('uses explicit parent even when editor is in shadow', async () => {
+    const explicitParent = document.createElement('div');
+    document.body.appendChild(explicitParent);
+    let ref: React.RefObject<HTMLElement | null> | undefined;
+
+    function App() {
+      ref = useMenuAnchorRef(null, vi.fn(), undefined, explicitParent);
+      return null;
+    }
+
+    await act(async () => {
+      reactRoot.render(<App />);
+    });
+
+    const anchor = ref!.current;
+    expect(anchor).not.toBeNull();
+    expect(explicitParent.contains(anchor!)).toBe(true);
+    explicitParent.remove();
+  });
+});
diff --git a/packages/lexical-react/src/shared/LexicalMenu.tsx b/packages/lexical-react/src/shared/LexicalMenu.tsx
index a62ccdac6be..2a228d5e6b1 100644
--- a/packages/lexical-react/src/shared/LexicalMenu.tsx
+++ b/packages/lexical-react/src/shared/LexicalMenu.tsx
@@ -16,6 +16,8 @@ import {
   COMMAND_PRIORITY_LOW,
   CommandListenerPriority,
   createCommand,
+  getDOMShadowRoots,
+  isDOMShadowRoot,
   KEY_ARROW_DOWN_COMMAND,
   KEY_ARROW_UP_COMMAND,
   KEY_ENTER_COMMAND,
@@ -37,6 +39,7 @@ import {
 } from 'react';
 import ReactDOM from 'react-dom';
 
+import {getScrollParent} from './getScrollParent';
 import useLayoutEffect from './useLayoutEffect';
 
 /**
@@ -103,7 +106,9 @@ export type MenuRenderFn<TOption extends MenuOption> = (
 ) => ReactPortal | JSX.Element | null;
 
 const scrollIntoViewIfNeeded = (target: HTMLElement) => {
-  const typeaheadContainerNode = document.getElementById('typeahead-menu');
+  const typeaheadContainerNode = target.closest(
+    '#typeahead-menu',
+  ) as HTMLElement | null;
   if (!typeaheadContainerNode) {
     return;
   }
@@ -182,36 +187,6 @@ function $splitNodeContainingQuery(match: MenuTextMatch): TextNode | null {
   return newNode;
 }
 
-// Got from https://stackoverflow.com/a/42543908/2013580
-export function getScrollParent(
-  element: HTMLElement,
-  includeHidden: boolean,
-): HTMLElement | HTMLBodyElement {
-  let style = getComputedStyle(element);
-  const excludeStaticParent = style.position === 'absolute';
-  const overflowRegex = includeHidden
-    ? /(auto|scroll|hidden)/
-    : /(auto|scroll)/;
-  if (style.position === 'fixed') {
-    return document.body;
-  }
-  for (
-    let parent: HTMLElement | null = element;
-    (parent = parent.parentElement);
-  ) {
-    style = getComputedStyle(parent);
-    if (excludeStaticParent && style.position === 'static') {
-      continue;
-    }
-    if (
-      overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
-    ) {
-      return parent;
-    }
-  }
-  return document.body;
-}
-
 function isTriggerVisibleInNearestScrollContainer(
   targetElement: HTMLElement,
   containerElement: HTMLElement,
@@ -277,11 +252,30 @@ export function useDynamicPositioning(
         capture: true,
         passive: true,
       });
+      // Scroll events are non-composed and do not cross shadow boundaries,
+      // so the document-level listener above never sees scrolls inside an
+      // enclosing shadow tree. Key off the editor root rather than the
+      // target — the target may be portaled into the light DOM while the
+      // editor (and its scroll container) live inside a shadow tree, and
+      // getDOMShadowRoots(target) would then return an empty list. Walk
+      // out of the editor's enclosing shadow roots instead so internal
+      // scrolls at any depth reposition the floating menu.
+      const shadowRootSource = rootElement ?? targetElement;
+      const enclosingShadowRoots = getDOMShadowRoots(shadowRootSource);
+      for (const root of enclosingShadowRoots) {
+        root.addEventListener('scroll', handleScroll, {
+          capture: true,
+          passive: true,
+        });
+      }
       resizeObserver.observe(targetElement);
       return () => {
         resizeObserver.unobserve(targetElement);
         window.removeEventListener('resize', onReposition);
         document.removeEventListener('scroll', handleScroll, true);
+        for (const root of enclosingShadowRoots) {
+          root.removeEventListener('scroll', handleScroll, true);
+        }
       };
     }
   }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
@@ -637,20 +631,38 @@ function setContainerDivAttributes(
   containerDiv.style.position = 'absolute';
 }
 
+function resolveMenuParent(
+  editor: LexicalEditor,
+): HTMLElement | ShadowRoot | undefined {
+  if (!CAN_USE_DOM) {
+    return undefined;
+  }
+  const rootElement = editor.getRootElement();
+  if (rootElement !== null) {
+    const root = rootElement.getRootNode();
+    if (isDOMShadowRoot(root)) {
+      return root as ShadowRoot;
+    }
+  }
+  return document.body;
+}
+
 export function useMenuAnchorRef(
   resolution: MenuResolution | null,
   setResolution: (r: MenuResolution | null) => void,
   className?: string,
-  parent: HTMLElement | undefined = CAN_USE_DOM ? document.body : undefined,
+  parent?: HTMLElement,
   shouldIncludePageYOffset__EXPERIMENTAL: boolean = true,
 ): RefObject<HTMLElement | null> {
   const [editor] = useLexicalComposerContext();
+  const resolvedParent: HTMLElement | ShadowRoot | undefined =
+    parent ?? resolveMenuParent(editor);
   const initialAnchorElement = CAN_USE_DOM
     ? document.createElement('div')
     : null;
   const anchorElementRef = useRef<HTMLElement | null>(initialAnchorElement);
   const positionMenu = useCallback(() => {
-    if (anchorElementRef.current === null || parent === undefined) {
+    if (anchorElementRef.current === null || resolvedParent === undefined) {
       return;
     }
     anchorElementRef.current.style.top = anchorElementRef.current.style.bottom;
@@ -699,7 +711,7 @@ export function useMenuAnchorRef(
 
       if (!containerDiv.isConnected) {
         setContainerDivAttributes(containerDiv, className);
-        parent.append(containerDiv);
+        resolvedParent.append(containerDiv);
       }
       containerDiv.setAttribute('id', 'typeahead-menu');
       rootElement.setAttribute('aria-controls', 'typeahead-menu');
@@ -709,7 +721,7 @@ export function useMenuAnchorRef(
     resolution,
     shouldIncludePageYOffset__EXPERIMENTAL,
     className,
-    parent,
+    resolvedParent,
   ]);
 
   useEffect(() => {
@@ -754,8 +766,8 @@ export function useMenuAnchorRef(
     initialAnchorElement === anchorElementRef.current
   ) {
     setContainerDivAttributes(initialAnchorElement, className);
-    if (parent != null) {
-      parent.append(initialAnchorElement);
+    if (resolvedParent != null) {
+      resolvedParent.append(initialAnchorElement);
     }
   }
 
diff --git a/packages/lexical-react/src/shared/getScrollParent.ts b/packages/lexical-react/src/shared/getScrollParent.ts
new file mode 100644
index 00000000000..3c5fa079375
--- /dev/null
+++ b/packages/lexical-react/src/shared/getScrollParent.ts
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {getParentElement} from 'lexical';
+
+// Got from https://stackoverflow.com/a/42543908/2013580
+/**
+ * Walks up from `element` and returns the nearest scrollable ancestor (or
+ * `ownerDocument.body` if none is found), used to keep the active typeahead
+ * option scrolled into view. Set `includeHidden` to also treat
+ * `overflow: hidden` ancestors as scroll parents.
+ *
+ * The walk crosses ShadowRoot→host (via `getParentElement`) so a
+ * shadow-mounted editor's scroll parent is found in the enclosing light-DOM
+ * ancestor chain, and the styles / body are resolved through the element's
+ * own realm so an iframe-mounted editor stays inside its document.
+ */
+export function getScrollParent(
+  element: HTMLElement,
+  includeHidden: boolean,
+): HTMLElement | HTMLBodyElement {
+  // Resolve through the element's own realm so an iframe-mounted editor's
+  // scroll parent and computed styles come from its document, not the top one.
+  const ownerDocument = element.ownerDocument;
+  const win = ownerDocument.defaultView || window;
+  let style = win.getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = includeHidden
+    ? /(auto|scroll|hidden)/
+    : /(auto|scroll)/;
+  if (style.position === 'fixed') {
+    return ownerDocument.body;
+  }
+  for (
+    let parent: HTMLElement | null = element;
+    (parent = getParentElement(parent));
+  ) {
+    style = win.getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (
+      overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
+    ) {
+      return parent;
+    }
+  }
+  return ownerDocument.body;
+}
diff --git a/packages/lexical-react/src/shared/useYjsCollaboration.tsx b/packages/lexical-react/src/shared/useYjsCollaboration.tsx
index 3fb10caa749..39dd78f9d2a 100644
--- a/packages/lexical-react/src/shared/useYjsCollaboration.tsx
+++ b/packages/lexical-react/src/shared/useYjsCollaboration.tsx
@@ -44,6 +44,7 @@ import {
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_EDITOR,
   FOCUS_COMMAND,
+  getActiveElement,
   HISTORY_MERGE_TAG,
   mergeRegister,
   REDO_COMMAND,
@@ -368,11 +369,14 @@ function useProvider(
       }
     };
 
+    const rootElement = editor.getRootElement();
     initLocalState(
       provider,
       name,
       color,
-      document.activeElement === editor.getRootElement(),
+      // getActiveElement rather than document.activeElement, which reports the
+      // shadow host when the editor is in a shadow root.
+      rootElement !== null && getActiveElement(rootElement) === rootElement,
       awarenessData || {},
     );
 
diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
index de8175bbf32..0bed41b8fed 100644
--- a/packages/lexical-rich-text/src/index.ts
+++ b/packages/lexical-rich-text/src/index.ts
@@ -1176,7 +1176,7 @@ export function registerRichText(
         if (files.length > 0) {
           const x = event.clientX;
           const y = event.clientY;
-          const eventRange = caretFromPoint(x, y);
+          const eventRange = caretFromPoint(x, y, editor.getRootElement());
           if (eventRange !== null) {
             const {offset: domOffset, node: domNode} = eventRange;
             const node = $getNearestNodeFromDOMNode(domNode);
diff --git a/packages/lexical-selection/src/utils.ts b/packages/lexical-selection/src/utils.ts
index aabf091d4d3..c1f8acb74cc 100644
--- a/packages/lexical-selection/src/utils.ts
+++ b/packages/lexical-selection/src/utils.ts
@@ -11,6 +11,7 @@ import {
   $getEditor,
   $isRootNode,
   $isTextNode,
+  getRootOwnerDocument,
   getStyleObjectFromCSS,
 } from 'lexical';
 
@@ -56,7 +57,9 @@ export function createDOMRange(
 ): Range | null {
   const anchorKey = anchorNode.getKey();
   const focusKey = focusNode.getKey();
-  const range = document.createRange();
+  // Resolve through the editor's own document so iframe / shadow-mounted
+  // editors don't end up with a Range bound to the wrong realm.
+  const range = getRootOwnerDocument(editor.getRootElement()).createRange();
   let anchorDOM: Node | Text | null = editor.getElementByKey(anchorKey);
   let focusDOM: Node | Text | null = editor.getElementByKey(focusKey);
   let anchorOffset = _anchorOffset;
diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
index 8e2c89b58d8..d70166c8e5f 100644
--- a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
+++ b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -73,10 +73,15 @@ import {
   FOCUS_COMMAND,
   FORMAT_ELEMENT_COMMAND,
   FORMAT_TEXT_COMMAND,
+  getComposedEventTarget,
   getDOMSelection,
+  getDOMSelectionPoints,
+  getDOMSelectionRange,
   INSERT_PARAGRAPH_COMMAND,
   IS_FIREFOX,
+  isDOMDocumentNode,
   isDOMNode,
+  isDOMShadowRoot,
   isHTMLElement,
   KEY_ARROW_DOWN_COMMAND,
   KEY_ARROW_LEFT_COMMAND,
@@ -200,7 +205,9 @@ export function registerTableWindowHandlers(
     }
 
     const pointerDownCallback = (event: PointerEvent) => {
-      const target = event.target;
+      // Listener is on editorWindow; the composed target is needed so the
+      // rootElement.contains check below sees the shadow-internal target.
+      const target = getComposedEventTarget(event);
       if (
         event.button !== 0 ||
         !isDOMNode(target) ||
@@ -280,17 +287,25 @@ function $handleTableClick(
         editorWindow.removeEventListener('pointermove', onPointerMove);
         return;
       }
-      if (!isDOMNode(moveEvent.target)) {
+      const moveTarget = getComposedEventTarget(moveEvent);
+      if (!isDOMNode(moveTarget)) {
         return;
       }
       let focusCell: null | TableDOMCell = null;
       // In firefox the moveEvent.target may be captured so we must always
       // consult the coordinates #7245
-      const override = !(IS_FIREFOX || tableElement.contains(moveEvent.target));
+      const override = !(IS_FIREFOX || tableElement.contains(moveTarget));
       if (override) {
-        focusCell = getDOMCellInTableFromTarget(tableElement, moveEvent.target);
+        focusCell = getDOMCellInTableFromTarget(tableElement, moveTarget);
       } else {
-        for (const el of document.elementsFromPoint(
+        // Resolve via the table's own root so elementsFromPoint isn't
+        // retargeted; narrow with the type guards rather than casting so the
+        // detached-table case (Node) falls through to no hit-test.
+        const tableRoot = tableElement.getRootNode();
+        if (!isDOMDocumentNode(tableRoot) && !isDOMShadowRoot(tableRoot)) {
+          return;
+        }
+        for (const el of tableRoot.elementsFromPoint(
           moveEvent.clientX,
           moveEvent.clientY,
         )) {
@@ -402,8 +417,9 @@ export function applyTableHandlers(
   );
 
   const onTripleClick = (event: MouseEvent) => {
-    if (event.detail >= 3 && isDOMNode(event.target)) {
-      const targetCell = getDOMCellFromTarget(event.target);
+    const target = getComposedEventTarget(event);
+    if (event.detail >= 3 && isDOMNode(target)) {
+      const targetCell = getDOMCellFromTarget(target);
       if (targetCell !== null) {
         event.preventDefault();
       }
@@ -1084,11 +1100,14 @@ function $fixTableSelectionForSelectedTable(
   const tableNode = $getTableNodeByKeyOrThrow(selection.tableKey);
   // if selection goes outside of the table we need to change it to Range selection
   const domSelection = getDOMSelection(editorWindow);
-  if (domSelection && domSelection.anchorNode && domSelection.focusNode) {
-    const focusNode = $getNearestNodeFromDOMNode(domSelection.focusNode);
+  const points =
+    domSelection &&
+    getDOMSelectionPoints(domSelection, editor.getRootElement());
+  if (domSelection && points && points.anchorNode && points.focusNode) {
+    const focusNode = $getNearestNodeFromDOMNode(points.focusNode);
     const isFocusOutside = focusNode && !tableNode.isParentOf(focusNode);
 
-    const anchorNode = $getNearestNodeFromDOMNode(domSelection.anchorNode);
+    const anchorNode = $getNearestNodeFromDOMNode(points.anchorNode);
     const isAnchorInside = anchorNode && tableNode.isParentOf(anchorNode);
 
     if (isFocusOutside && isAnchorInside && domSelection.rangeCount > 0) {
@@ -2160,7 +2179,15 @@ function $handleArrowKey(
           return false;
         }
 
-        const range = domSelection.getRangeAt(0);
+        // getDOMSelectionRange rather than getRangeAt(0), which is retargeted
+        // to the shadow host when the editor is in a shadow tree
+        const range = getDOMSelectionRange(
+          domSelection,
+          editor.getRootElement(),
+        );
+        if (range === null) {
+          return false;
+        }
         edgeSelectionRect = range.getBoundingClientRect();
       }
 
@@ -2330,7 +2357,10 @@ function $getTableEdgeCursorPosition(
   if (!domSelection) {
     return undefined;
   }
-  const domAnchorNode = domSelection.anchorNode;
+  const domAnchorNode = getDOMSelectionPoints(
+    domSelection,
+    editor.getRootElement(),
+  ).anchorNode;
   const tableNodeParentDOM = editor.getElementByKey(tableNodeParent.getKey());
   const tableElement = getTableElement(
     tableNode,
diff --git a/packages/lexical-utils/src/index.ts b/packages/lexical-utils/src/index.ts
index 41b8b24c2e5..51329a679e0 100644
--- a/packages/lexical-utils/src/index.ts
+++ b/packages/lexical-utils/src/index.ts
@@ -12,6 +12,7 @@ import {
   $getSlotFrame,
   CAN_USE_BEFORE_INPUT,
   CAN_USE_DOM,
+  getParentElement,
   IS_ANDROID,
   IS_ANDROID_CHROME,
   IS_APPLE,
@@ -969,9 +970,13 @@ export function calculateZoomLevel(
 ): number {
   let zoom = 1;
   if (needsManualZoom() || useManualZoom) {
+    // Read styles from the element's own realm so an iframe-mounted editor's
+    // zoom isn't computed through the top-level window (cross-realm
+    // getComputedStyle can return an empty zoom).
+    const win = (element && element.ownerDocument.defaultView) || window;
     while (element) {
-      zoom *= Number(window.getComputedStyle(element).getPropertyValue('zoom'));
-      element = element.parentElement;
+      zoom *= Number(win.getComputedStyle(element).getPropertyValue('zoom'));
+      element = getParentElement(element);
     }
   }
   return zoom;
diff --git a/packages/lexical-utils/src/selectionAlwaysOnDisplay.ts b/packages/lexical-utils/src/selectionAlwaysOnDisplay.ts
index 40edb092771..deb9a6bc594 100644
--- a/packages/lexical-utils/src/selectionAlwaysOnDisplay.ts
+++ b/packages/lexical-utils/src/selectionAlwaysOnDisplay.ts
@@ -6,7 +6,7 @@
  *
  */
 
-import {LexicalEditor} from 'lexical';
+import {getDOMSelectionPoints, LexicalEditor} from 'lexical';
 
 import markSelection from './markSelection';
 
@@ -17,9 +17,23 @@ export default function selectionAlwaysOnDisplay(
   let removeSelectionMark: (() => void) | null = null;
 
   const onSelectionChange = () => {
-    const domSelection = getSelection();
-    const domAnchorNode = domSelection && domSelection.anchorNode;
     const editorRootElement = editor.getRootElement();
+    // Read the selection from the editor's own document/window so iframe-
+    // mounted editors don't fall back to the global one. The selectionchange
+    // listener below is registered on rootElement.ownerDocument, so this
+    // matches the event's source.
+    const targetWindow =
+      editorRootElement !== null
+        ? editorRootElement.ownerDocument.defaultView
+        : null;
+    const domSelection =
+      targetWindow !== null ? targetWindow.getSelection() : null;
+    // Shadow-aware anchor so the contains() check below isn't fooled by the
+    // retargeted host.
+    const domAnchorNode =
+      domSelection !== null
+        ? getDOMSelectionPoints(domSelection, editorRootElement).anchorNode
+        : null;
 
     const isSelectionInsideEditor =
       domAnchorNode !== null &&
diff --git a/packages/lexical-website/docs/concepts/dom-events.md b/packages/lexical-website/docs/concepts/dom-events.md
index d0aa4284c4c..ee4a93fdbad 100644
--- a/packages/lexical-website/docs/concepts/dom-events.md
+++ b/packages/lexical-website/docs/concepts/dom-events.md
@@ -74,3 +74,9 @@ If you're using React, we've wrapped approach #2 up into a simple LexicalCompose
     />
 </LexicalComposer>
 ```
+
+If the editor lives inside a shadow root or an iframe, see
+[Shadow DOM and iframes](./shadow-dom.md) for the helper to read
+`event.target` through the shadow boundary — the browser retargets it to the
+shadow host on listeners attached above the boundary, so a plain
+`event.target` won't match a node inside the editor.
diff --git a/packages/lexical-website/docs/concepts/selection.md b/packages/lexical-website/docs/concepts/selection.md
index 9902eb310f3..518eb6b12b1 100644
--- a/packages/lexical-website/docs/concepts/selection.md
+++ b/packages/lexical-website/docs/concepts/selection.md
@@ -165,3 +165,15 @@ editor.update(
   },
 );
 ```
+
+## Reading selection across a shadow boundary
+
+If your plugin reads the DOM selection directly — through
+`Selection.anchorNode`, `Selection.getRangeAt(0)`, or similar — and the
+editor's `contentEditable` lives inside a `ShadowRoot`, the browser retargets
+those reads to the shadow host. See
+[Shadow DOM and iframes](./shadow-dom.md) for the shadow-aware helpers
+(`getDOMSelectionPoints`, `getDOMSelectionRange`, etc.) that return the
+un-retargeted boundary points; they fall through to the standard reads in the
+plain light DOM, so there's nothing to do until you actually mount the editor
+in a shadow tree.
diff --git a/packages/lexical-website/docs/concepts/shadow-dom.md b/packages/lexical-website/docs/concepts/shadow-dom.md
new file mode 100644
index 00000000000..786d4c0dde1
--- /dev/null
+++ b/packages/lexical-website/docs/concepts/shadow-dom.md
@@ -0,0 +1,386 @@
+---
+sidebar_label: Shadow DOM and iframes
+---
+
+# Shadow DOM and iframes
+
+A Lexical editor works when its `contentEditable` lives inside an **open**
+[DOM `ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) (for
+example inside a [web component](https://developer.mozilla.org/docs/Web/API/Web_components))
+or inside an `<iframe>` document. Both are supported out of the box — you only
+have to point the editor at the right root element.
+
+## Embedding in a shadow root
+
+Attach an open shadow root, render a `contentEditable` inside it, and pass that
+element to `editor.setRootElement` (or, with `@lexical/react`, portal the
+`ContentEditable` into the shadow root — React context flows across the portal,
+so the editor is built exactly as it would be in the light DOM):
+
+```js
+const host = document.querySelector('#editor-host');
+const shadow = host.attachShadow({mode: 'open'});
+const contentEditable = document.createElement('div');
+contentEditable.contentEditable = 'true';
+shadow.appendChild(contentEditable);
+
+editor.setRootElement(contentEditable);
+```
+
+Lexical detects the enclosing shadow root from the root element and resolves
+selection through it. There is nothing else to configure.
+
+### Why it needs platform support
+
+Inside a shadow tree the browser **retargets** the document's selection to the
+shadow host: `Selection.anchorNode`/`focusNode` and `Selection.getRangeAt`
+report the host element, not the node the caret is actually in, and
+`document.activeElement` reports the host rather than the focused element.
+Lexical works around this using only standard platform APIs:
+
+- Selection is read with
+  [`Selection.getComposedRanges`](https://developer.mozilla.org/docs/Web/API/Selection/getComposedRanges)
+  and [`Selection.direction`](https://developer.mozilla.org/docs/Web/API/Selection/direction),
+  which return the real (un‑retargeted) boundary points.
+- Focus is read with
+  [`ShadowRoot.activeElement`](https://developer.mozilla.org/docs/Web/API/DocumentOrShadowRoot/activeElement)
+  via [`Node.getRootNode`](https://developer.mozilla.org/docs/Web/API/Node/getRootNode).
+- Caret movement and word/line deletion use the native `Selection.modify`, and
+  selection is written with `Selection.setBaseAndExtent`, both of which operate
+  on shadow‑tree nodes directly.
+- Drop targets and image-drag hit‑tests resolve through
+  [`Document.caretPositionFromPoint`](https://developer.mozilla.org/docs/Web/API/Document/caretPositionFromPoint)
+  with the `shadowRoots` option so the dropped point lands on the real node
+  rather than the retargeted host.
+
+### Browser support
+
+The shadow-aware path requires the platform APIs listed above. Lexical falls
+back to the light‑DOM reads when those APIs are missing, so editors that don't
+live in a shadow tree keep working on any engine the rest of Lexical supports.
+
+| Platform API | Used for | Chrome / Edge | Firefox | Safari |
+| --- | --- | --- | --- | --- |
+| `Selection.getComposedRanges` | Reading the un‑retargeted boundary points | 137+ | 142+ | 17.0+ |
+| `Selection.direction` | Mapping the composed range back onto anchor/focus | 137+ | 126+ | 17.0+ |
+| `ShadowRoot.activeElement` | Resolving the focused element through the host | All modern | All modern | All modern |
+| `Document.caretPositionFromPoint({shadowRoots})` | Shadow-aware drop / drag hit-tests | 128+ | (not yet) | 18.1+ |
+
+Lexical also supports the legacy variadic form of `getComposedRanges` shipped by
+Safari 17 / 17.1, automatically choosing the dictionary or variadic call shape
+at runtime.
+
+### Closed shadow roots
+
+A closed shadow root (`{mode: 'closed'}`) hides its contents from outside code:
+`Node.getRootNode({composed: false})` returns the host on every external probe,
+and `Selection.getComposedRanges({shadowRoots})` ignores the closed root. The
+editor inside a closed shadow root cannot read its own selection through the
+host, so closed shadow roots are **not supported**.
+
+If you need style/markup encapsulation without selection isolation, mount the
+editor in an open shadow root with `delegatesFocus: true` instead — outside
+code can still observe focus and selection while CSS and markup remain
+encapsulated.
+
+### Styling
+
+Shadow trees do not inherit the document's stylesheets, so your editor/theme
+CSS has to live inside the shadow root. A `<style>` element appended to the
+root is the simplest option; a
+[constructable stylesheet](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet#constructor)
+adopted via `shadowRoot.adoptedStyleSheets` scales better when one stylesheet
+serves several editor instances. The playground's `ShadowDomWrapper` clones
+the page's existing `<link>` / `<style>` nodes into the shadow root so it can
+reuse Vite's HMR-managed stylesheets. This is a property of Shadow DOM, not
+of Lexical.
+
+CSS custom properties and inherited HTML attributes (`dir`, `lang`) cross
+the shadow boundary on their own, so a page-level rule like `:root {
+--editor-bg: #1c1d22; }` or a host attribute like `<my-editor dir="rtl"
+lang="ko">` propagates into the editor without further setup. User
+preference media queries (`@media (prefers-color-scheme: dark)`,
+`(prefers-reduced-motion: reduce)`, `(forced-colors: active)`) evaluate
+inside the shadow root just like outside; place them in the shadow-mounted
+stylesheet rather than the page sheet.
+
+## Embedding in an iframe
+
+An editor whose root element belongs to an `<iframe>` document is also
+supported. Lexical reads the editor's `window`/`document` from the root
+element (`rootElement.ownerDocument.defaultView`), so selection and focus are
+resolved against the iframe rather than the top‑level document:
+
+```js
+const iframeDoc = iframe.contentDocument;
+const contentEditable = iframeDoc.querySelector('#editor');
+
+// createEditor / setRootElement can run in the parent frame; the editor uses
+// the iframe's own window and document for selection and focus.
+editor.setRootElement(contentEditable);
+```
+
+Selection inside an iframe is **not** retargeted (an iframe is a separate
+document, not a shadow boundary), so `getComposedRanges` is not involved here —
+the iframe's own selection already reports the correct nodes.
+
+## Shadow-aware helpers
+
+If a plugin reads the DOM selection or the focused element directly, use the
+shadow/iframe‑aware helpers exported from `lexical` instead of
+`Selection.anchorNode` / `document.activeElement`, so it keeps working in these
+contexts. In the plain light DOM each helper degrades to the standard read
+without any extra cost.
+
+| Instead of | Use |
+| --- | --- |
+| `Selection.anchorNode` / `anchorOffset` / `focusNode` / `focusOffset` | `getDOMSelectionPoints(selection, rootElement)` |
+| `selection.getRangeAt(0)` | `getDOMSelectionRange(selection, rootElement)` |
+| Both shapes from one read | `getDOMSelectionRangeAndPoints(selection, rootElement)` |
+| `selection.getComposedRanges` raw call | `getComposedStaticRange(selection, rootElement)` |
+| `document.activeElement === el` | `getActiveElement(el) === el` |
+| Deepest focused element through nested shadow trees | `getActiveElementDeep(document)` |
+| `event.target` on a `composed: true` event listening above the shadow boundary | `getComposedEventTarget(event)` |
+| `node.getRootNode() instanceof ShadowRoot` (cross‑realm‑safe) | `isDOMShadowRoot(node)` |
+| Walking up to discover enclosing shadow roots | `getDOMShadowRoots(node)` |
+
+All nine helpers are marked `@experimental` while the surface stabilizes — the
+return shape may change, but the behavior in the light DOM is stable.
+
+### `getDOMSelectionPoints` read semantics
+
+In the light DOM `getDOMSelectionPoints` returns the live `Selection` itself,
+so each property read is deferred and `$updateDOMSelection` only pays for the
+synchronous style/layout recalculation that a `Selection.anchorNode` /
+`focusNode` read triggers when it actually needs the value. Inside a shadow
+tree the return is a snapshot taken at call time, including
+`Selection.direction` so callers can branch on it explicitly. Read the four
+points immediately after the call rather than caching the returned reference,
+or use `points === domSelection` to detect the alias path.
+
+If a future engine ships `getComposedRanges` without `Selection.direction`
+(no current configuration matches — every engine that ships the former
+also ships the latter), the snapshot's `direction` is `undefined` and
+anchor/focus default to the StaticRange's tree order; callers needing strict
+backward fidelity should check `direction !== undefined` before relying on
+the swap.
+
+## Form association
+
+A Lexical editor inside a [form-associated custom
+element](https://developer.mozilla.org/docs/Web/API/Web_components#form-associated_custom_elements)
+participates in a `<form>` like any built-in form control: submission carries
+the editor's value, form reset clears it, and validation flows through. The
+sketch:
+
+```js
+class LexicalEditorElement extends HTMLElement {
+  static formAssociated = true;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+  }
+
+  get value() {
+    return this.editor
+      ? JSON.stringify(this.editor.getEditorState().toJSON())
+      : '';
+  }
+
+  set value(serialized) {
+    if (this.editor && serialized !== '') {
+      this.editor.setEditorState(this.editor.parseEditorState(serialized));
+    }
+  }
+
+  connectedCallback() {
+    // `delegatesFocus: true` routes `host.focus()` (and implicit focus
+    // from `<label for="...">`) to the first focusable element inside
+    // the shadow root — for the editor that's the contentEditable.
+    const shadow =
+      this.shadowRoot ?? this.attachShadow({delegatesFocus: true, mode: 'open'});
+    const contentEditable = document.createElement('div');
+    contentEditable.contentEditable = 'true';
+    contentEditable.tabIndex = 0;
+    shadow.appendChild(contentEditable);
+
+    const editor = buildEditorFromExtensions(
+      defineExtension({name: 'lexical-editor-element'}),
+    );
+    editor.setRootElement(contentEditable);
+    this.editor = editor;
+
+    // Seed the form value so a submit before the user types still produces
+    // a non-empty serialized state, mirroring `<input value="...">`.
+    this.internals.setFormValue(this.value);
+
+    editor.registerUpdateListener(({dirtyElements, dirtyLeaves}) => {
+      // Only fire on real content changes, not on pure selection updates —
+      // matches HTMLInputElement's `input` event contract.
+      if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+      this.internals.setFormValue(this.value);
+      this.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
+    });
+  }
+}
+```
+
+Without the dirty-leaf/element gate every caret move would wake the form's
+`oninput` listeners, so the `input` event matches `HTMLInputElement`'s
+contract only after that guard. The initial `setFormValue` is what keeps a
+form submission before the user types from carrying an empty value, since
+the update listener has not fired yet at that point. A full reference
+implementation lives in
+[`dev-examples/shadow-dom-web-component`](https://github.com/facebook/lexical/tree/main/dev-examples/shadow-dom-web-component).
+
+DOM moves (re-parenting the host into a different `<form>` or list) trigger
+`disconnectedCallback` followed by `connectedCallback`, which rebuilds the
+editor against a fresh contentEditable. Round-trip the user's content the
+same way `<input>` and `<textarea>` round-trip their `value` attribute:
+cache the serialized state in `disconnectedCallback` and replay it through
+`parseEditorState` on the next mount. The reference dev example uses a
+`pendingState` field for exactly this.
+
+The same form-associated host can also implement the rest of the
+[form-associated callbacks](https://developer.mozilla.org/docs/Web/API/Web_components/Using_custom_elements#form-associated_callbacks):
+`formStateRestoreCallback(state, reason)` re-hydrates the editor on bfcache
+navigation (`reason: 'restore'`) or form autocomplete restore
+(`reason: 'autocomplete'`); `formAssociatedCallback(form)` reacts to
+programmatic form moves; `formResetCallback()` clears the editor when the
+surrounding form is reset; and `formDisabledCallback(isDisabled)` flips the
+editor's editable state when an ancestor `<fieldset disabled>` toggles. The
+serialized JSON `internals.setFormValue` published earlier is what comes
+back in the state-restore callback.
+
+## Common pitfalls
+
+Moving an existing editor into a shadow root exposes a handful of recurring
+mismatches between the DOM APIs you'd reach for and what they report.
+
+### Event retargeting
+
+Listeners above the shadow boundary — `window`, `document`'s
+`selectionchange`, popups portaled to `document.body` — see `event.target`
+retargeted to the shadow host, not the actual clicked element. A
+`rootElement.contains(event.target)` gate therefore always rejects clicks
+that came from the editor. Resolve through the composed path:
+
+```js
+const target = getComposedEventTarget(event);
+if (target instanceof Node && rootElement.contains(target)) {
+  // click really did land inside the shadow-hosted editor
+}
+```
+
+### Focus probes
+
+`document.activeElement` reports the host when focus is inside an open
+shadow tree, so `document.activeElement === rootElement` is always false.
+`getActiveElement(rootElement)` reads `DocumentOrShadowRoot.activeElement`
+through `Node.getRootNode` instead, and `getActiveElementDeep` keeps
+descending into nested shadow roots when an editor whose decorator embeds a
+web component needs the innermost focused element.
+
+```js
+if (getActiveElement(rootElement) === rootElement) { ... }
+```
+
+### Outside-click handlers
+
+A typical dropdown registers `document.addEventListener('click', ...)` and
+calls `setShowDropDown(false)` whenever `button.contains(event.target)` is
+false. From inside a shadow tree that check always fails (the target is the
+host), so the dropdown closes on the very click that opened it. Compare
+against `getComposedEventTarget(event)` instead — the same fix Lexical's
+`LexicalMenu` and the playground's `DropDown` use.
+
+### Drop hit-tests
+
+`document.caretRangeFromPoint` and the no-argument
+`document.caretPositionFromPoint` return the host when the pointer is over
+shadow content, so an image drop lands on the host rather than the textnode
+under the cursor. `@lexical/clipboard/caretFromPoint` switches to
+`caretPositionFromPoint(x, y, {shadowRoots})` when `rootElement` lives in a
+shadow tree, and verifies the returned offset node really did land inside
+one of the requested shadow roots — engines that silently ignore the option
+fall through to the legacy paths.
+
+### Style mirror cleanup
+
+If your shadow mount mirrors `<style>` / `<link>` nodes from `document.head`
+and watches for additions via `MutationObserver`, mirror removals too;
+otherwise stylesheets removed by HMR or a runtime theme swap linger inside
+the shadow. `ShadowDomWrapper` tracks an `original → clone` map so an
+upstream removal drops the corresponding clone, and on unmount it removes
+every clone so React 18 StrictMode's double-mount can't accumulate
+duplicates through the persistent shadow root.
+
+Dev-mode HMR has two paths that a `childList`-only observer misses.
+Firefox replaces a `<style>`'s text content in place, so the observer
+needs `characterData + subtree` to see the mutation; Chrome and WebKit
+update CSS through the CSSOM (`style.sheet.replaceSync` / `insertRule`),
+which the DOM observer never sees at all. `ShadowDomWrapper` also
+subscribes to Vite's `vite:afterUpdate` hook for an explicit resync of
+every clone after each HMR pass — `import.meta.hot` is `undefined` in
+production builds, so the hook is a no-op outside dev.
+
+### Popover and dialog layout
+
+The UA stylesheet defaults a closed
+[Popover](https://developer.mozilla.org/docs/Web/API/Popover_API) (or a
+`<dialog>` without `open`) to `display: none`. A base rule like
+`#my-popover { display: flex; ... }` overrides that and leaves the popover
+visible after `hidePopover()`. Scope layout to the open state instead —
+`#my-popover:popover-open { display: flex; }` — so the closed state honors
+the UA default. This is a popover-API gotcha, not a shadow-specific one,
+but it surfaces here because floating UI anchored to a shadow-root
+selection (a format popover or link editor that reads coordinates through
+`getDOMSelectionRangeAndPoints`) is a common shadow integration pattern.
+
+### Observers across the shadow boundary
+
+`ResizeObserver`, `IntersectionObserver`, and `MutationObserver` observe
+nodes inside an open shadow root with no special configuration — pass the
+inner node (the contentEditable or the host) just like any other DOM
+target. A `MutationObserver` registered on the host does not see mutations
+inside the shadow tree, though; observe the contentEditable or a
+shadow-internal container instead. The host's `attributeChangedCallback`
+covers the host's own attribute changes.
+
+## Migrating an existing light-DOM editor
+
+The same code shape keeps working in a shadow root; migration is mostly
+about removing pre-shadow workarounds. Direct selection reads
+(`Selection.anchorNode`, `Selection.getRangeAt(0)`,
+`document.querySelector('[contenteditable]')` used as an editor probe) route
+through `getDOMSelectionPoints` / `getDOMSelectionRange` /
+`getActiveElement`, and any `event.target` read above the shadow boundary
+becomes `getComposedEventTarget(event)`. CSS variables inherit through the
+shadow boundary but class declarations don't, so the editor/theme CSS has
+to be adopted or cloned into the shadow root.
+
+The focus and popup paths are the ones that surprise people in review:
+outside-click handlers, blur-then-refocus, and "did the editor lose focus?"
+probes usually need `getActiveElement(rootElement)` rather than
+`document.activeElement`; floating UI that portals into `document.body` and
+resolves hover with `element.getRootNode().elementFromPoint(x, y)` keeps the
+same call shape but has to guard the popup root narrowing against a
+detached popup whose `getRootNode()` returns itself.
+
+## Examples
+
+Runnable examples live in the repository:
+
+- [`dev-examples/shadow-dom`](https://github.com/facebook/lexical/tree/main/dev-examples/shadow-dom)
+  — a React editor inside a shadow root with a light‑DOM toolbar.
+- [`dev-examples/shadow-dom-web-component`](https://github.com/facebook/lexical/tree/main/dev-examples/shadow-dom-web-component)
+  — a framework‑free `<lexical-editor>` custom element, form‑associated via
+  `ElementInternals`. The page also mounts one instance inside a wrapper
+  `<div>` that opens its own shadow root, exercising the multi‑level
+  walk through two nested shadow boundaries.
+- [`examples/vanilla-js-iframe`](https://github.com/facebook/lexical/tree/main/examples/vanilla-js-iframe)
+  — an editor rendered into an `<iframe>`.
+- The playground's **Render in Shadow DOM** setting toggles the same editor
+  between light and shadow mounts, useful for spot-checking your plugins
+  against both modes.
\ No newline at end of file
diff --git a/packages/lexical-website/sidebars.js b/packages/lexical-website/sidebars.js
index 921d710edd4..6ec7f2de38f 100644
--- a/packages/lexical-website/sidebars.js
+++ b/packages/lexical-website/sidebars.js
@@ -53,6 +53,7 @@ const sidebars = {
         'concepts/read-only',
         'concepts/history',
         'concepts/dom-events',
+        'concepts/shadow-dom',
         'concepts/traversals',
         'concepts/updates',
       ],
diff --git a/packages/lexical-yjs/src/SyncCursors.ts b/packages/lexical-yjs/src/SyncCursors.ts
index 500e4d72fc8..dc0df613c71 100644
--- a/packages/lexical-yjs/src/SyncCursors.ts
+++ b/packages/lexical-yjs/src/SyncCursors.ts
@@ -23,6 +23,8 @@ import {
   $isLineBreakNode,
   $isRangeSelection,
   $isTextNode,
+  getRootOwnerDocument,
+  isDOMShadowRoot,
   setDOMStyleObject,
 } from 'lexical';
 import {
@@ -75,22 +77,50 @@ const SUPPORTS_CSS_HIGHLIGHTS =
   'highlights' in CSS;
 
 /**
- * Resolve the per-binding stylesheet that hosts `::highlight(...)` rules.
+ * The subset of a binding that {@link getCursorHighlightSheet} reads. Declared
+ * structurally so callers pass a full binding and tests pass a lightweight stub,
+ * neither needing a cast.
+ *
+ * @internal
  */
-function getCursorHighlightSheet(binding: BaseBinding): CSSStyleSheet {
-  if (binding.cursorHighlightSheet === null) {
-    const rootElement = binding.editor.getRootElement();
-    const ownerDocument =
-      rootElement !== null ? rootElement.ownerDocument : document;
+export interface CursorHighlightSheetBinding {
+  cursorHighlightSheet: CSSStyleSheet | null;
+  editor: {getRootElement: () => HTMLElement | null};
+}
+
+/**
+ * Resolve the per-binding stylesheet that hosts `::highlight(...)` rules,
+ * re-adopting it into the editor's current tree scope (document or shadow
+ * root) on every call.
+ *
+ * The editor root can move between the light DOM and a shadow root (a
+ * shadow-DOM toggle) without recreating the binding, and `::highlight()` rules
+ * only apply in the tree scope that owns the highlighted ranges, so the sheet
+ * is re-homed each call. A leftover adoption in a previously-used scope is
+ * harmless: shadow encapsulation means a rule there cannot match ranges in the
+ * new scope.
+ *
+ * @internal Exported for tests; not part of the package's public API.
+ */
+export function getCursorHighlightSheet(
+  binding: CursorHighlightSheetBinding,
+): CSSStyleSheet {
+  const rootElement = binding.editor.getRootElement();
+  const ownerDocument = getRootOwnerDocument(rootElement);
+  let sheet = binding.cursorHighlightSheet;
+  if (sheet === null) {
     const view = ownerDocument.defaultView || window;
-    const sheet = new view.CSSStyleSheet();
-    ownerDocument.adoptedStyleSheets = [
-      ...ownerDocument.adoptedStyleSheets,
-      sheet,
-    ];
+    sheet = new view.CSSStyleSheet();
     binding.cursorHighlightSheet = sheet;
   }
-  return binding.cursorHighlightSheet;
+  const root = rootElement !== null ? rootElement.getRootNode() : null;
+  const target: Document | ShadowRoot = isDOMShadowRoot(root)
+    ? root
+    : ownerDocument;
+  if (!target.adoptedStyleSheets.includes(sheet)) {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, sheet];
+  }
+  return sheet;
 }
 
 function addCursorHighlightRule(
diff --git a/packages/lexical-yjs/src/__tests__/browser/SyncCursorsHighlightSheet.test.ts b/packages/lexical-yjs/src/__tests__/browser/SyncCursorsHighlightSheet.test.ts
new file mode 100644
index 00000000000..3103079ac6e
--- /dev/null
+++ b/packages/lexical-yjs/src/__tests__/browser/SyncCursorsHighlightSheet.test.ts
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {afterEach, beforeEach, describe, expect, test} from 'vitest';
+
+import {
+  type CursorHighlightSheetBinding,
+  getCursorHighlightSheet,
+} from '../../SyncCursors';
+
+// Runs in a real browser (vitest browser mode) because getCursorHighlightSheet
+// uses constructable stylesheets and `adoptedStyleSheets` on Document and
+// ShadowRoot — APIs jsdom does not implement.
+
+function makeBinding(rootElement: HTMLElement): CursorHighlightSheetBinding {
+  return {
+    cursorHighlightSheet: null,
+    editor: {getRootElement: () => rootElement},
+  };
+}
+
+describe('getCursorHighlightSheet', () => {
+  const created: HTMLElement[] = [];
+  let documentSheets: readonly CSSStyleSheet[];
+  let adoptedStyleSheets: CSSStyleSheet[];
+
+  beforeEach(() => {
+    // eslint-disable-next-line compat/compat
+    adoptedStyleSheets = document.adoptedStyleSheets;
+    documentSheets = [...adoptedStyleSheets];
+  });
+  afterEach(() => {
+    // Restore the document's sheets and detach anything these tests created so
+    // adoptions don't leak across tests sharing the page.
+    let el: undefined | HTMLElement;
+    while ((el = created.pop())) {
+      el.remove();
+    }
+    adoptedStyleSheets.splice(0, adoptedStyleSheets.length, ...documentSheets);
+  });
+
+  test('adopts the sheet into the document for a light-DOM editor', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    created.push(root);
+
+    const sheet = getCursorHighlightSheet(makeBinding(root));
+    expect(adoptedStyleSheets).toContain(sheet);
+  });
+
+  test('re-homes the cached sheet when the editor root moves into a shadow root', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    created.push(root);
+    const binding = makeBinding(root);
+
+    const sheet = getCursorHighlightSheet(binding);
+    expect(adoptedStyleSheets).toContain(sheet);
+
+    // Shadow-DOM toggle: move the same root into an open shadow root without
+    // recreating the binding. The cached sheet must follow it into the shadow
+    // scope; otherwise ::highlight() rules no longer reach the moved ranges and
+    // remote-cursor highlights stop rendering.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    created.push(host);
+    const shadow = host.attachShadow({mode: 'open'});
+    shadow.appendChild(root);
+
+    const sheetAfterToggle = getCursorHighlightSheet(binding);
+    expect(sheetAfterToggle).toBe(sheet); // same cached sheet
+    expect(shadow.adoptedStyleSheets).toContain(sheet); // re-homed
+  });
+
+  test('does not duplicate the sheet on repeated calls in the same scope', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    created.push(root);
+    const binding = makeBinding(root);
+
+    const sheet = getCursorHighlightSheet(binding);
+    getCursorHighlightSheet(binding);
+    getCursorHighlightSheet(binding);
+
+    expect(adoptedStyleSheets.filter(s => s === sheet).length).toBe(1);
+  });
+});
diff --git a/packages/lexical/flow/Lexical.js.flow b/packages/lexical/flow/Lexical.js.flow
index 94545ab8fc2..bcc659037b9 100644
--- a/packages/lexical/flow/Lexical.js.flow
+++ b/packages/lexical/flow/Lexical.js.flow
@@ -1238,6 +1238,50 @@ declare export function $isElementDOMSlot(
 ): slot is ElementDOMSlot<HTMLElement>;
 declare export var DEFAULT_EDITOR_DOM_CONFIG: EditorDOMRenderConfig;
 
+// Flow's built-in DOM lib doesn't expose StaticRange yet; declare the
+// minimal shape we need for the shadow-aware selection helpers below.
+declare type StaticRange = {
+  +startContainer: Node,
+  +startOffset: number,
+  +endContainer: Node,
+  +endOffset: number,
+  +collapsed: boolean,
+};
+
+export type DOMSelectionBoundaryPoints = {
+  anchorNode: Node | null,
+  anchorOffset: number,
+  direction?: void | 'forward' | 'backward' | 'none',
+  focusNode: Node | null,
+  focusOffset: number,
+};
+declare export function isDOMShadowRoot(node: mixed): boolean;
+declare export function findAllLexicalElementsDeep(root: Document | ShadowRoot): Generator<Element, void, void>;
+declare export function getDOMShadowRoots(node: Node): ShadowRoot[];
+declare export function getParentElement(node: Node): HTMLElement | null;
+declare export function getRootOwnerDocument(rootElement: HTMLElement | null): Document;
+declare export function getComposedStaticRange(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): StaticRange | null;
+declare export function getDOMSelectionRange(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): Range | null;
+declare export function getDOMSelectionPoints(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): DOMSelectionBoundaryPoints;
+declare export function getDOMSelectionRangeAndPoints(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): {points: DOMSelectionBoundaryPoints, range: Range | null};
+declare export function getActiveElement(node: Node): Element | null;
+declare export function getActiveElementDeep(
+  root: Document | ShadowRoot,
+): Element | null;
+declare export function getComposedEventTarget(event: Event): EventTarget | null;
+
 /**
  * LexicalNormalization
  */
diff --git a/packages/lexical/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts
index 0b7cbcef183..986b7b2990d 100644
--- a/packages/lexical/src/LexicalEditor.ts
+++ b/packages/lexical/src/LexicalEditor.ts
@@ -62,6 +62,7 @@ import {
   getCachedTypeToNodeMap,
   getDefaultView,
   getDOMSelection,
+  getParentElement,
   getRegisteredNode,
   getStaticNodeConfig,
   hasOwnStaticMethod,
@@ -1564,7 +1565,7 @@ export class LexicalEditor {
           nextRootElement.classList.add(...classNames);
         }
         if (__DEV__) {
-          const nextRootElementParent = nextRootElement.parentElement;
+          const nextRootElementParent = getParentElement(nextRootElement);
           if (
             nextRootElementParent != null &&
             ['flex', 'inline-flex'].includes(
diff --git a/packages/lexical/src/LexicalEvents.ts b/packages/lexical/src/LexicalEvents.ts
index 013b913989c..ba23a0788f7 100644
--- a/packages/lexical/src/LexicalEvents.ts
+++ b/packages/lexical/src/LexicalEvents.ts
@@ -108,9 +108,14 @@ import {
   $updateTextNodeFromDOMContent,
   dispatchCommand,
   doesContainSurrogatePair,
+  type DOMSelectionBoundaryPoints,
+  getActiveElementDeep,
   getAnchorTextFromDOM,
+  getComposedEventTarget,
+  getDOMOwnerDocument,
   getDOMSelection,
   getDOMSelectionFromTarget,
+  getDOMSelectionPoints,
   getEditorPropertyFromDOMNode,
   getEditorsToPropagate,
   getNearestEditorFromDOMNode,
@@ -128,6 +133,7 @@ import {
   isDeleteWordForward,
   isDOMCapturingSelection,
   isDOMNode,
+  isDOMShadowRoot,
   isDOMTextNode,
   isEscape,
   isFirefoxClipboardEvents,
@@ -195,7 +201,24 @@ let handledSelectionCommandTimeoutId: null | ReturnType<typeof setTimeout> =
 // Node can be moved between documents (for example using createPortal), so we
 // need to track the document each root element was originally registered on.
 const rootElementToDocument = new WeakMap<HTMLElement, Document>();
-const rootElementsRegistered = new WeakMap<Document, number>();
+// Per-document state for the shared `selectionchange` listener, keyed by the
+// document each root element was registered against:
+// - `rootElementCount` gates the single listener (attached while > 0).
+// - `editors` is the candidate set `onDocumentSelectionChange` attributes the
+//   event to, using each editor's shadow-aware anchor rather than guessing from
+//   `Selection.anchorNode` (retargeted to a light-DOM ancestor inside a shadow
+//   tree).
+// - `hasShadowEditor` caches whether any editor here is shadow-mounted
+//   (`undefined` = needs recompute), so the handler avoids an O(editors)
+//   `getRootNode()` scan per selectionchange. Invalidated whenever the editor
+//   set changes — which, via setRootElement, is where an editor's root (and
+//   thus its shadow-mounted status) is rebound.
+interface DocumentRegistration {
+  editors: Set<LexicalEditor>;
+  hasShadowEditor: boolean | undefined;
+  rootElementCount: number;
+}
+const documentRegistrations = new WeakMap<Document, DocumentRegistration>();
 let isSelectionChangeFromDOMUpdate = false;
 let isSelectionChangeFromMouseDown = false;
 let isInsertLineBreak = false;
@@ -223,13 +246,24 @@ function $shouldPreventDefaultAndInsertText(
   text: string,
   timeStamp: number,
   isBeforeInput: boolean,
+  cachedDOMSelectionPoints?: DOMSelectionBoundaryPoints | null,
 ): boolean {
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorNode = anchor.getNode();
   const editor = getActiveEditor();
-  const domSelection = getDOMSelection(getWindow(editor));
-  const domAnchorNode = domSelection !== null ? domSelection.anchorNode : null;
+  let domSelectionPoints: DOMSelectionBoundaryPoints | null;
+  if (cachedDOMSelectionPoints !== undefined) {
+    domSelectionPoints = cachedDOMSelectionPoints;
+  } else {
+    const domSelection = getDOMSelection(getWindow(editor));
+    domSelectionPoints =
+      domSelection !== null
+        ? getDOMSelectionPoints(domSelection, editor._rootElement)
+        : null;
+  }
+  const domAnchorNode =
+    domSelectionPoints !== null ? domSelectionPoints.anchorNode : null;
   const anchorKey = anchor.key;
   const backingAnchorElement = editor.getElementByKey(anchorKey);
   const textLength = text.length;
@@ -266,11 +300,11 @@ function $shouldPreventDefaultAndInsertText(
         $getDOMTextNode(anchorNode, backingAnchorElement, editor)) ||
     // If TargetRange is not the same as the DOM selection; browser trying to edit random parts
     // of the editor.
-    (domSelection !== null &&
+    (domSelectionPoints !== null &&
       domTargetRange !== null &&
       (!domTargetRange.collapsed ||
-        domTargetRange.startContainer !== domSelection.anchorNode ||
-        domTargetRange.startOffset !== domSelection.anchorOffset)) ||
+        domTargetRange.startContainer !== domSelectionPoints.anchorNode ||
+        domTargetRange.startOffset !== domSelectionPoints.anchorOffset)) ||
     // Check if we're changing from bold to italics, or some other format.
     (!anchorNode.isComposing() &&
       (anchorNode.getFormat() !== selection.format ||
@@ -297,12 +331,14 @@ function onSelectionChange(
   editor: LexicalEditor,
   isActive: boolean,
 ): void {
+  // Shadow-aware boundary points so isSelectionWithinEditor below isn't
+  // fooled by the retargeted shadow host into dropping the selection.
   const {
     anchorNode: anchorDOM,
     anchorOffset,
     focusNode: focusDOM,
     focusOffset,
-  } = domSelection;
+  } = getDOMSelectionPoints(domSelection, editor._rootElement);
   if (isSelectionChangeFromDOMUpdate) {
     isSelectionChangeFromDOMUpdate = false;
 
@@ -366,10 +402,7 @@ function onSelectionChange(
 
       if (selection.isCollapsed()) {
         // Badly interpreted range selection when collapsed - #1482
-        if (
-          domSelection.type === 'Range' &&
-          domSelection.anchorNode === domSelection.focusNode
-        ) {
+        if (domSelection.type === 'Range' && anchorDOM === focusDOM) {
           selection.dirty = true;
         }
 
@@ -524,7 +557,11 @@ function onClick(event: PointerEvent, editor: LexicalEditor): void {
       } else if (event.pointerType === 'touch' || event.pointerType === 'pen') {
         // This is used to update the selection on touch devices (including Apple Pencil) when the user clicks on text after a
         // node selection. See isSelectionChangeFromMouseDown for the inverse
-        const domAnchorNode = domSelection.anchorNode;
+        const domSelectionPoints = getDOMSelectionPoints(
+          domSelection,
+          editor._rootElement,
+        );
+        const domAnchorNode = domSelectionPoints.anchorNode;
         // If the user is attempting to click selection back onto text, then
         // we should attempt create a range selection.
         // When we click on an empty paragraph node or the end of a paragraph that ends
@@ -547,7 +584,10 @@ function onClick(event: PointerEvent, editor: LexicalEditor): void {
 
 function onPointerDown(event: PointerEvent, editor: LexicalEditor) {
   // TODO implement text drag & drop
-  const target = event.target;
+  // Resolve to the composed target so a pointerdown inside a decorator's
+  // open shadow root reports the real internal element rather than the
+  // outer shadow host the engine retargets to.
+  const target = getComposedEventTarget(event);
   const pointerType = event.pointerType;
   if (
     isDOMNode(target) &&
@@ -1081,9 +1121,12 @@ function onInput(event: InputEvent, editor: LexicalEditor): void {
 
 function $handleInput(event: InputEvent): boolean {
   const editor = getActiveEditor();
+  // Use the composed target so a beforeinput coming from inside a
+  // decorator's nested shadow root resolves to the real internal element.
+  const composedTarget = getComposedEventTarget(event);
   if (
-    isHTMLElement(event.target) &&
-    isDOMCapturingSelection(event.target, editor)
+    isHTMLElement(composedTarget) &&
+    isDOMCapturingSelection(composedTarget, editor)
   ) {
     return true;
   }
@@ -1091,74 +1134,83 @@ function $handleInput(event: InputEvent): boolean {
   const data = event.data;
   const targetRange = getTargetRange(event);
 
-  if (
-    data != null &&
-    $isRangeSelection(selection) &&
-    $shouldPreventDefaultAndInsertText(
-      selection,
-      targetRange,
-      data,
-      event.timeStamp,
-      false,
-    )
-  ) {
-    // Given we're over-riding the default behavior, we will need
-    // to ensure to disable composition before dispatching the
-    // insertText command for when changing the sequence for FF.
-    if (isFirefoxEndingComposition) {
-      $onCompositionEndImpl(editor, data);
-      isFirefoxEndingComposition = false;
-    }
-    const anchor = selection.anchor;
-    const anchorNode = anchor.getNode();
+  let handled = false;
+  if (data != null && $isRangeSelection(selection)) {
     const domSelection = getDOMSelection(getWindow(editor));
-    if (domSelection === null) {
-      return true;
-    }
-    const isBackward = selection.isBackward();
-    const startOffset = isBackward
-      ? selection.anchor.offset
-      : selection.focus.offset;
-    const endOffset = isBackward
-      ? selection.focus.offset
-      : selection.anchor.offset;
-    // If the content is the same as inserted, then don't dispatch an insertion.
-    // Given onInput doesn't take the current selection (it uses the previous)
-    // we can compare that against what the DOM currently says.
+    const domSelectionPoints =
+      domSelection !== null
+        ? getDOMSelectionPoints(domSelection, editor._rootElement)
+        : null;
+
     if (
-      !CAN_USE_BEFORE_INPUT ||
-      selection.isCollapsed() ||
-      !$isTextNode(anchorNode) ||
-      domSelection.anchorNode === null ||
-      anchorNode.getTextContent().slice(0, startOffset) +
-        data +
-        anchorNode.getTextContent().slice(startOffset + endOffset) !==
-        getAnchorTextFromDOM(domSelection.anchorNode)
+      $shouldPreventDefaultAndInsertText(
+        selection,
+        targetRange,
+        data,
+        event.timeStamp,
+        false,
+        domSelectionPoints,
+      )
     ) {
-      dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
-    }
+      handled = true;
+      // Given we're over-riding the default behavior, we will need
+      // to ensure to disable composition before dispatching the
+      // insertText command for when changing the sequence for FF.
+      if (isFirefoxEndingComposition) {
+        $onCompositionEndImpl(editor, data);
+        isFirefoxEndingComposition = false;
+      }
+      const anchor = selection.anchor;
+      const anchorNode = anchor.getNode();
+      if (domSelection === null || domSelectionPoints === null) {
+        return true;
+      }
+      const isBackward = selection.isBackward();
+      const startOffset = isBackward
+        ? selection.anchor.offset
+        : selection.focus.offset;
+      const endOffset = isBackward
+        ? selection.focus.offset
+        : selection.anchor.offset;
+      // If the content is the same as inserted, then don't dispatch an insertion.
+      // Given onInput doesn't take the current selection (it uses the previous)
+      // we can compare that against what the DOM currently says.
+      if (
+        !CAN_USE_BEFORE_INPUT ||
+        selection.isCollapsed() ||
+        !$isTextNode(anchorNode) ||
+        domSelectionPoints.anchorNode === null ||
+        anchorNode.getTextContent().slice(0, startOffset) +
+          data +
+          anchorNode.getTextContent().slice(startOffset + endOffset) !==
+          getAnchorTextFromDOM(domSelectionPoints.anchorNode)
+      ) {
+        dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
+      }
 
-    const textLength = data.length;
+      const textLength = data.length;
 
-    // Another hack for FF, as it's possible that the IME is still
-    // open, even though compositionend has already fired (sigh).
-    if (
-      IS_FIREFOX &&
-      textLength > 1 &&
-      event.inputType === 'insertCompositionText' &&
-      !editor.isComposing()
-    ) {
-      selection.anchor.offset -= textLength;
-      selection._cachedNodes = null;
-      selection._cachedIsBackward = null;
-    }
+      // Another hack for FF, as it's possible that the IME is still
+      // open, even though compositionend has already fired (sigh).
+      if (
+        IS_FIREFOX &&
+        textLength > 1 &&
+        event.inputType === 'insertCompositionText' &&
+        !editor.isComposing()
+      ) {
+        selection.anchor.offset -= textLength;
+        selection._cachedNodes = null;
+        selection._cachedIsBackward = null;
+      }
 
-    // This ensures consistency on Android.
-    if (IS_ANDROID_CHROME && editor.isComposing()) {
-      lastKeyDownTimeStamp = 0;
-      $setCompositionKey(null);
+      // This ensures consistency on Android.
+      if (IS_ANDROID_CHROME && editor.isComposing()) {
+        lastKeyDownTimeStamp = 0;
+        $setCompositionKey(null);
+      }
     }
-  } else {
+  }
+  if (!handled) {
     const characterData = data !== null ? data : undefined;
     $updateSelectedTextFromDOM(false, editor, characterData);
 
@@ -1254,12 +1306,18 @@ function $onCompositionEndImpl(editor: LexicalEditor, data?: string): void {
         $isTextNode(node)
       ) {
         const domSelection = getDOMSelection(getWindow(editor));
+        const domSelectionPoints =
+          domSelection &&
+          getDOMSelectionPoints(domSelection, editor._rootElement);
         let anchorOffset = null;
         let focusOffset = null;
 
-        if (domSelection !== null && domSelection.anchorNode === textNode) {
-          anchorOffset = domSelection.anchorOffset;
-          focusOffset = domSelection.focusOffset;
+        if (
+          domSelectionPoints !== null &&
+          domSelectionPoints.anchorNode === textNode
+        ) {
+          anchorOffset = domSelectionPoints.anchorOffset;
+          focusOffset = domSelectionPoints.focusOffset;
         }
 
         $updateTextNodeFromDOMContent(
@@ -1465,7 +1523,109 @@ function onDocumentSelectionChange(event: Event): void {
   if (domSelection === null) {
     return;
   }
-  const nextActiveEditor = getNearestEditorFromDOMNode(domSelection.anchorNode);
+  // Ask each editor registered against this document for its shadow-aware
+  // anchor and pick the one whose root actually contains the answer.
+  // Selection.anchorNode is retargeted to a light-DOM ancestor for any
+  // selection inside a shadow tree, so trusting it directly attributes a
+  // shadow editor's change to whichever enclosing editor the engine
+  // walked up to (or drops the event when the host sits outside every
+  // editor). Reading getComposedRanges through each editor's own shadow
+  // roots gets the un-retargeted anchor regardless of which editor owns
+  // it.
+  //
+  // Nested case (inner shadow editor inside a light-DOM outer editor):
+  // visit shadow-mounted candidates first. The inner editor's anchor read
+  // resolves through its own shadow root and matches its candidate; the
+  // outer editor's degraded read (empty composed range → retargeted host
+  // landing inside outer's tree) never wins because we have already broken
+  // out of the loop.
+
+  const ownerDocument = getDOMOwnerDocument(event.target);
+  let nextActiveEditor: LexicalEditor | null = null;
+  let resolvedAnchorNode: Node | null = null;
+  if (ownerDocument !== null) {
+    const registration = documentRegistrations.get(ownerDocument);
+    if (registration !== undefined) {
+      const editorsForDoc = registration.editors;
+      let hasShadow = registration.hasShadowEditor;
+      if (hasShadow === undefined) {
+        hasShadow = false;
+        for (const ed of editorsForDoc) {
+          if (
+            ed._rootElement !== null &&
+            isDOMShadowRoot(ed._rootElement.getRootNode())
+          ) {
+            hasShadow = true;
+            break;
+          }
+        }
+        registration.hasShadowEditor = hasShadow;
+      }
+      if (!hasShadow) {
+        const anchorNode = domSelection.anchorNode;
+        if (
+          anchorNode !== null &&
+          !(isHTMLElement(anchorNode) && anchorNode.shadowRoot !== null)
+        ) {
+          nextActiveEditor = getNearestEditorFromDOMNode(anchorNode);
+          if (nextActiveEditor !== null) {
+            resolvedAnchorNode = anchorNode;
+          }
+        }
+      } else {
+        // Try shadow-mounted candidates first: their getDOMSelectionPoints
+        // call resolves the un-retargeted anchor through their own shadow
+        // root, so an inner shadow editor inside a light-DOM outer editor
+        // wins attribution before the outer candidate sees the host-retargeted
+        // anchor that lands inside outer's tree.
+        //
+        // Single pass with deferred light-DOM fallback avoids Array.from +
+        // sort and the redundant getRootNode calls the comparator needed.
+        let deferredLightEditor: LexicalEditor | null = null;
+        let deferredLightAnchor: Node | null = null;
+        for (const candidate of editorsForDoc) {
+          const candidateRoot = candidate._rootElement;
+          if (candidateRoot === null) {
+            continue;
+          }
+          const anchorNode = getDOMSelectionPoints(
+            domSelection,
+            candidateRoot,
+          ).anchorNode;
+          if (anchorNode === null) {
+            continue;
+          }
+          if (getNearestEditorFromDOMNode(anchorNode) !== candidate) {
+            continue;
+          }
+          if (isDOMShadowRoot(candidateRoot.getRootNode())) {
+            nextActiveEditor = candidate;
+            resolvedAnchorNode = anchorNode;
+            break;
+          }
+          if (deferredLightEditor === null) {
+            deferredLightEditor = candidate;
+            deferredLightAnchor = anchorNode;
+          }
+        }
+        if (nextActiveEditor === null && deferredLightEditor !== null) {
+          nextActiveEditor = deferredLightEditor;
+          resolvedAnchorNode = deferredLightAnchor;
+        }
+      }
+    }
+    // Fallback: the shadow-aware anchor sits outside every registered
+    // editor (a programmatic selection change that landed on a non-editor
+    // element, or a host the engine retargeted to). Use the deep-focused
+    // element so a user typing into an editor still gets an attribution.
+    if (nextActiveEditor === null) {
+      const activeElement = getActiveElementDeep(ownerDocument);
+      nextActiveEditor =
+        activeElement !== null
+          ? getNearestEditorFromDOMNode(activeElement)
+          : null;
+    }
+  }
   if (nextActiveEditor === null) {
     return;
   }
@@ -1474,7 +1634,10 @@ function onDocumentSelectionChange(event: Event): void {
     isSelectionChangeFromMouseDown = false;
     updateEditorSync(nextActiveEditor, () => {
       const lastSelection = $getPreviousSelection();
-      const domAnchorNode = domSelection.anchorNode;
+      const domAnchorNode =
+        resolvedAnchorNode ??
+        getDOMSelectionPoints(domSelection, nextActiveEditor._rootElement)
+          .anchorNode;
       if (isHTMLElement(domAnchorNode) || isDOMTextNode(domAnchorNode)) {
         // If the user is attempting to click selection back onto text, then
         // we should attempt create a range selection.
@@ -1538,11 +1701,21 @@ export function addRootElementEvents(
   // between all editor instances.
   const doc = rootElement.ownerDocument;
   rootElementToDocument.set(rootElement, doc);
-  const documentRootElementsCount = rootElementsRegistered.get(doc) ?? 0;
-  if (documentRootElementsCount < 1) {
+  let registration = documentRegistrations.get(doc);
+  if (registration === undefined) {
+    registration = {
+      editors: new Set(),
+      hasShadowEditor: undefined,
+      rootElementCount: 0,
+    };
+    documentRegistrations.set(doc, registration);
+  }
+  if (registration.rootElementCount < 1) {
     doc.addEventListener('selectionchange', onDocumentSelectionChange);
   }
-  rootElementsRegistered.set(doc, documentRootElementsCount + 1);
+  registration.rootElementCount += 1;
+  registration.editors.add(editor);
+  registration.hasShadowEditor = undefined;
 
   // @ts-expect-error: internal field
   rootElement.__lexicalEditor = editor;
@@ -1647,8 +1820,8 @@ export function removeRootElementEvents(rootElement: HTMLElement): void {
     return;
   }
 
-  const documentRootElementsCount = rootElementsRegistered.get(doc);
-  if (documentRootElementsCount === undefined) {
+  const registration = documentRegistrations.get(doc);
+  if (registration === undefined) {
     // This can happen if setRootElement() failed
     rootElementNotRegisteredWarning();
     return;
@@ -1656,10 +1829,10 @@ export function removeRootElementEvents(rootElement: HTMLElement): void {
 
   // We only want to have a single global selectionchange event handler, shared
   // between all editor instances.
-  const newCount = documentRootElementsCount - 1;
+  const newCount = registration.rootElementCount - 1;
   invariant(newCount >= 0, 'Root element count less than 0');
   rootElementToDocument.delete(rootElement);
-  rootElementsRegistered.set(doc, newCount);
+  registration.rootElementCount = newCount;
   if (newCount === 0) {
     doc.removeEventListener('selectionchange', onDocumentSelectionChange);
   }
@@ -1668,6 +1841,8 @@ export function removeRootElementEvents(rootElement: HTMLElement): void {
 
   if (isLexicalEditor(editor)) {
     cleanActiveNestedEditorsMap(editor);
+    registration.editors.delete(editor);
+    registration.hasShadowEditor = undefined;
     // @ts-expect-error: internal field
     rootElement.__lexicalEditor = null;
   } else if (editor) {
diff --git a/packages/lexical/src/LexicalMutations.ts b/packages/lexical/src/LexicalMutations.ts
index 8567d152da0..48545d5d41d 100644
--- a/packages/lexical/src/LexicalMutations.ts
+++ b/packages/lexical/src/LexicalMutations.ts
@@ -26,6 +26,7 @@ import {
   $getNodeFromDOMNode,
   $updateTextNodeFromDOMContent,
   getDOMSelection,
+  getDOMSelectionPoints,
   getNodeKeyFromDOMNode,
   getParentElement,
   getWindow,
@@ -82,12 +83,14 @@ function $handleTextMutation(
   editor: LexicalEditor,
 ): void {
   const domSelection = getDOMSelection(getWindow(editor));
+  const domSelectionPoints =
+    domSelection && getDOMSelectionPoints(domSelection, editor._rootElement);
   let anchorOffset = null;
   let focusOffset = null;
 
-  if (domSelection !== null && domSelection.anchorNode === target) {
-    anchorOffset = domSelection.anchorOffset;
-    focusOffset = domSelection.focusOffset;
+  if (domSelectionPoints !== null && domSelectionPoints.anchorNode === target) {
+    anchorOffset = domSelectionPoints.anchorOffset;
+    focusOffset = domSelectionPoints.focusOffset;
   }
 
   const text = target.nodeValue;
diff --git a/packages/lexical/src/LexicalSelection.ts b/packages/lexical/src/LexicalSelection.ts
index 41b66bc73e8..e452bd23c7f 100644
--- a/packages/lexical/src/LexicalSelection.ts
+++ b/packages/lexical/src/LexicalSelection.ts
@@ -94,12 +94,21 @@ import {
   $isTokenOrTab,
   $setCompositionKey,
   doesContainSurrogatePair,
+  getActiveElement,
+  getActiveElementDeep,
+  getComposedStaticRange,
   getDOMSelection,
+  getDOMSelectionPoints,
+  getDOMSelectionRange,
   getElementByKeyOrThrow,
+  getNearestEditorFromDOMNode,
   getNodeKeyFromDOMNode,
   getWindow,
   INTERNAL_$isBlock,
   isDOMCapturingSelection,
+  isDOMDocumentNode,
+  isDOMShadowRoot,
+  isDOMTextNode,
   isHTMLElement,
   isSelectionCapturedInDecoratorInput,
   isSelectionWithinEditor,
@@ -1863,7 +1872,13 @@ export class RangeSelection implements BaseSelection {
     );
     // Guard against no ranges
     if (domSelection.rangeCount > 0) {
-      const range = domSelection.getRangeAt(0);
+      // Inside a DOM shadow root getRangeAt(0) is retargeted to the host;
+      // read the composed StaticRange (real nodes) where available.
+      const composedRange = getComposedStaticRange(
+        domSelection,
+        editor._rootElement,
+      );
+      const range = composedRange || domSelection.getRangeAt(0);
       // Apply the DOM selection to our Lexical selection.
       const anchorNode = this.anchor.getNode();
       const root = $isRootNode(anchorNode)
@@ -1906,11 +1921,16 @@ export class RangeSelection implements BaseSelection {
 
         // Because a range works on start and end, we might need to flip
         // the anchor and focus points to match what the DOM has, not what
-        // the range has specifically.
-        if (
-          domSelection.anchorNode !== range.startContainer ||
-          domSelection.anchorOffset !== range.startOffset
-        ) {
+        // the range has specifically. Inside a shadow root anchorNode is
+        // retargeted to the host, so use the standard Selection.direction.
+        // If a future engine ships getComposedRanges without direction
+        // this falls through to forward; backward fidelity is the known
+        // limitation documented on getDOMSelectionPoints.
+        const anchorIsAtRangeStart = composedRange
+          ? domSelection.direction !== 'backward'
+          : domSelection.anchorNode === range.startContainer &&
+            domSelection.anchorOffset === range.startOffset;
+        if (!anchorIsAtRangeStart) {
           $swapPoints(this);
         }
       }
@@ -3210,10 +3230,11 @@ export function $internalCreateRangeSelection(
     if (domSelection === null) {
       return null;
     }
-    anchorDOM = domSelection.anchorNode;
-    focusDOM = domSelection.focusNode;
-    anchorOffset = domSelection.anchorOffset;
-    focusOffset = domSelection.focusOffset;
+    const points = getDOMSelectionPoints(domSelection, editor._rootElement);
+    anchorDOM = points.anchorNode;
+    focusDOM = points.focusNode;
+    anchorOffset = points.anchorOffset;
+    focusOffset = points.focusOffset;
     if (
       (isSelectionChange || eventType === undefined) &&
       $isRangeSelection(lastSelection) &&
@@ -3569,18 +3590,46 @@ export function $updateDOMSelection(
   tags: Set<string>,
   rootElement: HTMLElement,
 ): void {
-  const activeElement = document.activeElement;
+  const rootForActive = rootElement.getRootNode();
+  const activeElement =
+    isDOMDocumentNode(rootForActive) || isDOMShadowRoot(rootForActive)
+      ? getActiveElementDeep(rootForActive)
+      : null;
 
   // TODO: make this not hard-coded, and add another config option
   // that makes this configurable.
   if (
     (tags.has(COLLABORATION_TAG) && activeElement !== rootElement) ||
     (activeElement !== null &&
-      isSelectionCapturedInDecoratorInput(activeElement))
+      isSelectionCapturedInDecoratorInput(activeElement, activeElement))
   ) {
     return;
   }
 
+  // Resolve the live DOM selection's boundary points through any enclosing
+  // DOM shadow roots; Selection.anchorNode/focusNode are retargeted to the
+  // shadow host, so the comparisons below read composed points instead. In
+  // the light DOM getDOMSelectionPoints returns `domSelection` itself (no
+  // Selection property reads happen here), so `currentPoints` aliases it
+  // and preserves the deferred reads described below. The matching live
+  // Range is computed lazily in `getCurrentRange()` so the scroll-into-view
+  // fallback below is the only path that pays `getRangeAt(0)`'s layout
+  // flush — `getDOMSelectionRangeAndPoints()` (the public helper) still
+  // returns both eagerly for external callers.
+  const currentPoints = getDOMSelectionPoints(domSelection, rootElement);
+  let currentRangeCache: Range | null | undefined;
+  const getCurrentRange = (): Range | null => {
+    if (currentRangeCache === undefined) {
+      // Resolve through any enclosing shadow roots: getRangeAt(0) alone is
+      // retargeted to the shadow host inside a shadow tree, so the
+      // scroll-into-view rect below would measure the host instead of the
+      // caret. getDOMSelectionRange falls back to getRangeAt(0) in the light
+      // DOM.
+      currentRangeCache = getDOMSelectionRange(domSelection, rootElement);
+    }
+    return currentRangeCache;
+  };
+
   if (!$isRangeSelection(nextSelection)) {
     // We don't remove selection if the prevSelection is null because
     // of editor.setRootElement(). If this occurs on init when the
@@ -3590,8 +3639,8 @@ export function $updateDOMSelection(
       prevSelection !== null &&
       isSelectionWithinEditor(
         editor,
-        domSelection.anchorNode,
-        domSelection.focusNode,
+        currentPoints.anchorNode,
+        currentPoints.focusNode,
       )
     ) {
       domSelection.removeAllRanges();
@@ -3676,14 +3725,24 @@ export function $updateDOMSelection(
   // sometimes be problematic around scrolling.
   if (
     !(domSelection.type === 'Range' && isCollapsed) && // Badly interpreted range selection when collapsed - #1482
-    domSelection.anchorOffset === nextAnchorOffset &&
-    domSelection.focusOffset === nextFocusOffset &&
-    domSelection.anchorNode === nextAnchorNode &&
-    domSelection.focusNode === nextFocusNode
+    currentPoints.anchorOffset === nextAnchorOffset &&
+    currentPoints.focusOffset === nextFocusOffset &&
+    currentPoints.anchorNode === nextAnchorNode &&
+    currentPoints.focusNode === nextFocusNode
   ) {
-    // If the root element does not have focus, ensure it has focus
+    // If the root element does not have focus, ensure it has focus — but
+    // not when the deep-focused element belongs to a different editor
+    // (e.g. the inner editor of a coexisting outer-editor / shadow-editor
+    // pair). Stealing focus there breaks the user's typing flow.
     if (activeElement === null || !rootElement.contains(activeElement)) {
-      if (!tags.has(SKIP_SELECTION_FOCUS_TAG)) {
+      const focusEditor =
+        activeElement !== null
+          ? getNearestEditorFromDOMNode(activeElement)
+          : null;
+      if (
+        (focusEditor === null || focusEditor === editor) &&
+        !tags.has(SKIP_SELECTION_FOCUS_TAG)
+      ) {
         rootElement.focus({
           preventScroll: true,
         });
@@ -3712,35 +3771,60 @@ export function $updateDOMSelection(
     IS_FIREFOX &&
     nextSelection.isCollapsed() &&
     rootElement !== null &&
-    !tags.has(SKIP_SELECTION_FOCUS_TAG) &&
-    (document.activeElement === null ||
-      !rootElement.contains(document.activeElement))
+    !tags.has(SKIP_SELECTION_FOCUS_TAG)
   ) {
-    // Restore focus immediately to ensure cursor visibility
-    rootElement.focus({preventScroll: true});
-    // Note: We rely on the normal selection update mechanism to ensure the cursor
-    // is visible. Using requestAnimationFrame here could cause race conditions where
-    // another update changes the selection before the rAF callback executes.
+    // Shallow active element for the containment check: rootElement.contains()
+    // does not cross shadow boundaries, so a host-retargeted result gives the
+    // correct containment outcome (and avoids a false "outside" when focus is
+    // in a nested decorator shadow inside this editor).
+    const focusedElement = getActiveElement(rootElement);
+    if (focusedElement === null || !rootElement.contains(focusedElement)) {
+      // Don't steal focus when the active element belongs to a *different*
+      // editor (e.g. the inner editor of a coexisting outer-editor /
+      // shadow-editor pair). Resolve the *deep* focused element for this
+      // attribution: a shallow read returns the other editor's shadow host,
+      // which getNearestEditorFromDOMNode can't map back to that editor, so
+      // the guard would otherwise wrongly steal focus from a shadow-mounted
+      // sibling.
+      const deepFocusedElement = getActiveElementDeep(
+        rootElement.ownerDocument,
+      );
+      const focusEditor =
+        deepFocusedElement !== null
+          ? getNearestEditorFromDOMNode(deepFocusedElement)
+          : null;
+      if (focusEditor === null || focusEditor === editor) {
+        // Restore focus immediately to ensure cursor visibility.
+        // Note: We rely on the normal selection update mechanism to ensure the
+        // cursor is visible. Using requestAnimationFrame here could cause race
+        // conditions where another update changes the selection before the rAF
+        // callback executes.
+        rootElement.focus({preventScroll: true});
+      }
+    }
   }
 
   if (
     !tags.has(SKIP_SCROLL_INTO_VIEW_TAG) &&
     nextSelection.isCollapsed() &&
     rootElement !== null &&
-    rootElement === document.activeElement
+    // Re-read the active element rather than a value cached before the focus
+    // restore / selection mutation above, which can become stale (e.g. when
+    // setting the DOM selection focuses the contentEditable as a side effect).
+    // Shallow is sufficient here for the same reason as the Firefox branch
+    // above: the equality check doesn't cross the shadow boundary.
+    rootElement === getActiveElement(rootElement)
   ) {
     const selectionTarget: null | Range | HTMLElement | Text =
       $isRangeSelection(nextSelection) &&
       nextSelection.anchor.type === 'element'
         ? (nextAnchorNode.childNodes[nextAnchorOffset] as HTMLElement | Text) ||
           null
-        : domSelection.rangeCount > 0
-          ? domSelection.getRangeAt(0)
-          : null;
+        : getCurrentRange();
     if (selectionTarget !== null) {
       let selectionRect: DOMRect;
-      if (selectionTarget instanceof Text) {
-        const range = document.createRange();
+      if (isDOMTextNode(selectionTarget)) {
+        const range = selectionTarget.ownerDocument.createRange();
         range.selectNode(selectionTarget);
         selectionRect = range.getBoundingClientRect();
       } else {
diff --git a/packages/lexical/src/LexicalUpdates.ts b/packages/lexical/src/LexicalUpdates.ts
index 579d8266603..ff4cb93747e 100644
--- a/packages/lexical/src/LexicalUpdates.ts
+++ b/packages/lexical/src/LexicalUpdates.ts
@@ -55,6 +55,7 @@ import {$isSlotHost, $setSlot} from './LexicalSlot';
 import {
   $getCompositionKey,
   $updateDOMBlockCursorElement,
+  findAllLexicalElementsDeep,
   getDOMSelection,
   getEditorPropertyFromDOMNode,
   getEditorStateTextContent,
@@ -174,7 +175,7 @@ function collectBuildInformation(): string {
   const incompatibleEditors = new Set<string>();
   const thisVersion = LexicalEditor.version;
   if (typeof window !== 'undefined') {
-    for (const node of document.querySelectorAll('[contenteditable]')) {
+    for (const node of findAllLexicalElementsDeep(document)) {
       const editor = getEditorPropertyFromDOMNode(node);
       if (isLexicalEditor(editor)) {
         compatibleEditors++;
diff --git a/packages/lexical/src/LexicalUtils.ts b/packages/lexical/src/LexicalUtils.ts
index 6155f3148cf..918fcbb2be8 100644
--- a/packages/lexical/src/LexicalUtils.ts
+++ b/packages/lexical/src/LexicalUtils.ts
@@ -167,8 +167,19 @@ export const scheduleMicroTask: (fn: () => void) => void =
         Promise.resolve().then(fn);
       };
 
-export function isSelectionCapturedInDecoratorInput(anchorDOM: Node): boolean {
-  const activeElement = document.activeElement;
+export function isSelectionCapturedInDecoratorInput(
+  anchorDOM: Node,
+  preResolvedActiveElement?: Element | null,
+): boolean {
+  const activeElement =
+    preResolvedActiveElement !== undefined
+      ? preResolvedActiveElement
+      : (() => {
+          const root = anchorDOM.getRootNode();
+          return isDOMDocumentNode(root) || isDOMShadowRoot(root)
+            ? getActiveElementDeep(root)
+            : null;
+        })();
 
   if (!isHTMLElement(activeElement)) {
     return false;
@@ -815,8 +826,9 @@ export function $updateSelectedTextFromDOM(
   if (domSelection === null) {
     return;
   }
-  const anchorNode = domSelection.anchorNode;
-  let {anchorOffset, focusOffset} = domSelection;
+  const points = getDOMSelectionPoints(domSelection, editor._rootElement);
+  const anchorNode = points.anchorNode;
+  let {anchorOffset, focusOffset} = points;
   if (anchorNode !== null) {
     let textContent = getAnchorTextFromDOM(anchorNode);
     const node = $getNearestNodeFromDOMNode(anchorNode);
@@ -1521,9 +1533,15 @@ export function getElementByKeyOrThrow(
 export function getParentElement(node: Node): HTMLElement | null {
   const parentElement =
     (node as HTMLSlotElement).assignedSlot || node.parentElement;
-  return isDocumentFragment(parentElement)
-    ? ((parentElement as unknown as ShadowRoot).host as HTMLElement)
-    : parentElement;
+  if (parentElement !== null) {
+    return parentElement;
+  }
+  // node.parentElement is null when the parent is a ShadowRoot (a
+  // DocumentFragment, not an Element). Cross the shadow boundary to the host so
+  // ancestor walks (getScrollParent, calculateZoomLevel) continue into the
+  // enclosing light-DOM tree instead of stopping at the boundary.
+  const parentNode = node.parentNode;
+  return isDOMShadowRoot(parentNode) ? (parentNode.host as HTMLElement) : null;
 }
 
 export function getDOMOwnerDocument(
@@ -1893,7 +1911,9 @@ export function $updateDOMBlockCursorElement(
     $isRangeSelection(nextSelection) &&
     nextSelection.isCollapsed() &&
     nextSelection.anchor.type === 'element' &&
-    rootElement.contains(document.activeElement)
+    // getActiveElement rather than document.activeElement, which reports the
+    // shadow host (outside rootElement) when the editor is in a shadow root
+    rootElement.contains(getActiveElement(rootElement))
   ) {
     const anchor = nextSelection.anchor;
     const elementNode = anchor.getNode();
@@ -1971,6 +1991,422 @@ export function getDOMSelectionFromTarget(
   return defaultView ? defaultView.getSelection() : null;
 }
 
+/**
+ * @param node A value that may be a DOM ShadowRoot.
+ * @returns True if node is a DOM ShadowRoot (an open or closed shadow tree
+ *   root), false otherwise. A ShadowRoot is a DocumentFragment with a host.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function isDOMShadowRoot(node: unknown): node is ShadowRoot {
+  return isDocumentFragment(node) && 'host' in node;
+}
+
+/**
+ * Collects the DOM ShadowRoots between `node` and its document, innermost
+ * first. Returns an empty array when `node` is in the light DOM (its root is
+ * the Document) or is detached.
+ *
+ * Uses the standard {@link https://developer.mozilla.org/docs/Web/API/Node/getRootNode | Node.getRootNode}
+ * and `ShadowRoot.host` platform APIs to walk out of any nested shadow trees.
+ *
+ * @param node The DOM node to start from (typically the editor root element).
+ * @returns The enclosing ShadowRoots, innermost first.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+const EMPTY_SHADOW_ROOTS: ShadowRoot[] = [];
+
+export function getDOMShadowRoots(node: Node): ShadowRoot[] {
+  const root = node.getRootNode();
+  if (root === node || !isDOMShadowRoot(root)) {
+    return EMPTY_SHADOW_ROOTS;
+  }
+  const shadowRoots: ShadowRoot[] = [root];
+  let current: Node = root.host;
+  for (;;) {
+    const nextRoot = current.getRootNode();
+    if (nextRoot === current || !isDOMShadowRoot(nextRoot)) {
+      break;
+    }
+    shadowRoots.push(nextRoot);
+    current = nextRoot.host;
+  }
+  return shadowRoots;
+}
+
+/**
+ * Walks `root` and every open shadow root nested inside it, yielding each
+ * element that matches `selector`. `querySelectorAll` does not pierce
+ * shadow boundaries on its own; this descent does.
+ *
+ * @internal
+ */
+export function* findAllLexicalElementsDeep(
+  initialRoot: Document | ShadowRoot,
+): Generator<Element> {
+  const roots = [initialRoot];
+  let root;
+  while ((root = roots.pop())) {
+    yield* root.querySelectorAll('[data-lexical-editor="true"]');
+    // Resolve the owning document by nodeType, not `instanceof Document`:
+    // a Document from another realm (e.g. an iframe) is not an instance of
+    // this realm's Document constructor, so `instanceof` would misclassify it
+    // and fall back to the global `document`. A ShadowRoot's ownerDocument is
+    // always its (realm-correct) Document.
+    const doc = isDOMDocumentNode(root) ? root : root.ownerDocument;
+    const walker = doc.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    let el;
+    while ((el = walker.nextNode() as null | Element)) {
+      if (el.shadowRoot) {
+        roots.push(el.shadowRoot);
+      }
+    }
+  }
+}
+
+/**
+ * Resolves the document that hosts an editor's root element, falling
+ * back to the global `document` when the editor isn't mounted. Use this
+ * over `editor.getRootElement()?.ownerDocument ?? document` so iframe /
+ * shadow-mounted editors land in the right realm.
+ *
+ * @internal
+ */
+export function getRootOwnerDocument(
+  rootElement: HTMLElement | null,
+): Document {
+  return rootElement !== null ? rootElement.ownerDocument : document;
+}
+
+/**
+ * A subset of `Selection` covering the four boundary-point fields Lexical
+ * reads plus `direction`. Designed so a `Selection` instance can be returned
+ * where a `DOMSelectionBoundaryPoints` is expected (see {@link getDOMSelectionPoints}).
+ *
+ * `direction` is the standard
+ * {@link https://developer.mozilla.org/docs/Web/API/Selection/direction | Selection.direction}
+ * pass-through: `'forward'` / `'backward'` / `'none'` when the engine
+ * implements it, or `undefined` when a future engine ships
+ * `getComposedRanges` without `direction` (no current shipping
+ * configuration matches — every engine that ships the former also ships
+ * the latter). In the undefined case anchor/focus default to the composed
+ * StaticRange's tree order; callers needing strict backward fidelity
+ * inside a shadow root should check `direction !== undefined`.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export interface DOMSelectionBoundaryPoints {
+  anchorNode: Node | null;
+  anchorOffset: number;
+  direction?: undefined | 'forward' | 'backward' | 'none';
+  focusNode: Node | null;
+  focusOffset: number;
+}
+
+/**
+ * Resolves a DOM Selection's range through any DOM ShadowRoots enclosing
+ * `rootElement`, using the standard
+ * {@link https://developer.mozilla.org/docs/Web/API/Selection/getComposedRanges | Selection.getComposedRanges}
+ * platform API.
+ *
+ * When a selection is inside a shadow tree the browser retargets
+ * `Selection.getRangeAt`/`anchorNode`/`focusNode` to the shadow host, which
+ * hides the real nodes Lexical needs to resolve. Passing the enclosing shadow
+ * roots to `getComposedRanges` returns the un-retargeted boundary points as a
+ * {@link https://developer.mozilla.org/docs/Web/API/StaticRange | StaticRange}
+ * (in tree order, i.e. start before end).
+ *
+ * @returns The composed StaticRange, or `null` when `rootElement` is in the
+ *   light DOM, the platform does not implement `getComposedRanges`, or there
+ *   is no selection.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function getComposedStaticRange(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): StaticRange | null {
+  if (
+    rootElement === null ||
+    typeof domSelection.getComposedRanges !== 'function'
+  ) {
+    return null;
+  }
+  const shadowRoots = getDOMShadowRoots(rootElement);
+  if (shadowRoots.length === 0) {
+    return null;
+  }
+  // Prefer the standard dictionary form (Chrome, modern WebKit, Firefox);
+  // fall back to the legacy variadic form shipped by Safari 17–18.1. A
+  // browser that doesn't understand the dictionary may return an empty array
+  // rather than throwing, so check the result on each attempt before
+  // degrading.
+  const getComposedRanges = domSelection.getComposedRanges as (
+    ...args: unknown[]
+  ) => StaticRange[];
+  try {
+    const dictRange = getComposedRanges.call(domSelection, {shadowRoots})[0];
+    if (dictRange !== undefined) {
+      return dictRange;
+    }
+  } catch (_error) {
+    // Try the legacy variadic form.
+  }
+  try {
+    const variadicRange = getComposedRanges.apply(domSelection, shadowRoots)[0];
+    if (variadicRange !== undefined) {
+      return variadicRange;
+    }
+  } catch (_error) {
+    // Both forms failed — degrade.
+  }
+  return null;
+}
+
+/**
+ * Returns a live DOM Range for the Selection, resolved through any DOM
+ * ShadowRoots enclosing `rootElement`. Inside a shadow tree
+ * `Selection.getRangeAt(0)` is retargeted to the shadow host, so this builds a
+ * Range from the composed boundary points instead (see
+ * {@link getComposedStaticRange}); in the light DOM it returns
+ * `getRangeAt(0)` unchanged. Use this instead of `getRangeAt(0)` when the
+ * Range is needed for layout (e.g. `getBoundingClientRect`), which a
+ * StaticRange cannot provide.
+ *
+ * @returns A live Range, or null when the selection has no ranges.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function getDOMSelectionRange(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): Range | null {
+  const staticRange = getComposedStaticRange(domSelection, rootElement);
+  if (staticRange !== null) {
+    const range = staticRangeToLiveRange(staticRange);
+    if (range !== null) {
+      return range;
+    }
+  }
+  return domSelection.rangeCount > 0 ? domSelection.getRangeAt(0) : null;
+}
+
+/**
+ * Resolves a DOM Selection's anchor/focus boundary points through any DOM
+ * ShadowRoots enclosing `rootElement`. Inside a shadow tree the boundary
+ * points come from {@link getComposedStaticRange} mapped back onto
+ * anchor/focus with the standard
+ * {@link https://developer.mozilla.org/docs/Web/API/Selection/direction | Selection.direction};
+ * in the light DOM (or when `getComposedRanges` is unavailable) the Selection's
+ * own anchorNode/focusNode are already correct, so the Selection is returned
+ * as-is (it satisfies {@link DOMSelectionBoundaryPoints}).
+ *
+ * Use this instead of reading `Selection.anchorNode`/`focusNode` directly,
+ * which are retargeted to the shadow host inside a shadow tree.
+ *
+ * @remarks
+ * The two return paths have different read semantics:
+ * - light DOM: the return aliases `domSelection`, so subsequent reads
+ *   reflect any post-call selection changes. The aliasing is intentional;
+ *   each `Selection` property read forces a synchronous style/layout
+ *   recalculation, so `$updateDOMSelection` defers these reads until they
+ *   are actually needed.
+ * - shadow DOM: the return is a snapshot taken at call time, including
+ *   `direction`. If a future engine ships `getComposedRanges` without
+ *   `Selection.direction` (no current shipping configuration matches),
+ *   the snapshot's `direction` is `undefined` and anchor/focus default
+ *   to the StaticRange's tree order — a backward selection will appear
+ *   forward.
+ *
+ * Read the four points immediately after the call, or compare identity
+ * via `points === domSelection` to detect when the return aliases
+ * `domSelection`, rather than caching the returned reference across
+ * selection mutations.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function getDOMSelectionPoints(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): DOMSelectionBoundaryPoints {
+  const staticRange = getComposedStaticRange(domSelection, rootElement);
+  if (staticRange === null) {
+    return domSelection as DOMSelectionBoundaryPoints;
+  }
+  return staticRangeToPoints(staticRange, readDirection(domSelection));
+}
+
+/**
+ * Resolves the live DOM Range (for layout reads like `getBoundingClientRect`)
+ * and the anchor/focus boundary points in one pass, sharing a single
+ * {@link getComposedStaticRange} read rather than computing it twice as a
+ * call to {@link getDOMSelectionRange} followed by {@link getDOMSelectionPoints}
+ * would. Use this at sites that need both shapes from the same selection.
+ *
+ * @returns The composed Range plus the boundary points; the Range is null
+ *   when the selection has no ranges.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function getDOMSelectionRangeAndPoints(
+  domSelection: Selection,
+  rootElement: HTMLElement | null,
+): {points: DOMSelectionBoundaryPoints; range: Range | null} {
+  const staticRange = getComposedStaticRange(domSelection, rootElement);
+  if (staticRange === null) {
+    return {
+      points: domSelection as DOMSelectionBoundaryPoints,
+      range: domSelection.rangeCount > 0 ? domSelection.getRangeAt(0) : null,
+    };
+  }
+  const range =
+    staticRangeToLiveRange(staticRange) ??
+    (domSelection.rangeCount > 0 ? domSelection.getRangeAt(0) : null);
+  return {
+    points: staticRangeToPoints(staticRange, readDirection(domSelection)),
+    range,
+  };
+}
+
+// Build a live DOM Range from a StaticRange's endpoints, in the container's
+// own document so iframe / shadow trees resolve to the right Range constructor.
+// Returns null when the container is detached or the endpoints reject (the
+// caller can fall back to `domSelection.getRangeAt(0)` in that case).
+function staticRangeToLiveRange(staticRange: StaticRange): Range | null {
+  const doc = staticRange.startContainer.ownerDocument;
+  if (doc === null) {
+    return null;
+  }
+  const range = doc.createRange();
+  try {
+    range.setStart(staticRange.startContainer, staticRange.startOffset);
+    range.setEnd(staticRange.endContainer, staticRange.endOffset);
+    return range;
+  } catch (_error) {
+    return null;
+  }
+}
+
+// Map a StaticRange + Selection.direction to anchor/focus pairs. Selection
+// returns boundaries in tree order, so a backward direction reverses the
+// pair before mapping (matching what Selection.anchorNode/focusNode would
+// have reported in the light DOM). 'none' and undefined map to forward
+// (anchor=start): a 'none' selection is directionless (e.g. created via
+// Selection.addRange), which the spec pins to anchor=start/focus=end, so the
+// forward mapping is correct — only directional APIs ever report 'backward'.
+function staticRangeToPoints(
+  staticRange: StaticRange,
+  direction: 'forward' | 'backward' | 'none' | undefined,
+): DOMSelectionBoundaryPoints {
+  const {startContainer, startOffset, endContainer, endOffset} = staticRange;
+  return direction === 'backward'
+    ? {
+        anchorNode: endContainer,
+        anchorOffset: endOffset,
+        direction,
+        focusNode: startContainer,
+        focusOffset: startOffset,
+      }
+    : {
+        anchorNode: startContainer,
+        anchorOffset: startOffset,
+        direction,
+        focusNode: endContainer,
+        focusOffset: endOffset,
+      };
+}
+
+function readDirection(
+  domSelection: Selection,
+): 'forward' | 'backward' | 'none' | undefined {
+  return domSelection.direction as undefined | 'forward' | 'backward' | 'none';
+}
+
+/**
+ * Returns the focused element within the same Document or ShadowRoot as
+ * `node`, using the standard `DocumentOrShadowRoot.activeElement`.
+ *
+ * Unlike `document.activeElement` — which is retargeted to the outermost
+ * shadow host when focus is inside a shadow tree — this returns the focused
+ * element within `node`'s own tree (e.g. the editor's contentEditable when it
+ * lives inside a shadow root).
+ *
+ * @param node A node whose tree's active element is wanted.
+ * @returns The active element, or null.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function getActiveElement(node: Node): Element | null {
+  const root = node.getRootNode();
+  return isDOMDocumentNode(root) || isDOMShadowRoot(root)
+    ? root.activeElement
+    : null;
+}
+
+/**
+ * Descends from `root.activeElement` through nested open ShadowRoots to the
+ * deepest focused element. `document.activeElement` only reports the outermost
+ * shadow host; this walks into the shadow trees via `ShadowRoot.activeElement`
+ * to find the element that actually has focus.
+ *
+ * @param root The Document or ShadowRoot to start from.
+ * @returns The deepest active element, or null.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function getActiveElementDeep(
+  root: Document | ShadowRoot,
+): Element | null {
+  let active: Element | null = root.activeElement;
+  while (active !== null && active.shadowRoot !== null) {
+    const inner = active.shadowRoot.activeElement;
+    if (inner === null) {
+      break;
+    }
+    active = inner;
+  }
+  return active;
+}
+
+/**
+ * Returns the un-retargeted event target — the real element the user
+ * interacted with — for events observed by a listener above an enclosing
+ * DOM shadow root. `Event.target` is retargeted to the outermost shadow
+ * host in that case, hiding the actual element; `composedPath()[0]`
+ * returns the original target for `composed: true` events (most
+ * user-agent UI events: click, mousedown, pointerdown, focusin, etc.).
+ * Falls back to `event.target` when `composedPath` is unavailable or
+ * returns an empty array (e.g. the event has already finished
+ * dispatching).
+ *
+ * Pairs with the shadow-aware helpers above
+ * ({@link getDOMSelectionPoints}, {@link getActiveElement}) for the
+ * event side of the shadow boundary — useful when an
+ * `Element.contains(target)` check needs to test against an editor root
+ * inside a shadow tree.
+ *
+ * @param event The dispatched event.
+ * @returns The un-retargeted target, or null when the event has none.
+ *
+ * @experimental Shape may change as shadow DOM support stabilizes.
+ */
+export function getComposedEventTarget(event: Event): EventTarget | null {
+  const target = event.target;
+  if (
+    target !== null &&
+    isHTMLElement(target) &&
+    target.shadowRoot !== null &&
+    typeof event.composedPath === 'function'
+  ) {
+    const path = event.composedPath();
+    if (path.length > 0) {
+      return path[0];
+    }
+  }
+  return target;
+}
+
 export function $splitNode(
   node: ElementNode,
   offset: number,
diff --git a/packages/lexical/src/__tests__/browser/ShadowRootSelection.test.ts b/packages/lexical/src/__tests__/browser/ShadowRootSelection.test.ts
new file mode 100644
index 00000000000..85a1b88a3a8
--- /dev/null
+++ b/packages/lexical/src/__tests__/browser/ShadowRootSelection.test.ts
@@ -0,0 +1,1176 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {caretFromPoint} from '@lexical/clipboard';
+import {buildEditorFromExtensions, defineExtension} from '@lexical/extension';
+import {registerRichText} from '@lexical/rich-text';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  findAllLexicalElementsDeep,
+  getActiveElement,
+  getActiveElementDeep,
+  getComposedEventTarget,
+  getComposedStaticRange,
+  getDOMSelection,
+  getDOMSelectionPoints,
+  getDOMShadowRoots,
+  isDOMShadowRoot,
+  type LexicalEditor,
+  SELECTION_CHANGE_COMMAND,
+  setDOMUnmanaged,
+} from 'lexical';
+import {
+  assert,
+  beforeEach,
+  describe,
+  expect,
+  onTestFinished,
+  test,
+} from 'vitest';
+import {userEvent} from 'vitest/browser';
+
+// These tests exercise the DOM shadow root support that relies on platform
+// selection APIs (Selection.getComposedRanges / Selection.direction /
+// ShadowRoot.activeElement / Selection.modify). jsdom implements none of these
+// realistically, so the behavior can only be asserted in a real browser. See
+// the `browser` project in vitest.config.mts.
+
+// `getComposedRanges` etc. only exist in Chromium/WebKit/Firefox builds new
+// enough to support them. When the host browser predates the API the helpers
+// degrade to the light-DOM reads, so we skip the shadow-specific assertions
+// rather than fail on an old engine.
+const SUPPORTS_COMPOSED_RANGES =
+  typeof Selection !== 'undefined' &&
+  typeof Selection.prototype.getComposedRanges === 'function';
+
+// Firefox routes compositionend through a deferred onInput, and Safari /
+// WebKit route it through a deferred keydown; both paths need additional
+// synthetic events to commit the composed character, which is impractical
+// to model in a single-shot test. The IME smoke test below stays on the
+// Chromium path that calls $onCompositionEndImpl synchronously.
+const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '';
+const IS_CHROMIUM_LIKE =
+  /Chrome\//.test(userAgent) && !/Firefox/.test(userAgent);
+
+interface ShadowEditor {
+  editor: LexicalEditor;
+  host: HTMLElement;
+  shadow: ShadowRoot;
+  contentEditable: HTMLElement;
+}
+
+function $prepopulate(text: string): void {
+  const root = $getRoot();
+  root.clear();
+  root.append($createParagraphNode().append($createTextNode(text)));
+}
+
+function setUpShadowEditor(text = 'Hello world'): ShadowEditor {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({mode: 'open'});
+  const contentEditable = document.createElement('div');
+  contentEditable.contentEditable = 'true';
+  shadow.appendChild(contentEditable);
+
+  const editor = buildEditorFromExtensions(
+    defineExtension({
+      $initialEditorState: () => $prepopulate(text),
+      name: 'shadow-root-selection',
+      onError: error => {
+        throw error;
+      },
+    }),
+  );
+  editor.setRootElement(contentEditable);
+
+  onTestFinished(() => {
+    editor.setRootElement(null);
+    document.body.removeChild(host);
+  });
+  return {contentEditable, editor, host, shadow};
+}
+
+function getInnerTextNode(contentEditable: HTMLElement): Text {
+  const span = contentEditable.querySelector('[data-lexical-text="true"]');
+  return span!.firstChild as Text;
+}
+
+function selectInnerText(
+  contentEditable: HTMLElement,
+  start: number,
+  end: number,
+): {domSelection: Selection; textNode: Text} {
+  const textNode = getInnerTextNode(contentEditable);
+  const domSelection = getDOMSelection(window)!;
+  // setBaseAndExtent rather than addRange: WebKit does not reliably register a
+  // Range added with addRange when it points inside a shadow tree.
+  domSelection.setBaseAndExtent(textNode, start, textNode, end);
+  return {domSelection, textNode};
+}
+
+describe('DOM shadow root selection (browser)', () => {
+  beforeEach(() => {
+    const domSelection = getDOMSelection(window);
+    if (domSelection) {
+      domSelection.removeAllRanges();
+    }
+  });
+
+  test('getDOMShadowRoots walks out of nested shadow trees', () => {
+    const {contentEditable, shadow, host} = setUpShadowEditor();
+    expect(getDOMShadowRoots(contentEditable)).toEqual([shadow]);
+    // The host itself lives in the light DOM.
+    expect(getDOMShadowRoots(host)).toEqual([]);
+    expect(getDOMShadowRoots(document.body)).toEqual([]);
+    expect(isDOMShadowRoot(shadow)).toBe(true);
+    expect(isDOMShadowRoot(document)).toBe(false);
+    expect(isDOMShadowRoot(document.createDocumentFragment())).toBe(false);
+
+    // A nested shadow tree resolves innermost-first.
+    const innerHost = document.createElement('div');
+    contentEditable.appendChild(innerHost);
+    const innerShadow = innerHost.attachShadow({mode: 'open'});
+    const leaf = document.createElement('span');
+    innerShadow.appendChild(leaf);
+    expect(getDOMShadowRoots(leaf)).toEqual([innerShadow, shadow]);
+
+    // Three levels deep walks all the way out.
+    const middleLeaf = document.createElement('div');
+    innerShadow.appendChild(middleLeaf);
+    const deepestShadow = middleLeaf.attachShadow({mode: 'open'});
+    const deepLeaf = document.createElement('span');
+    deepestShadow.appendChild(deepLeaf);
+    expect(getDOMShadowRoots(deepLeaf)).toEqual([
+      deepestShadow,
+      innerShadow,
+      shadow,
+    ]);
+  });
+
+  test('closed shadow roots are opaque from outside', () => {
+    // A closed shadow root is unreachable from outside code: host.shadowRoot
+    // reads as null, getDOMShadowRoots can't walk into it, and selection
+    // can't be resolved through it. This documents the limitation behind
+    // the "open shadow roots only" docs entry.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    onTestFinished(() => {
+      document.body.removeChild(host);
+    });
+    host.attachShadow({mode: 'closed'});
+    expect(host.shadowRoot).toBeNull();
+    expect(getDOMShadowRoots(host)).toEqual([]);
+  });
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'getDOMSelectionPoints resolves a retargeted shadow selection',
+    () => {
+      const {contentEditable, host} = setUpShadowEditor();
+      const {domSelection, textNode} = selectInnerText(contentEditable, 1, 4);
+
+      const points = getDOMSelectionPoints(domSelection, contentEditable);
+      expect(points.direction).toBe('forward');
+      expect(points.anchorNode).toBe(textNode);
+      expect(points.anchorOffset).toBe(1);
+      expect(points.focusNode).toBe(textNode);
+      expect(points.focusOffset).toBe(4);
+
+      // The composed StaticRange is in tree order.
+      const staticRange = getComposedStaticRange(domSelection, contentEditable);
+      expect(staticRange!.startContainer).toBe(textNode);
+      expect(staticRange!.startOffset).toBe(1);
+      expect(staticRange!.endOffset).toBe(4);
+
+      // host is unused beyond proving the selection is inside its shadow tree.
+      expect(host.shadowRoot!.contains(textNode)).toBe(true);
+    },
+  );
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'getDOMSelectionPoints honors backward selections',
+    () => {
+      const {contentEditable} = setUpShadowEditor();
+      const textNode = getInnerTextNode(contentEditable);
+      const domSelection = getDOMSelection(window)!;
+      domSelection.removeAllRanges();
+      // setBaseAndExtent with base after extent makes a backward selection.
+      domSelection.setBaseAndExtent(textNode, 5, textNode, 2);
+
+      const points = getDOMSelectionPoints(domSelection, contentEditable);
+      // anchor is the base (5), focus is the extent (2).
+      expect(points.direction).toBe('backward');
+      expect(points.anchorOffset).toBe(5);
+      expect(points.focusOffset).toBe(2);
+    },
+  );
+
+  test('falls back to the Selection itself in the light DOM', () => {
+    const light = document.createElement('div');
+    light.contentEditable = 'true';
+    document.body.appendChild(light);
+    onTestFinished(() => {
+      document.body.removeChild(light);
+    });
+    const editor = buildEditorFromExtensions(
+      defineExtension({
+        $initialEditorState: () => $prepopulate('Hello world'),
+        name: 'light',
+        onError: error => {
+          throw error;
+        },
+      }),
+    );
+    editor.setRootElement(light);
+    onTestFinished(() => editor.setRootElement(null));
+
+    const {domSelection} = selectInnerText(light, 0, 5);
+    expect(getComposedStaticRange(domSelection, light)).toBeNull();
+    // No shadow root to resolve through, so the Selection is returned as-is.
+    expect(getDOMSelectionPoints(domSelection, light)).toBe(domSelection);
+  });
+
+  test('getActiveElement / getActiveElementDeep see through the shadow host', () => {
+    const {contentEditable, host} = setUpShadowEditor();
+    contentEditable.focus();
+
+    // document.activeElement is retargeted to the host...
+    expect(document.activeElement).toBe(host);
+    // ...but the shadow-aware helpers resolve the real focused element.
+    expect(getActiveElement(contentEditable)).toBe(contentEditable);
+    expect(getActiveElementDeep(document)).toBe(contentEditable);
+  });
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'the reconciler writes selection onto the shadow inner nodes',
+    () => {
+      const {contentEditable, editor, shadow} = setUpShadowEditor();
+      contentEditable.focus();
+      editor.update(
+        () => {
+          $getRoot().getAllTextNodes()[0].select(0, 5);
+        },
+        {discrete: true},
+      );
+
+      const textNode = getInnerTextNode(contentEditable);
+      const domSelection = getDOMSelection(window)!;
+      const points = getDOMSelectionPoints(domSelection, contentEditable);
+      expect(points.anchorNode).toBe(textNode);
+      expect(points.anchorOffset).toBe(0);
+      expect(points.focusNode).toBe(textNode);
+      expect(points.focusOffset).toBe(5);
+      // Focus landed inside the shadow tree.
+      expect(shadow.activeElement).toBe(contentEditable);
+    },
+  );
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'reading the DOM selection resolves shadow nodes into the model',
+    () => {
+      const {contentEditable, editor} = setUpShadowEditor();
+      contentEditable.focus();
+      selectInnerText(contentEditable, 2, 7);
+
+      // This is the same DOM->model read that the document 'selectionchange'
+      // handler performs internally ($internalCreateSelection); passing the event
+      // option drives it deterministically without depending on the asynchronous
+      // native selectionchange dispatch.
+      editor.update(() => {}, {
+        discrete: true,
+        event: new Event('selectionchange'),
+      });
+
+      editor.read(() => {
+        const selection = $getSelection();
+        assert($isRangeSelection(selection));
+        expect(selection.anchor.offset).toBe(2);
+        expect(selection.focus.offset).toBe(7);
+        expect(selection.getTextContent()).toBe('llo w');
+      });
+    },
+  );
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'RangeSelection.modify uses native modify() inside a shadow root',
+    () => {
+      const {contentEditable, editor} = setUpShadowEditor();
+      contentEditable.focus();
+
+      // Character granularity is deterministic across browsers.
+      editor.update(
+        () => {
+          $getRoot()
+            .getAllTextNodes()[0]
+            .select(0, 0)
+            .modify('extend', false, 'character');
+        },
+        {discrete: true},
+      );
+      editor.read(() => {
+        const selection = $getSelection();
+        assert($isRangeSelection(selection));
+        expect(selection.getTextContent()).toBe('H');
+      });
+
+      // Word granularity should at least cover the first word.
+      editor.update(
+        () => {
+          $getRoot()
+            .getAllTextNodes()[0]
+            .select(0, 0)
+            .modify('extend', false, 'word');
+        },
+        {discrete: true},
+      );
+      editor.read(() => {
+        const selection = $getSelection();
+        assert($isRangeSelection(selection));
+        expect(selection.getTextContent().startsWith('Hello')).toBe(true);
+        expect(selection.isCollapsed()).toBe(false);
+      });
+    },
+  );
+
+  // IME composition through a shadow root: the $onCompositionEndImpl path
+  // reads selection through getDOMSelectionPoints to find the textnode under
+  // the caret. Without the shadow-aware read, a composed CJK character would
+  // land on the retargeted shadow host rather than the textnode and be
+  // silently dropped.
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES || !IS_CHROMIUM_LIKE)(
+    'composition end commits the composed character inside a shadow root',
+    () => {
+      const {contentEditable, editor} = setUpShadowEditor('Hi');
+      contentEditable.focus();
+
+      const textNode = getInnerTextNode(contentEditable);
+      // Place the caret at the end of "Hi" inside the shadow tree.
+      getDOMSelection(window)!.setBaseAndExtent(textNode, 2, textNode, 2);
+      editor.update(() => {}, {
+        discrete: true,
+        event: new Event('selectionchange'),
+      });
+
+      contentEditable.dispatchEvent(
+        new CompositionEvent('compositionstart', {
+          bubbles: true,
+          composed: true,
+          data: '',
+        }),
+      );
+      expect(editor.isComposing()).toBe(true);
+
+      // Simulate the IME writing the composed character into the DOM textnode.
+      textNode.nodeValue = 'Hi가';
+      getDOMSelection(window)!.setBaseAndExtent(textNode, 3, textNode, 3);
+
+      contentEditable.dispatchEvent(
+        new CompositionEvent('compositionend', {
+          bubbles: true,
+          composed: true,
+          data: '가',
+        }),
+      );
+
+      expect(editor.isComposing()).toBe(false);
+      expect(editor.read(() => $getRoot().getTextContent())).toBe('Hi가');
+    },
+  );
+
+  // Regression test for #2119 and #8125: an editor hosted in a web
+  // component's shadow root must accept real keyboard input (key events,
+  // beforeinput, mutation handling) — previously characters never appeared
+  // because the retargeted DOM selection could not be resolved.
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'real keyboard input works in a web component shadow root',
+    async () => {
+      if (customElements.get('test-lexical-host') === undefined) {
+        customElements.define(
+          'test-lexical-host',
+          class extends HTMLElement {
+            connectedCallback() {
+              const shadow =
+                this.shadowRoot ?? this.attachShadow({mode: 'open'});
+              const contentEditable = document.createElement('div');
+              contentEditable.contentEditable = 'true';
+              shadow.appendChild(contentEditable);
+            }
+          },
+        );
+      }
+      const host = document.createElement('test-lexical-host');
+      document.body.appendChild(host);
+      const contentEditable = host.shadowRoot!.firstElementChild as HTMLElement;
+      const editor = buildEditorFromExtensions(
+        defineExtension({
+          $initialEditorState: () => $prepopulate('Hi'),
+          name: 'web-component',
+          onError: error => {
+            throw error;
+          },
+        }),
+      );
+      // Command handlers for backspace/delete/etc.; insertion of plain typed
+      // text is otherwise handled by the mutation observer path.
+      const removeRichText = registerRichText(editor);
+      editor.setRootElement(contentEditable);
+      onTestFinished(() => {
+        removeRichText();
+        editor.setRootElement(null);
+        document.body.removeChild(host);
+      });
+
+      // Place the caret at the end of "Hi" with the native selection, and sync
+      // it into the editor the same way the selectionchange handler would.
+      contentEditable.focus();
+      const textNode = getInnerTextNode(contentEditable);
+      getDOMSelection(window)!.setBaseAndExtent(textNode, 2, textNode, 2);
+      editor.update(() => {}, {
+        discrete: true,
+        event: new Event('selectionchange'),
+      });
+
+      await userEvent.keyboard('abc');
+
+      expect(editor.read(() => $getRoot().getTextContent())).toBe('Hiabc');
+
+      // Backspace exercises the deletion path through the same selection
+      // resolution machinery.
+      await userEvent.keyboard('{Backspace}');
+      expect(editor.read(() => $getRoot().getTextContent())).toBe('Hiab');
+    },
+  );
+
+  // An editor whose root element lives in a (same-origin) iframe document is a
+  // separate, but related, case: its selection is not retargeted (so no
+  // composed ranges are needed), but the focus helpers must resolve through the
+  // iframe's document rather than the top-level one. getActiveElement uses
+  // Node.getRootNode for exactly this reason.
+  test('resolves focus and selection for an editor inside an iframe', () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument!;
+    const contentEditable = iframeDoc.createElement('div');
+    contentEditable.contentEditable = 'true';
+    iframeDoc.body.appendChild(contentEditable);
+    const editor = buildEditorFromExtensions(
+      defineExtension({
+        $initialEditorState: () => $prepopulate('Hello world'),
+        name: 'iframe',
+        onError: error => {
+          throw error;
+        },
+      }),
+    );
+    editor.setRootElement(contentEditable);
+    onTestFinished(() => {
+      editor.setRootElement(null);
+      document.body.removeChild(iframe);
+    });
+
+    // An iframe document is not a shadow root, so no composed ranges are used.
+    expect(getDOMShadowRoots(contentEditable)).toEqual([]);
+
+    contentEditable.focus();
+    // getActiveElement resolves through Node.getRootNode to the iframe's own
+    // document, so it reads the iframe document's activeElement rather than the
+    // top-level document.activeElement (which is the <iframe> element or
+    // <body>, never the inner editor). We compare against iframeDoc rather than
+    // asserting focus actually landed, since cross-frame focus does not
+    // propagate in a headless browser.
+    expect(getActiveElement(contentEditable)).toBe(iframeDoc.activeElement);
+    expect(getActiveElement(contentEditable)).not.toBe(document.activeElement);
+
+    // Selection is read from the editor's window (the iframe's) and is not
+    // retargeted, so the boundary points resolve into the model directly.
+    const textNode = contentEditable.querySelector(
+      '[data-lexical-text="true"]',
+    )!.firstChild as Text;
+    iframe
+      .contentWindow!.getSelection()!
+      .setBaseAndExtent(textNode, 0, textNode, 5);
+    editor.update(() => {}, {
+      discrete: true,
+      event: new Event('selectionchange'),
+    });
+    editor.read(() => {
+      const selection = $getSelection();
+      assert($isRangeSelection(selection));
+      expect(selection.getTextContent()).toBe('Hello');
+    });
+  });
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'resolves selection for a shadow-mounted editor inside an iframe',
+    () => {
+      // iframe + shadow combined: the editor's contentEditable lives in a
+      // shadow tree inside an iframe document, so the helpers must walk both
+      // boundaries — Node.getRootNode through the shadow root + the
+      // iframe's own document for active element / selection reads.
+      const iframe = document.createElement('iframe');
+      document.body.appendChild(iframe);
+      const iframeDoc = iframe.contentDocument!;
+      const host = iframeDoc.createElement('div');
+      iframeDoc.body.appendChild(host);
+      const shadow = host.attachShadow({mode: 'open'});
+      const contentEditable = iframeDoc.createElement('div');
+      contentEditable.contentEditable = 'true';
+      shadow.appendChild(contentEditable);
+
+      const editor = buildEditorFromExtensions(
+        defineExtension({
+          $initialEditorState: () => $prepopulate('Hello world'),
+          name: 'iframe-shadow',
+          onError: error => {
+            throw error;
+          },
+        }),
+      );
+      editor.setRootElement(contentEditable);
+      onTestFinished(() => {
+        editor.setRootElement(null);
+        document.body.removeChild(iframe);
+      });
+
+      // getDOMShadowRoots walks the shadow boundary inside the iframe.
+      expect(getDOMShadowRoots(contentEditable)).toEqual([shadow]);
+      // getActiveElement resolves through both boundaries: shadow root +
+      // iframe document.
+      contentEditable.focus();
+      expect(getActiveElement(contentEditable)).toBe(shadow.activeElement);
+
+      // Composed selection read from the iframe's window resolves the
+      // shadow-internal textnode rather than the retargeted host.
+      const textNode = contentEditable.querySelector(
+        '[data-lexical-text="true"]',
+      )!.firstChild as Text;
+      const iframeSelection = iframe.contentWindow!.getSelection()!;
+      iframeSelection.setBaseAndExtent(textNode, 0, textNode, 5);
+      const points = getDOMSelectionPoints(iframeSelection, contentEditable);
+      expect(points.anchorNode).toBe(textNode);
+      expect(points.anchorOffset).toBe(0);
+      expect(points.focusOffset).toBe(5);
+    },
+  );
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'Selection.direction defaults to forward when absent',
+    () => {
+      // Firefox before 124 ships `Selection.getComposedRanges` without
+      // `Selection.direction`; the helpers must treat the missing field as
+      // "not backward" so the StaticRange's start/end map onto anchor/focus
+      // in tree order rather than getting silently swapped.
+      const {contentEditable} = setUpShadowEditor();
+      const {domSelection, textNode} = selectInnerText(contentEditable, 1, 4);
+      const original = Object.getOwnPropertyDescriptor(
+        Selection.prototype,
+        'direction',
+      );
+      Object.defineProperty(Selection.prototype, 'direction', {
+        configurable: true,
+        get() {
+          return undefined;
+        },
+      });
+      onTestFinished(() => {
+        if (original) {
+          Object.defineProperty(Selection.prototype, 'direction', original);
+        } else {
+          delete (Selection.prototype as unknown as {direction?: unknown})
+            .direction;
+        }
+      });
+      const points = getDOMSelectionPoints(domSelection, contentEditable);
+      // direction is undefined; anchor/focus default to the StaticRange's tree
+      // order (forward) since the engine can't report the actual direction.
+      expect(points.direction).toBeUndefined();
+      expect(points.anchorNode).toBe(textNode);
+      expect(points.anchorOffset).toBe(1);
+      expect(points.focusOffset).toBe(4);
+    },
+  );
+
+  test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+    'Selection.direction absent + backward selection signals unknown direction',
+    () => {
+      // If a future engine ships getComposedRanges without Selection.direction
+      // (no current shipping configuration matches), the helper can't tell a
+      // backward selection from a forward one — anchor/focus default to tree
+      // order and the undefined direction is the explicit signal to callers.
+      const {contentEditable} = setUpShadowEditor();
+      const textNode = getInnerTextNode(contentEditable);
+      const domSelection = getDOMSelection(window)!;
+      domSelection.removeAllRanges();
+      domSelection.setBaseAndExtent(textNode, 5, textNode, 2);
+      const original = Object.getOwnPropertyDescriptor(
+        Selection.prototype,
+        'direction',
+      );
+      Object.defineProperty(Selection.prototype, 'direction', {
+        configurable: true,
+        get() {
+          return undefined;
+        },
+      });
+      onTestFinished(() => {
+        if (original) {
+          Object.defineProperty(Selection.prototype, 'direction', original);
+        } else {
+          delete (Selection.prototype as unknown as {direction?: unknown})
+            .direction;
+        }
+      });
+      const points = getDOMSelectionPoints(domSelection, contentEditable);
+      expect(points.direction).toBeUndefined();
+      expect(points.anchorNode).toBe(textNode);
+      expect(points.anchorOffset).toBe(2);
+      expect(points.focusOffset).toBe(5);
+    },
+  );
+
+  describe('getComposedEventTarget', () => {
+    test('returns the composed-path target inside a shadow root', () => {
+      const {shadow, contentEditable} = setUpShadowEditor();
+
+      const innerSpan = document.createElement('span');
+      innerSpan.textContent = 'inner';
+      contentEditable.appendChild(innerSpan);
+
+      let observedTarget: EventTarget | null = null;
+      const listener = (event: Event) => {
+        observedTarget = getComposedEventTarget(event);
+      };
+      // Listener on window (outside the shadow tree) — composed events bubble
+      // up retargeted to the shadow host, so event.target alone would be the
+      // host, not the inner span. getComposedEventTarget should recover the inner
+      // target via composedPath().
+      window.addEventListener('click', listener);
+      onTestFinished(() => {
+        window.removeEventListener('click', listener);
+      });
+
+      innerSpan.dispatchEvent(
+        new MouseEvent('click', {bubbles: true, composed: true}),
+      );
+
+      expect(observedTarget).toBe(innerSpan);
+      expect(observedTarget).not.toBe(shadow.host);
+    });
+
+    test('falls back to event.target when composedPath is unavailable', () => {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      onTestFinished(() => {
+        document.body.removeChild(div);
+      });
+
+      const event = new Event('custom');
+      Object.defineProperty(event, 'target', {value: div});
+      // Force composedPath to be undefined (simulate an older engine).
+      Object.defineProperty(event, 'composedPath', {value: undefined});
+
+      expect(getComposedEventTarget(event)).toBe(div);
+    });
+
+    test('returns event.target when composedPath returns an empty array', () => {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      onTestFinished(() => {
+        document.body.removeChild(div);
+      });
+
+      const event = new Event('custom');
+      Object.defineProperty(event, 'target', {value: div});
+      Object.defineProperty(event, 'composedPath', {
+        value: () => [],
+      });
+
+      expect(getComposedEventTarget(event)).toBe(div);
+    });
+  });
+
+  describe('window-attached pointerdown listener (shadow root regression)', () => {
+    test.skipIf(!SUPPORTS_COMPOSED_RANGES)(
+      'rootElement.contains(getComposedEventTarget(event)) is true for clicks inside the shadow editor',
+      () => {
+        const {contentEditable} = setUpShadowEditor('Hello');
+        const root = contentEditable;
+
+        let matched = false;
+        const listener = (event: PointerEvent) => {
+          const target = getComposedEventTarget(event);
+          // Mirrors LexicalTableSelectionHelpers' pointerdown gate.
+          matched =
+            target !== null && target instanceof Node && root.contains(target);
+        };
+        window.addEventListener('pointerdown', listener);
+        onTestFinished(() =>
+          window.removeEventListener('pointerdown', listener),
+        );
+
+        const textNode = contentEditable.querySelector('span') as HTMLElement;
+        textNode.dispatchEvent(
+          new PointerEvent('pointerdown', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
+
+        expect(matched).toBe(true);
+      },
+    );
+  });
+
+  describe('shadow-aware querySelector helpers', () => {
+    test('descends open shadow roots when collecting editors', () => {
+      const outer = document.createElement('div');
+      document.body.appendChild(outer);
+      onTestFinished(() => {
+        document.body.removeChild(outer);
+      });
+      const shadowOuter = outer.attachShadow({mode: 'open'});
+      const inner = document.createElement('div');
+      shadowOuter.appendChild(inner);
+      const shadowInner = inner.attachShadow({mode: 'open'});
+      const editorDiv = document.createElement('div');
+      editorDiv.setAttribute('data-lexical-editor', 'true');
+      shadowInner.appendChild(editorDiv);
+
+      // Mirrors devtools queryLexicalNodes / LexicalUpdates' iterContentEditables.
+      const out: Element[] = [];
+      function collect(root: Document | ShadowRoot): void {
+        for (const el of root.querySelectorAll('[data-lexical-editor]')) {
+          out.push(el);
+        }
+        for (const el of root.querySelectorAll('*')) {
+          if (el.shadowRoot !== null) {
+            collect(el.shadowRoot);
+          }
+        }
+      }
+      collect(document);
+
+      expect(out).toContain(editorDiv);
+    });
+
+    test('descends open shadow roots from elementFromPoint', () => {
+      const outer = document.createElement('div');
+      outer.style.position = 'fixed';
+      outer.style.left = '0';
+      outer.style.top = '0';
+      outer.style.width = '40px';
+      outer.style.height = '40px';
+      document.body.appendChild(outer);
+      onTestFinished(() => {
+        document.body.removeChild(outer);
+      });
+      const shadow = outer.attachShadow({mode: 'open'});
+      const inner = document.createElement('div');
+      inner.style.width = '40px';
+      inner.style.height = '40px';
+      shadow.appendChild(inner);
+
+      // Mirrors devtools element-picker's descent loop.
+      let hit: Element | null = document.elementFromPoint(10, 10);
+      while (hit !== null && hit.shadowRoot !== null) {
+        const next = hit.shadowRoot.elementFromPoint(10, 10);
+        if (next === null || next === hit) {
+          break;
+        }
+        hit = next;
+      }
+
+      expect(hit).toBe(inner);
+    });
+  });
+
+  describe('scroll listener attached to a shadow root', () => {
+    // getDOMShadowRoots walks every enclosing shadow root for a deeply
+    // nested node, innermost first. LexicalMenu's reposition path now
+    // keys this walk off the editor root (not the floating target), but
+    // the walk semantics — listener attachment order, multi-level
+    // coverage — still need to hold whenever a caller passes a node
+    // sitting inside nested shadow trees.
+    test('catches scrolls at every enclosing shadow root for a nested node', async () => {
+      const outerHost = document.createElement('div');
+      document.body.appendChild(outerHost);
+      onTestFinished(() => {
+        document.body.removeChild(outerHost);
+      });
+      const outerShadow = outerHost.attachShadow({mode: 'open'});
+
+      // Outer scroller wraps the inner shadow host.
+      const outerScroller = document.createElement('div');
+      outerScroller.style.height = '60px';
+      outerScroller.style.overflow = 'auto';
+      const innerHost = document.createElement('div');
+      innerHost.style.height = '400px';
+      outerScroller.appendChild(innerHost);
+      outerShadow.appendChild(outerScroller);
+      const innerShadow = innerHost.attachShadow({mode: 'open'});
+
+      // Inner scroller inside the inner shadow.
+      const innerScroller = document.createElement('div');
+      innerScroller.style.height = '40px';
+      innerScroller.style.overflow = 'auto';
+      const innerTall = document.createElement('div');
+      innerTall.style.height = '300px';
+      const target = document.createElement('span');
+      target.textContent = 'target';
+      innerTall.appendChild(target);
+      innerScroller.appendChild(innerTall);
+      innerShadow.appendChild(innerScroller);
+
+      // Walk every enclosing shadow root via getDOMShadowRoots and attach a
+      // listener on each. (LexicalMenu's reposition path now walks from the
+      // editor root rather than the target, but the same multi-level walk
+      // semantics apply whichever node a caller hands in.)
+      const enclosing = getDOMShadowRoots(target);
+      expect(enclosing).toEqual([innerShadow, outerShadow]);
+
+      let firedFor: ShadowRoot[] = [];
+      const handlersByRoot = new Map<ShadowRoot, () => void>();
+      for (const root of enclosing) {
+        const handler = () => {
+          firedFor.push(root);
+        };
+        handlersByRoot.set(root, handler);
+        root.addEventListener('scroll', handler, {
+          capture: true,
+          passive: true,
+        });
+      }
+      onTestFinished(() => {
+        for (const [root, handler] of handlersByRoot) {
+          root.removeEventListener('scroll', handler, true);
+        }
+      });
+
+      // Scrolling the outer scroller fires on the outer shadow only.
+      outerScroller.scrollTop = 50;
+      await new Promise<void>(resolve =>
+        requestAnimationFrame(() => resolve()),
+      );
+      expect(firedFor).toEqual([outerShadow]);
+
+      // Scrolling the inner scroller fires on the inner shadow only.
+      firedFor = [];
+      innerScroller.scrollTop = 50;
+      await new Promise<void>(resolve =>
+        requestAnimationFrame(() => resolve()),
+      );
+      expect(firedFor).toEqual([innerShadow]);
+    });
+
+    // Comment 8 regression: editor + scroll container live in an open
+    // shadow root, floating menu portaled to document.body. Keying
+    // getDOMShadowRoots off the portaled target (the original bug)
+    // returns [] and registers no shadow listener, so internal scrolls
+    // never reposition the menu. The fix keys off the editor root.
+    test('keys the walk off the editor root when the target is portaled to light DOM', async () => {
+      const host = document.createElement('div');
+      document.body.appendChild(host);
+      onTestFinished(() => host.remove());
+      const shadow = host.attachShadow({mode: 'open'});
+
+      const editorScroller = document.createElement('div');
+      editorScroller.style.height = '60px';
+      editorScroller.style.overflow = 'auto';
+      const editorRoot = document.createElement('div');
+      editorRoot.style.height = '400px';
+      editorScroller.appendChild(editorRoot);
+      shadow.appendChild(editorScroller);
+
+      const target = document.createElement('div');
+      document.body.appendChild(target);
+      onTestFinished(() => target.remove());
+
+      // The original bug: walking from the portaled target sees nothing.
+      expect(getDOMShadowRoots(target)).toEqual([]);
+      // The fix: walking from the editor root reaches the shadow.
+      expect(getDOMShadowRoots(editorRoot)).toEqual([shadow]);
+
+      let shadowScrollFired = false;
+      const handler = () => {
+        shadowScrollFired = true;
+      };
+      shadow.addEventListener('scroll', handler, {
+        capture: true,
+        passive: true,
+      });
+      onTestFinished(() => shadow.removeEventListener('scroll', handler, true));
+
+      editorScroller.scrollTop = 50;
+      await new Promise<void>(resolve =>
+        requestAnimationFrame(() => resolve()),
+      );
+      expect(shadowScrollFired).toBe(true);
+    });
+  });
+
+  test('findAllLexicalElementsDeep yields elements inside open shadow roots', () => {
+    // Regression cover for findEditorRootByKey's silent move→copy degrade:
+    // a flat doc.querySelectorAll for [data-lexical-editor="true"] cannot see
+    // editors mounted inside a shadow tree, so the helper has to descend.
+    const host = document.createElement('div');
+    const shadow = host.attachShadow({mode: 'open'});
+    const target = document.createElement('div');
+    target.setAttribute('data-lexical-editor', 'true');
+    shadow.appendChild(target);
+    document.body.appendChild(host);
+    onTestFinished(() => host.remove());
+
+    const found = Array.from(findAllLexicalElementsDeep(document));
+    expect(found).toEqual([target]);
+  });
+
+  test('findAllLexicalElementsDeep descends through nested shadow roots', () => {
+    const outerHost = document.createElement('div');
+    const outerShadow = outerHost.attachShadow({mode: 'open'});
+    const innerHost = document.createElement('div');
+    const innerShadow = innerHost.attachShadow({mode: 'open'});
+    const target = document.createElement('div');
+    target.setAttribute('data-lexical-editor', 'true');
+    innerShadow.appendChild(target);
+    outerShadow.appendChild(innerHost);
+    document.body.appendChild(outerHost);
+    onTestFinished(() => outerHost.remove());
+
+    const found = Array.from(findAllLexicalElementsDeep(document));
+    expect(found).toEqual([target]);
+  });
+
+  describe('getActiveElementDeep through nested shadow roots', () => {
+    test('descends to the focused element while the shallow read stops at the host', () => {
+      // Two-level shadow nesting with a focused <input> at the bottom. This is
+      // the shape `$updateDOMSelection`'s gate needs to identify so a foreign
+      // input inside a decorator's nested shadow root isn't mis-attributed to
+      // the outer editor under a collaboration update.
+      const outerHost = document.createElement('div');
+      document.body.appendChild(outerHost);
+      const outerShadow = outerHost.attachShadow({mode: 'open'});
+      const innerHost = document.createElement('div');
+      outerShadow.appendChild(innerHost);
+      const innerShadow = innerHost.attachShadow({mode: 'open'});
+      const input = document.createElement('input');
+      innerShadow.appendChild(input);
+      onTestFinished(() => outerHost.remove());
+
+      input.focus();
+
+      // Shallow retargets to the outermost shadow host.
+      expect(getActiveElement(document)).toBe(outerHost);
+      // Deep descends through both shadow boundaries to the input itself.
+      expect(getActiveElementDeep(document)).toBe(input);
+    });
+  });
+
+  describe('selectionchange attribution under nesting', () => {
+    test('attributes to the inner shadow-mounted editor over its light-DOM parent', async () => {
+      // Outer editor in the light DOM; inner editor inside an open shadow root
+      // nested in the outer host. Without the shadow-mounted-first ordering in
+      // onDocumentSelectionChange, the outer editor's getNearestEditorFromDOMNode
+      // walk would reach the inner host first and the outer editor would win
+      // attribution — even though the selection actually lives in the inner.
+      const outerHost = document.createElement('div');
+      outerHost.contentEditable = 'true';
+      document.body.appendChild(outerHost);
+
+      const outerEditor = buildEditorFromExtensions(
+        defineExtension({
+          $initialEditorState: () => $prepopulate('Outer light DOM'),
+          name: 'shadow-attribution-outer',
+          onError: error => {
+            throw error;
+          },
+        }),
+      );
+      outerEditor.setRootElement(outerHost);
+
+      const innerHost = document.createElement('div');
+      outerHost.appendChild(innerHost);
+      // Mark the inner host as unmanaged so the outer editor's reconciler
+      // leaves the nested subtree alone.
+      setDOMUnmanaged(innerHost);
+      const innerShadow = innerHost.attachShadow({mode: 'open'});
+      const innerContentEditable = document.createElement('div');
+      innerContentEditable.contentEditable = 'true';
+      innerShadow.appendChild(innerContentEditable);
+
+      const innerEditor = buildEditorFromExtensions(
+        defineExtension({
+          $initialEditorState: () => $prepopulate('Inner shadow root'),
+          name: 'shadow-attribution-inner',
+          onError: error => {
+            throw error;
+          },
+        }),
+      );
+      innerEditor.setRootElement(innerContentEditable);
+
+      onTestFinished(() => {
+        innerEditor.setRootElement(null);
+        outerEditor.setRootElement(null);
+        outerHost.remove();
+      });
+
+      // SELECTION_CHANGE_COMMAND fires only on the editor that
+      // onDocumentSelectionChange picked as nextActiveEditor — the cleanest
+      // observable signal of attribution.
+      let outerHits = 0;
+      let innerHits = 0;
+      const cleanupOuter = outerEditor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          outerHits += 1;
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      );
+      const cleanupInner = innerEditor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          innerHits += 1;
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      );
+      onTestFinished(() => {
+        cleanupInner();
+        cleanupOuter();
+      });
+
+      // Drop the caret inside the inner editor's text node and dispatch a
+      // synthetic selectionchange — Selection.setBaseAndExtent across shadow
+      // boundaries is the supported platform path here.
+      const innerTextNode = getInnerTextNode(innerContentEditable);
+      const selection = innerContentEditable.ownerDocument.getSelection();
+      assert(selection !== null);
+      selection.setBaseAndExtent(innerTextNode, 0, innerTextNode, 0);
+      document.dispatchEvent(new Event('selectionchange'));
+
+      // Drain multiple microtask ticks: the deferred selectionchange handler
+      // may dispatch SELECTION_CHANGE_COMMAND through another microtask.
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(innerHits).toBeGreaterThan(0);
+      expect(outerHits).toBe(0);
+    });
+  });
+
+  describe('caretFromPoint shadow fallback', () => {
+    test('resolves a text node and offset inside the shadow tree', () => {
+      const {contentEditable} = setUpShadowEditor('Hello world');
+      const textNode = getInnerTextNode(contentEditable);
+      // Place a collapsed range at offset 5 ("Hello|") to get its coordinates.
+      const range = document.createRange();
+      range.setStart(textNode, 5);
+      range.collapse(true);
+      const rect = range.getBoundingClientRect();
+      // caretFromPoint should resolve back to the same text node near offset 5.
+      const result = caretFromPoint(
+        rect.left,
+        rect.top + rect.height / 2,
+        contentEditable,
+      );
+      expect(result).not.toBeNull();
+      expect(result!.node).toBe(textNode);
+      expect(result!.offset).toBeGreaterThanOrEqual(4);
+      expect(result!.offset).toBeLessThanOrEqual(6);
+    });
+
+    test('returns null for coordinates outside the editor', () => {
+      const {contentEditable} = setUpShadowEditor('Hello');
+      // Coordinates far outside the editor.
+      const result = caretFromPoint(-9999, -9999, contentEditable);
+      expect(result).toBeNull();
+    });
+
+    test('vertical-first comparison picks the correct line on a wrapped span', () => {
+      // Single text node forced to wrap via break-all into 2+ lines with
+      // unequal widths (7 chars in a narrow container).  Drop at (x =
+      // right edge of line 1, y = line 2 midpoint).  Euclidean distance
+      // (Math.hypot) picks line 1's right-end caret; vertical-first
+      // correctly picks line 2.
+      const {contentEditable} = setUpShadowEditor('AAAAAAA');
+      contentEditable.style.width = '40px';
+      contentEditable.style.wordBreak = 'break-all';
+      contentEditable.style.font = '16px monospace';
+
+      const textNode = getInnerTextNode(contentEditable);
+      const originalCaretPos = document.caretPositionFromPoint;
+      document.caretPositionFromPoint =
+        undefined as unknown as typeof document.caretPositionFromPoint;
+      onTestFinished(() => {
+        document.caretPositionFromPoint = originalCaretPos;
+      });
+
+      const rects = (() => {
+        const r = document.createRange();
+        r.selectNodeContents(textNode);
+        return Array.from(r.getClientRects());
+      })();
+      assert(rects.length >= 2, 'text must wrap into at least 2 lines');
+      const firstLineRect = rects[0];
+      const secondLineRect = rects[1];
+      assert(
+        firstLineRect.width > secondLineRect.width,
+        'line 1 must be wider than line 2 for the mispick scenario',
+      );
+      // Drop at right edge of line 1, vertically on line 2.
+      const dropX = firstLineRect.right - 2;
+      const dropY = secondLineRect.top + secondLineRect.height / 2;
+
+      const result = caretFromPoint(dropX, dropY, contentEditable);
+      expect(result).not.toBeNull();
+      expect(result!.node).toBe(textNode);
+      // The resolved offset must be on the second line.
+      const verifyRange = document.createRange();
+      verifyRange.setStart(result!.node, result!.offset);
+      verifyRange.collapse(true);
+      const caretRect = verifyRange.getBoundingClientRect();
+      expect(caretRect.top).toBeGreaterThanOrEqual(secondLineRect.top - 1);
+    });
+
+    test('falls through to caretRangeFromPoint when element has no text nodes', () => {
+      const {contentEditable} = setUpShadowEditor('Hello');
+      // Stub caretPositionFromPoint to force the fallback path.
+      const originalCaretPos = document.caretPositionFromPoint;
+      document.caretPositionFromPoint =
+        undefined as unknown as typeof document.caretPositionFromPoint;
+      onTestFinished(() => {
+        document.caretPositionFromPoint = originalCaretPos;
+      });
+
+      // Insert an empty div inside the shadow editor so elementFromPoint
+      // hits an element with no text children.
+      const emptyDiv = document.createElement('div');
+      emptyDiv.style.height = '20px';
+      emptyDiv.style.width = '100px';
+      contentEditable.prepend(emptyDiv);
+
+      const rect = emptyDiv.getBoundingClientRect();
+      const result = caretFromPoint(
+        rect.left + 5,
+        rect.top + 5,
+        contentEditable,
+      );
+      // findTextOffsetAtPoint returns null (no text in emptyDiv), so
+      // caretFromPoint falls through to caretRangeFromPoint.  The
+      // important invariant: no silent snap to {emptyDiv, 0}.
+      expect(result).not.toBeNull();
+      expect(result!.node).not.toBe(emptyDiv);
+    });
+  });
+});
diff --git a/packages/lexical/src/__tests__/unit/LexicalUtils.test.ts b/packages/lexical/src/__tests__/unit/LexicalUtils.test.ts
index 14fec7aeb4e..58f9d878a9d 100644
--- a/packages/lexical/src/__tests__/unit/LexicalUtils.test.ts
+++ b/packages/lexical/src/__tests__/unit/LexicalUtils.test.ts
@@ -20,6 +20,7 @@ import {
   $setState,
   createEditor,
   createState,
+  getParentElement,
   getRegisteredSubtypeMap,
   getTextDirection,
   IS_APPLE,
@@ -32,7 +33,15 @@ import {
   TabNode,
   TextNode,
 } from 'lexical';
-import {afterEach, beforeEach, describe, expect, test, vi} from 'vitest';
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  onTestFinished,
+  test,
+  vi,
+} from 'vitest';
 
 import {
   $updateTextNodeFromDOMContent,
@@ -1100,3 +1109,64 @@ describe('$updateTextNodeFromDOMContent', () => {
     });
   });
 });
+
+describe('getParentElement', () => {
+  test('crosses ShadowRoot to host when parentElement is null', () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    onTestFinished(() => host.remove());
+    const shadow = host.attachShadow({mode: 'open'});
+    const child = document.createElement('span');
+    shadow.appendChild(child);
+
+    expect(getParentElement(child)).toBe(host);
+  });
+
+  test('returns the light-DOM parentElement when present', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+    onTestFinished(() => parent.remove());
+
+    expect(getParentElement(child)).toBe(parent);
+  });
+
+  test('crosses one ShadowRoot per call for nested shadow trees', () => {
+    const outerHost = document.createElement('div');
+    document.body.appendChild(outerHost);
+    onTestFinished(() => outerHost.remove());
+    const outerShadow = outerHost.attachShadow({mode: 'open'});
+    const innerHost = document.createElement('div');
+    outerShadow.appendChild(innerHost);
+    const innerShadow = innerHost.attachShadow({mode: 'open'});
+    const grandchild = document.createElement('span');
+    innerShadow.appendChild(grandchild);
+
+    // First call crosses the inner shadow boundary up to its host.
+    expect(getParentElement(grandchild)).toBe(innerHost);
+    // A second call from the inner host crosses the outer shadow boundary.
+    expect(getParentElement(innerHost)).toBe(outerHost);
+  });
+
+  test('returns null for a detached node with no parent', () => {
+    const orphan = document.createElement('span');
+    expect(getParentElement(orphan)).toBeNull();
+  });
+
+  test('returns parent element for a text node inside a shadow tree', () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    onTestFinished(() => host.remove());
+    const shadow = host.attachShadow({mode: 'open'});
+    const span = document.createElement('span');
+    shadow.appendChild(span);
+    const text = document.createTextNode('hello');
+    span.appendChild(text);
+
+    // Text node's parentElement is the span (no boundary crossed yet).
+    expect(getParentElement(text)).toBe(span);
+    // From the span, the next call crosses the shadow boundary to the host.
+    expect(getParentElement(span)).toBe(host);
+  });
+});
diff --git a/packages/lexical/src/index.ts b/packages/lexical/src/index.ts
index 8caca3d4acd..e077eb9754a 100644
--- a/packages/lexical/src/index.ts
+++ b/packages/lexical/src/index.ts
@@ -321,15 +321,27 @@ export {
   $setFormatFromDOM,
   $setSelection,
   $splitNode,
+  type DOMSelectionBoundaryPoints,
+  findAllLexicalElementsDeep,
+  getActiveElement,
+  getActiveElementDeep,
+  getComposedEventTarget,
+  getComposedStaticRange,
   getDOMOwnerDocument,
   getDOMSelection,
   getDOMSelectionFromTarget,
+  getDOMSelectionPoints,
+  getDOMSelectionRange,
+  getDOMSelectionRangeAndPoints,
+  getDOMShadowRoots,
   getDOMTextNode,
   getEditorPropertyFromDOMNode,
   getNearestEditorFromDOMNode,
+  getParentElement,
   getRegisteredNode,
   getRegisteredNodeOrThrow,
   getRegisteredSubtypeMap,
+  getRootOwnerDocument,
   getStaticNodeConfig,
   getTextDirection,
   INTERNAL_$isBlock,
@@ -338,6 +350,7 @@ export {
   isDOMCapturingSelection,
   isDOMDocumentNode,
   isDOMNode,
+  isDOMShadowRoot,
   isDOMTextNode,
   isDOMUnmanaged,
   isExactShortcutMatch,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 312d2440857..f966cbce85e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -361,6 +361,106 @@ importers:
         specifier: 4.61.0
         version: 4.61.0
 
+  dev-examples/shadow-dom:
+    dependencies:
+      '@lexical/extension':
+        specifier: workspace:*
+        version: link:../../packages/lexical-extension
+      '@lexical/history':
+        specifier: workspace:*
+        version: link:../../packages/lexical-history
+      '@lexical/link':
+        specifier: workspace:*
+        version: link:../../packages/lexical-link
+      '@lexical/list':
+        specifier: workspace:*
+        version: link:../../packages/lexical-list
+      '@lexical/react':
+        specifier: workspace:*
+        version: link:../../packages/lexical-react
+      '@lexical/rich-text':
+        specifier: workspace:*
+        version: link:../../packages/lexical-rich-text
+      lexical:
+        specifier: workspace:*
+        version: link:../../packages/lexical
+      react:
+        specifier: 19.2.5
+        version: 19.2.5
+      react-dom:
+        specifier: 19.2.5
+        version: 19.2.5(react@19.2.5)
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.60.0
+        version: 1.60.0
+      '@types/react':
+        specifier: ^19.1.2
+        version: 19.2.16
+      '@types/react-dom':
+        specifier: ^19.1.2
+        version: 19.2.3(@types/react@19.2.16)
+      '@vitejs/plugin-react':
+        specifier: ^6.0.2
+        version: 6.0.2(vite@8.0.16(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.0.16
+        version: 8.0.16(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
+    optionalDependencies:
+      '@rollup/rollup-darwin-arm64':
+        specifier: 4.61.0
+        version: 4.61.0
+      '@rollup/rollup-linux-x64-gnu':
+        specifier: 4.61.0
+        version: 4.61.0
+      '@rollup/rollup-win32-x64-msvc':
+        specifier: 4.61.0
+        version: 4.61.0
+      '@rollup/wasm-node':
+        specifier: 4.61.0
+        version: 4.61.0
+
+  dev-examples/shadow-dom-web-component:
+    dependencies:
+      '@lexical/extension':
+        specifier: workspace:*
+        version: link:../../packages/lexical-extension
+      '@lexical/history':
+        specifier: workspace:*
+        version: link:../../packages/lexical-history
+      '@lexical/rich-text':
+        specifier: workspace:*
+        version: link:../../packages/lexical-rich-text
+      lexical:
+        specifier: workspace:*
+        version: link:../../packages/lexical
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.60.0
+        version: 1.60.0
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.0.16
+        version: 8.0.16(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
+    optionalDependencies:
+      '@rollup/rollup-darwin-arm64':
+        specifier: 4.61.0
+        version: 4.61.0
+      '@rollup/rollup-linux-x64-gnu':
+        specifier: 4.61.0
+        version: 4.61.0
+      '@rollup/rollup-win32-x64-msvc':
+        specifier: 4.61.0
+        version: 4.61.0
+      '@rollup/wasm-node':
+        specifier: 4.61.0
+        version: 4.61.0
+
   packages/lexical:
     dependencies:
       '@lexical/internal':
@@ -14659,7 +14759,7 @@ snapshots:
     dependencies:
       '@docusaurus/types': 3.10.1(@swc/core@1.15.24(@swc/helpers@0.5.21))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.15))(esbuild@0.27.7)(html-minifier-terser@7.2.0)(postcss@8.5.15)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@types/history': 4.7.11
-      '@types/react': 19.2.15
+      '@types/react': 19.2.16
       '@types/react-router-config': 5.0.11
       '@types/react-router-dom': 5.3.3
       react: 19.2.5
@@ -14686,7 +14786,7 @@ snapshots:
     dependencies:
       '@docusaurus/types': 3.10.1(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.15))(esbuild@0.27.7)(html-minifier-terser@7.2.0)(postcss@8.5.15)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@types/history': 4.7.11
-      '@types/react': 19.2.15
+      '@types/react': 19.2.16
       '@types/react-router-config': 5.0.11
       '@types/react-router-dom': 5.3.3
       react: 19.2.5
@@ -15271,7 +15371,7 @@ snapshots:
       '@docusaurus/utils': 3.10.1(@swc/core@1.15.24(@swc/helpers@0.5.21))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.15))(esbuild@0.27.7)(html-minifier-terser@7.2.0)(postcss@8.5.15)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@docusaurus/utils-common': 3.10.1(@swc/core@1.15.24(@swc/helpers@0.5.21))(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.15))(esbuild@0.27.7)(html-minifier-terser@7.2.0)(postcss@8.5.15)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@types/history': 4.7.11
-      '@types/react': 19.2.15
+      '@types/react': 19.2.16
       '@types/react-router-config': 5.0.11
       clsx: 2.1.1
       parse-numeric-range: 1.3.0
@@ -15304,7 +15404,7 @@ snapshots:
       '@docusaurus/utils': 3.10.1(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.15))(esbuild@0.27.7)(html-minifier-terser@7.2.0)(postcss@8.5.15)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@docusaurus/utils-common': 3.10.1(clean-css@5.3.3)(cssnano@6.1.2(postcss@8.5.15))(esbuild@0.27.7)(html-minifier-terser@7.2.0)(postcss@8.5.15)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@types/history': 4.7.11
-      '@types/react': 19.2.15
+      '@types/react': 19.2.16
       '@types/react-router-config': 5.0.11
       clsx: 2.1.1
       parse-numeric-range: 1.3.0
@@ -18075,18 +18175,17 @@ snapshots:
   '@types/react-dom@19.2.3(@types/react@19.2.16)':
     dependencies:
       '@types/react': 19.2.16
-    optional: true
 
   '@types/react-router-config@5.0.11':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 19.2.15
+      '@types/react': 19.2.16
       '@types/react-router': 5.1.20
 
   '@types/react-router-dom@5.3.3':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 19.2.15
+      '@types/react': 19.2.16
       '@types/react-router': 5.1.20
 
   '@types/react-router@5.1.20':
diff --git a/vitest.setup.mts b/vitest.setup.mts
index 48652f4038b..3b866a49c2a 100644
--- a/vitest.setup.mts
+++ b/vitest.setup.mts
@@ -20,6 +20,12 @@ vi.mock('@lexical/internal/warnOnlyOnce');
 // playwright e2e suite) do not need any of these patches, so we gate on the
 // jsdom-specific user-agent string and only patch when running there.
 //
+// Each patch is applied per realm (see patchRealm): jsdom gives every iframe
+// its own realm with its own HTMLElement/Range/... constructors, so a patch
+// installed on the top realm's prototypes does not reach nodes created inside
+// an iframe document. The top realm is patched eagerly; iframe realms are
+// patched lazily the first time their window/document is accessed.
+//
 // 1. jsdom >= 24.1.1 collapses an existing text-node DOM selection to the
 //    start of the focused element when HTMLElement.focus() is called on a
 //    contenteditable ancestor. Real browsers (and happy-dom) preserve the
@@ -29,207 +35,258 @@ vi.mock('@lexical/internal/warnOnlyOnce');
 const isJsdom =
   typeof navigator !== 'undefined' && /\bjsdom\//.test(navigator.userAgent);
 if (isJsdom) {
-  const polyfill =
-    <Name extends string>(k: Name) =>
+  type RealmGlobal = Window & typeof globalThis;
+
+  // Name a stub so the cross-realm "same constructor" checks that compare by
+  // function name (e.g. objectKlassEquals) keep working.
+  const named =
+    <Name extends string>(name: Name) =>
     // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-    <T extends Function>(o: T): void => {
-      const g = globalThis as {[K in Name]?: T};
-      if (typeof g[k] !== 'function') {
-        g[k] = Object.defineProperty(o, 'name', {value: k});
-      }
-    };
-  const originalFocus = HTMLElement.prototype.focus;
-  function focusPreservingSelection(
-    this: HTMLElement,
-    options?: FocusOptions,
-  ): void {
-    const sel = document.getSelection();
-    const snapshot =
-      sel && sel.rangeCount > 0
-        ? {
-            anchorNode: sel.anchorNode,
-            anchorOffset: sel.anchorOffset,
-            focusNode: sel.focusNode,
-            focusOffset: sel.focusOffset,
-          }
-        : null;
-    originalFocus.call(this, options);
-    if (
-      snapshot !== null &&
-      snapshot.anchorNode !== null &&
-      snapshot.focusNode !== null &&
-      this.contains(snapshot.anchorNode) &&
-      this.contains(snapshot.focusNode) &&
-      sel !== null &&
-      (sel.anchorNode !== snapshot.anchorNode ||
-        sel.anchorOffset !== snapshot.anchorOffset ||
-        sel.focusNode !== snapshot.focusNode ||
-        sel.focusOffset !== snapshot.focusOffset)
-    ) {
-      try {
-        sel.setBaseAndExtent(
-          snapshot.anchorNode,
-          snapshot.anchorOffset,
-          snapshot.focusNode,
-          snapshot.focusOffset,
-        );
-      } catch {
-        // Ignore restoration failures; tests that depend on selection will
-        // surface them downstream.
-      }
-    }
-  }
-  HTMLElement.prototype.focus = focusPreservingSelection;
+    <T extends Function>(o: T): T =>
+      Object.defineProperty(o, 'name', {value: name});
 
-  // jsdom's HTMLElement.contentEditable is a plain property that doesn't
-  // synchronize with the 'contenteditable' DOM attribute. Real browsers
-  // (and the spec) require them to stay in sync, so override the
-  // property to delegate to getAttribute/setAttribute.
-  const ceDescriptor = Object.getOwnPropertyDescriptor(
-    HTMLElement.prototype,
-    'contentEditable',
-  );
-  if (!ceDescriptor || ceDescriptor.configurable !== false) {
-    Object.defineProperty(HTMLElement.prototype, 'contentEditable', {
-      configurable: true,
-      get(this: HTMLElement) {
-        const attr = this.getAttribute('contenteditable');
-        if (attr === 'true' || attr === '') {
-          return 'true';
+  // Value globals jsdom does not implement. Defined once and shared across
+  // every realm that lacks them — the constructor identity is unimportant for
+  // these field-carrying stubs, and sharing keeps them in sync.
+  const stubGlobals: {readonly [k: string]: unknown} = {
+    ClipboardEvent: named('ClipboardEvent')(
+      class ClipboardEventMock extends Event implements ClipboardEvent {
+        clipboardData: null | DataTransfer;
+        constructor(type: string, options?: ClipboardEventInit) {
+          super(type, options);
+          this.clipboardData = (options && options.clipboardData) || null;
+        }
+      },
+    ),
+    DataTransfer: named('DataTransfer')(
+      class DataTransferMock implements DataTransfer {
+        _data: Map<string, string> = new Map();
+        #normalizeType(key: string): string {
+          const lowercase = key.toLowerCase();
+          return lowercase === 'text'
+            ? 'text/plain'
+            : lowercase === 'url'
+              ? 'text/uri-list'
+              : lowercase;
+        }
+        get dropEffect(): DataTransfer['dropEffect'] {
+          throw new Error('Getter not implemented.');
+        }
+        get effectAllowed(): DataTransfer['effectAllowed'] {
+          throw new Error('Getter not implemented.');
+        }
+        get files(): FileList {
+          const files: File[] = [];
+          return {
+            item: (index: number) => files[index] || null,
+            get length() {
+              return files.length;
+            },
+            get [Symbol.iterator]() {
+              return files[Symbol.iterator];
+            },
+          };
+        }
+        get items(): DataTransferItemList {
+          throw new Error('Getter not implemented.');
         }
-        if (attr === 'false') {
-          return 'false';
+        get types(): readonly string[] {
+          return [...this._data.keys()];
+        }
+        clearData(dataType?: string): void {
+          if (dataType) {
+            this._data.delete(this.#normalizeType(dataType));
+          } else {
+            this._data.clear();
+          }
+        }
+        getData(dataType: string): string {
+          const normalized = this.#normalizeType(dataType);
+          const data = this._data.get(normalized) || '';
+          return dataType === 'url'
+            ? data.split(/\r?\n/).find(line => /^[^#]/.test(line)) || ''
+            : data;
+        }
+        setData(dataType: string, data: string): void {
+          this._data.set(this.#normalizeType(dataType), data);
+        }
+        setDragImage(image: Element, x: number, y: number): void {
+          // ignored
+        }
+      },
+    ),
+    DragEvent: named('DragEvent')(
+      class DragEventMock extends MouseEvent implements DragEvent {
+        dataTransfer: DataTransfer | null = null;
+        constructor(type: string, options?: DragEventInit) {
+          super(type, options);
+          this.dataTransfer = (options && options.dataTransfer) || null;
         }
-        return 'inherit';
       },
-      set(this: HTMLElement, value: string) {
-        if (value === 'inherit') {
-          this.removeAttribute('contenteditable');
-        } else {
-          this.setAttribute('contenteditable', value);
+    ),
+    PointerEvent: named('PointerEvent')(
+      class PointerEventMock extends MouseEvent {
+        pointerType: string;
+        constructor(type: string, options?: PointerEventInit) {
+          super(type, options);
+          this.pointerType = (options && options.pointerType) || 'mouse';
         }
       },
-    });
-  }
+    ),
+    execCommand: named('execCommand')(function execCommandMock(
+      commandId: string,
+      showUI?: boolean,
+      value?: string,
+    ): boolean {
+      return true;
+    }),
+  };
 
-  if (typeof Range.prototype.getBoundingClientRect !== 'function') {
-    // jsdom does not implement layout, so a zero-rect stub is sufficient
-    // for code paths that only need a DOMRect-shaped value (like
-    // Lexical's scroll-into-view computation).
-    Range.prototype.getBoundingClientRect = function (): DOMRect {
-      return {
-        bottom: 0,
-        height: 0,
-        left: 0,
-        right: 0,
-        toJSON() {
-          return this;
-        },
-        top: 0,
-        width: 0,
-        x: 0,
-        y: 0,
-      } as DOMRect;
-    };
-  }
+  // Apply every jsdom stub to one realm. Idempotent, so it is safe to call on
+  // each access of an iframe's contentWindow/contentDocument.
+  const patchedRealms = new WeakSet<object>();
+  const patchRealm = (win: RealmGlobal): void => {
+    if (patchedRealms.has(win)) {
+      return;
+    }
+    patchedRealms.add(win);
 
-  // jsdom does not implement PointerEvent. Provide a minimal subclass of
-  // Event carrying the fields our event handlers read (button, buttons,
-  // clientX/Y, pointerType). Tests that need richer behavior can extend
-  // or override per-event.
-  polyfill('PointerEvent')(
-    class PointerEventMock extends MouseEvent {
-      pointerType: string;
-      constructor(type: string, options?: PointerEventInit) {
-        super(type, options);
-        this.pointerType = (options && options.pointerType) || 'mouse';
+    const g = win as unknown as Record<string, unknown>;
+    for (const k in stubGlobals) {
+      if (typeof g[k] !== 'function') {
+        g[k] = stubGlobals[k];
       }
-    },
-  );
+    }
 
-  polyfill('ClipboardEvent')(
-    class ClipboardEventMock extends Event implements ClipboardEvent {
-      clipboardData: null | DataTransfer;
-      constructor(type: string, options?: ClipboardEventInit) {
-        super(type, options);
-        this.clipboardData = (options && options.clipboardData) || null;
+    const originalFocus = win.HTMLElement.prototype.focus;
+    win.HTMLElement.prototype.focus = function focusPreservingSelection(
+      this: HTMLElement,
+      options?: FocusOptions,
+    ): void {
+      const sel = this.ownerDocument.getSelection();
+      const snapshot =
+        sel && sel.rangeCount > 0
+          ? {
+              anchorNode: sel.anchorNode,
+              anchorOffset: sel.anchorOffset,
+              focusNode: sel.focusNode,
+              focusOffset: sel.focusOffset,
+            }
+          : null;
+      originalFocus.call(this, options);
+      if (
+        snapshot !== null &&
+        snapshot.anchorNode !== null &&
+        snapshot.focusNode !== null &&
+        this.contains(snapshot.anchorNode) &&
+        this.contains(snapshot.focusNode) &&
+        sel !== null &&
+        (sel.anchorNode !== snapshot.anchorNode ||
+          sel.anchorOffset !== snapshot.anchorOffset ||
+          sel.focusNode !== snapshot.focusNode ||
+          sel.focusOffset !== snapshot.focusOffset)
+      ) {
+        try {
+          sel.setBaseAndExtent(
+            snapshot.anchorNode,
+            snapshot.anchorOffset,
+            snapshot.focusNode,
+            snapshot.focusOffset,
+          );
+        } catch {
+          // Ignore restoration failures; tests that depend on selection will
+          // surface them downstream.
+        }
       }
-    },
-  );
-
-  polyfill('execCommand')(function execCommandMock(
-    commandId: string,
-    showUI?: boolean,
-    value?: string,
-  ): boolean {
-    return true;
-  });
+    };
 
-  polyfill('DragEvent')(
-    class DragEventMock extends MouseEvent implements DragEvent {
-      dataTransfer: DataTransfer | null = null;
-      constructor(type: string, options?: DragEventInit) {
-        super(type, options);
-        this.dataTransfer = (options && options.dataTransfer) || null;
-      }
-    },
-  );
+    // jsdom's HTMLElement.contentEditable is a plain property that doesn't
+    // synchronize with the 'contenteditable' DOM attribute. Real browsers
+    // (and the spec) require them to stay in sync, so override the
+    // property to delegate to getAttribute/setAttribute.
+    const ceDescriptor = Object.getOwnPropertyDescriptor(
+      win.HTMLElement.prototype,
+      'contentEditable',
+    );
+    if (!ceDescriptor || ceDescriptor.configurable !== false) {
+      Object.defineProperty(win.HTMLElement.prototype, 'contentEditable', {
+        configurable: true,
+        get(this: HTMLElement) {
+          const attr = this.getAttribute('contenteditable');
+          if (attr === 'true' || attr === '') {
+            return 'true';
+          }
+          if (attr === 'false') {
+            return 'false';
+          }
+          return 'inherit';
+        },
+        set(this: HTMLElement, value: string) {
+          if (value === 'inherit') {
+            this.removeAttribute('contenteditable');
+          } else {
+            this.setAttribute('contenteditable', value);
+          }
+        },
+      });
+    }
 
-  polyfill('DataTransfer')(
-    class DataTransferMock implements DataTransfer {
-      _data: Map<string, string> = new Map();
-      #normalizeType(key: string): string {
-        const lowercase = key.toLowerCase();
-        return lowercase === 'text'
-          ? 'text/plain'
-          : lowercase === 'url'
-            ? 'text/uri-list'
-            : lowercase;
-      }
-      get dropEffect(): DataTransfer['dropEffect'] {
-        throw new Error('Getter not implemented.');
-      }
-      get effectAllowed(): DataTransfer['effectAllowed'] {
-        throw new Error('Getter not implemented.');
-      }
-      get files(): FileList {
-        const files: File[] = [];
+    if (typeof win.Range.prototype.getBoundingClientRect !== 'function') {
+      // jsdom does not implement layout, so a zero-rect stub is sufficient
+      // for code paths that only need a DOMRect-shaped value (like
+      // Lexical's scroll-into-view computation).
+      win.Range.prototype.getBoundingClientRect = function (): DOMRect {
         return {
-          item: (index: number) => files[index] || null,
-          get length() {
-            return files.length;
-          },
-          get [Symbol.iterator]() {
-            return files[Symbol.iterator];
+          bottom: 0,
+          height: 0,
+          left: 0,
+          right: 0,
+          toJSON() {
+            return this;
           },
-        };
-      }
-      get items(): DataTransferItemList {
-        throw new Error('Getter not implemented.');
-      }
-      get types(): readonly string[] {
-        return [...this._data.keys()];
-      }
-      clearData(dataType?: string): void {
-        if (dataType) {
-          this._data.delete(this.#normalizeType(dataType));
-        } else {
-          this._data.clear();
-        }
-      }
-      getData(dataType: string): string {
-        const normalized = this.#normalizeType(dataType);
-        const data = this._data.get(normalized) || '';
-        return dataType === 'url'
-          ? data.split(/\r?\n/).find(line => /^[^#]/.test(line)) || ''
-          : data;
-      }
-      setData(dataType: string, data: string): void {
-        this._data.set(this.#normalizeType(dataType), data);
-      }
-      setDragImage(image: Element, x: number, y: number): void {
-        // ignored
+          top: 0,
+          width: 0,
+          x: 0,
+          y: 0,
+        } as DOMRect;
+      };
+    }
+
+    // Patch any iframe realm the first time its window or document is read,
+    // so editors mounted inside an iframe see the same stubs. Wrapping the
+    // accessors on this realm's HTMLIFrameElement also covers nested iframes,
+    // since the child realm is itself patched (and re-wrapped) here.
+    for (const prop of ['contentWindow', 'contentDocument'] as const) {
+      const proto = win.HTMLIFrameElement.prototype;
+      const desc = Object.getOwnPropertyDescriptor(proto, prop);
+      if (!desc || typeof desc.get !== 'function' || !desc.configurable) {
+        continue;
       }
-    },
-  );
+      const originalGet = desc.get;
+      Object.defineProperty(proto, prop, {
+        ...desc,
+        get(this: HTMLIFrameElement) {
+          const node = originalGet.call(this) as Window | Document | null;
+          const childWin =
+            node === null
+              ? null
+              : prop === 'contentWindow'
+                ? (node as Window)
+                : (node as Document).defaultView;
+          if (childWin) {
+            try {
+              patchRealm(childWin as RealmGlobal);
+            } catch {
+              // Cross-origin child realm — its globals are inaccessible and
+              // the browser blocks the patch attempt. Same-origin iframes
+              // (the only case the lexical browser tests use) are unaffected.
+            }
+          }
+          return node;
+        },
+      });
+    }
+  };
+
+  patchRealm(globalThis);
 }