diff --git a/packages/quill/src/blots/cursor.ts b/packages/quill/src/blots/cursor.ts
index 4dfb482904..f4c1b2ff11 100644
--- a/packages/quill/src/blots/cursor.ts
+++ b/packages/quill/src/blots/cursor.ts
@@ -3,6 +3,7 @@ import type { Parent, ScrollBlot } from 'parchment';
 import type Selection from '../core/selection.js';
 import TextBlot from './text.js';
 import type { EmbedContextRange } from './embed.js';
+import type { DOMRootType } from '../core/dom-root.js';
 
 class Cursor extends EmbedBlot {
   static blotName = 'cursor';
@@ -21,7 +22,9 @@ class Cursor extends EmbedBlot {
   constructor(scroll: ScrollBlot, domNode: HTMLElement, selection: Selection) {
     super(scroll, domNode);
     this.selection = selection;
-    this.textNode = document.createTextNode(Cursor.CONTENTS);
+    // Access DOMRoot through scroll (enhanced with domRoot property)
+    const domRoot = (scroll as any).domRoot as DOMRootType;
+    this.textNode = domRoot.createTextNode(Cursor.CONTENTS);
     this.domNode.appendChild(this.textNode);
     this.savedLength = 0;
   }
@@ -115,7 +118,8 @@ class Cursor extends EmbedBlot {
       mergedTextBlot = nextTextBlot;
       nextTextBlot.insertAt(0, newText);
     } else {
-      const newTextNode = document.createTextNode(newText);
+      const domRoot = (this.scroll as any).domRoot as DOMRootType;
+      const newTextNode = domRoot.createTextNode(newText);
       mergedTextBlot = this.scroll.create(newTextNode);
       this.parent.insertBefore(mergedTextBlot, this);
     }
diff --git a/packages/quill/src/blots/embed.ts b/packages/quill/src/blots/embed.ts
index 2668b89893..7746ccf11b 100644
--- a/packages/quill/src/blots/embed.ts
+++ b/packages/quill/src/blots/embed.ts
@@ -1,6 +1,7 @@
 import type { ScrollBlot } from 'parchment';
 import { EmbedBlot } from 'parchment';
 import TextBlot from './text.js';
+import type { DOMRootType } from '../core/dom-root.js';
 
 const GUARD_TEXT = '\uFEFF';
 
@@ -18,13 +19,15 @@ class Embed extends EmbedBlot {
 
   constructor(scroll: ScrollBlot, node: Node) {
     super(scroll, node);
-    this.contentNode = document.createElement('span');
+    // Access DOMRoot through scroll (enhanced with domRoot property)
+    const domRoot = (scroll as any).domRoot as DOMRootType;
+    this.contentNode = domRoot.createElement('span') as HTMLSpanElement;
     this.contentNode.setAttribute('contenteditable', 'false');
     Array.from(this.domNode.childNodes).forEach((childNode) => {
       this.contentNode.appendChild(childNode);
     });
-    this.leftGuard = document.createTextNode(GUARD_TEXT);
-    this.rightGuard = document.createTextNode(GUARD_TEXT);
+    this.leftGuard = domRoot.createTextNode(GUARD_TEXT);
+    this.rightGuard = domRoot.createTextNode(GUARD_TEXT);
     this.domNode.appendChild(this.leftGuard);
     this.domNode.appendChild(this.contentNode);
     this.domNode.appendChild(this.rightGuard);
@@ -40,6 +43,8 @@ class Embed extends EmbedBlot {
     let range: EmbedContextRange | null = null;
     let textNode: Text;
     const text = node.data.split(GUARD_TEXT).join('');
+    const domRoot = (this.scroll as any).domRoot as DOMRootType;
+
     if (node === this.leftGuard) {
       if (this.prev instanceof TextBlot) {
         const prevLength = this.prev.length();
@@ -49,7 +54,7 @@ class Embed extends EmbedBlot {
           startOffset: prevLength + text.length,
         };
       } else {
-        textNode = document.createTextNode(text);
+        textNode = domRoot.createTextNode(text);
         this.parent.insertBefore(this.scroll.create(textNode), this);
         range = {
           startNode: textNode,
@@ -64,7 +69,7 @@ class Embed extends EmbedBlot {
           startOffset: text.length,
         };
       } else {
-        textNode = document.createTextNode(text);
+        textNode = domRoot.createTextNode(text);
         this.parent.insertBefore(this.scroll.create(textNode), this.next);
         range = {
           startNode: textNode,
diff --git a/packages/quill/src/blots/scroll.ts b/packages/quill/src/blots/scroll.ts
index 9975e12831..df2a91ce9e 100644
--- a/packages/quill/src/blots/scroll.ts
+++ b/packages/quill/src/blots/scroll.ts
@@ -3,6 +3,7 @@ import type { Blot, Parent, EmbedBlot, ParentBlot, Registry } from 'parchment';
 import Delta, { AttributeMap, Op } from 'quill-delta';
 import Emitter from '../core/emitter.js';
 import type { EmitterSource } from '../core/emitter.js';
+import type { DOMRootType } from '../core/dom-root.js';
 import Block, { BlockEmbed, bubbleFormats } from './block.js';
 import Break from './break.js';
 import Container from './container.js';
@@ -36,15 +37,17 @@ class Scroll extends ScrollBlot {
   static allowedChildren = [Block, BlockEmbed, Container];
 
   emitter: Emitter;
+  domRoot: DOMRootType;
   batch: false | MutationRecord[];
 
   constructor(
     registry: Registry,
     domNode: HTMLDivElement,
-    { emitter }: { emitter: Emitter },
+    { emitter, domRoot }: { emitter: Emitter; domRoot: DOMRootType },
   ) {
     super(registry, domNode);
     this.emitter = emitter;
+    this.domRoot = domRoot;
     this.batch = false;
     this.optimize();
     this.enable();
diff --git a/packages/quill/src/core.ts b/packages/quill/src/core.ts
index 5b8946ad5f..d264b31760 100644
--- a/packages/quill/src/core.ts
+++ b/packages/quill/src/core.ts
@@ -25,6 +25,7 @@ import Input from './modules/input.js';
 import UINode from './modules/uiNode.js';
 
 export { default as Module } from './core/module.js';
+export { default as DOMRoot } from './core/dom-root.js';
 export { Delta, Op, OpIterator, AttributeMap, Parchment, Range };
 export type {
   Bounds,
diff --git a/packages/quill/src/core/dom-root.ts b/packages/quill/src/core/dom-root.ts
new file mode 100644
index 0000000000..5222902c65
--- /dev/null
+++ b/packages/quill/src/core/dom-root.ts
@@ -0,0 +1,390 @@
+/**
+ * Abstract base class for DOM operations that works correctly
+ * in both regular DOM and Shadow DOM contexts.
+ */
+abstract class DOMRoot {
+  protected ownerDocument: Document;
+
+  constructor(protected container: Element) {
+    this.ownerDocument = container.ownerDocument || document;
+  }
+
+  // Abstract methods that must be implemented by subclasses
+  abstract getRoot(): Document | ShadowRoot;
+  abstract isInShadowDOM(): boolean;
+  abstract getSelection(): Selection | null;
+  abstract getActiveElement(): Element | null;
+  abstract addEventListener(
+    type: string,
+    listener: EventListener,
+    options?: AddEventListenerOptions,
+  ): void;
+  abstract removeEventListener(type: string, listener: EventListener): void;
+
+  // Common element queries (can be overridden if needed)
+  querySelector(selector: string): Element | null {
+    return this.getRoot().querySelector(selector);
+  }
+
+  querySelectorAll(selector: string): NodeListOf<Element> {
+    return this.getRoot().querySelectorAll(selector);
+  }
+
+  getElementById(id: string): Element | null {
+    // Shadow roots don't have getElementById, so we use querySelector for consistency
+    return this.getRoot().querySelector(`#${CSS.escape(id)}`);
+  }
+
+  // Common element creation
+  createElement(tagName: string): Element {
+    return this.ownerDocument.createElement(tagName);
+  }
+
+  createTextNode(text: string): Text {
+    return this.ownerDocument.createTextNode(text);
+  }
+
+  createRange(): Range {
+    return this.ownerDocument.createRange();
+  }
+
+  // Common style injection (can be overridden for different behavior)
+  injectCSS(css: string, id?: string): void {
+    // Check for existing style element if ID provided
+    if (id) {
+      const existing = this.querySelector(`style[data-quill-id="${id}"]`);
+      if (existing) {
+        return; // Style already injected
+      }
+    }
+
+    const style = this.createElement('style') as HTMLStyleElement;
+    style.textContent = css;
+
+    if (id) {
+      style.setAttribute('data-quill-id', id);
+    }
+
+    this.appendStyleToRoot(style);
+  }
+
+  injectStylesheet(href: string, id?: string): void {
+    // Check for existing link element if ID provided
+    if (id) {
+      const existing = this.querySelector(`link[data-quill-id="${id}"]`);
+      if (existing) {
+        return; // Stylesheet already loaded
+      }
+    }
+
+    const link = this.createElement('link') as HTMLLinkElement;
+    link.rel = 'stylesheet';
+    link.href = href;
+
+    if (id) {
+      link.setAttribute('data-quill-id', id);
+    }
+
+    this.appendStyleToRoot(link);
+  }
+
+  // Protected helper methods
+  protected abstract appendStyleToRoot(element: HTMLElement): void;
+
+  /**
+   * Gets a native range with browser-specific optimizations.
+   * Base implementation - can be overridden by subclasses.
+   */
+  getNativeRange(): Range | null {
+    const selection = this.getSelection();
+    if (selection == null || selection.rangeCount <= 0) return null;
+    return selection.getRangeAt(0);
+  }
+
+  /**
+   * Sets a native range with browser-specific optimizations.
+   * Base implementation - can be overridden by subclasses.
+   */
+  setNativeRange(
+    startNode: Node,
+    startOffset: number,
+    endNode: Node = startNode,
+    endOffset: number = startOffset,
+  ): boolean {
+    const selection = this.getSelection();
+    if (!selection) return false;
+
+    const range = this.createRange();
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return true;
+  }
+
+}
+
+/**
+ * DOM operations for regular document context.
+ */
+class DocumentRoot extends DOMRoot {
+  private root: Document;
+
+  constructor(container: Element) {
+    super(container);
+    this.root = container.ownerDocument || document;
+  }
+
+  getRoot(): Document {
+    return this.root;
+  }
+
+  isInShadowDOM(): boolean {
+    return false;
+  }
+
+  getSelection(): Selection | null {
+    return this.ownerDocument.defaultView?.getSelection() || null;
+  }
+
+  getActiveElement(): Element | null {
+    return this.root.activeElement;
+  }
+
+  addEventListener(
+    type: string,
+    listener: EventListener,
+    options?: AddEventListenerOptions,
+  ): void {
+    this.root.addEventListener(type, listener, options);
+  }
+
+  removeEventListener(type: string, listener: EventListener): void {
+    this.root.removeEventListener(type, listener);
+  }
+
+  protected appendStyleToRoot(element: HTMLElement): void {
+    this.root.head.appendChild(element);
+  }
+}
+
+/**
+ * DOM operations for Shadow DOM context with Safari-specific optimizations.
+ */
+class ShadowDOMRoot extends DOMRoot {
+  private root: ShadowRoot;
+
+  constructor(container: Element, shadowRoot: ShadowRoot) {
+    super(container);
+    this.root = shadowRoot;
+  }
+
+  getRoot(): ShadowRoot {
+    return this.root;
+  }
+
+  isInShadowDOM(): boolean {
+    return true;
+  }
+
+  getSelection(): Selection | null {
+    // Try shadow root selection first (newer browsers)
+    if (
+      'getSelection' in this.root &&
+      typeof this.root.getSelection === 'function'
+    ) {
+      const shadowSelection = this.root.getSelection();
+      if (shadowSelection) {
+        return shadowSelection;
+      }
+    }
+
+    // Fallback to document selection (but this is often incorrect in Shadow DOM)
+    return this.ownerDocument.defaultView?.getSelection() || null;
+  }
+
+  getActiveElement(): Element | null {
+    let activeElement = this.root.activeElement;
+
+    // Traverse shadow boundaries to find the actual focused element
+    while (activeElement?.shadowRoot?.activeElement) {
+      activeElement = activeElement.shadowRoot.activeElement;
+    }
+
+    return activeElement;
+  }
+
+  addEventListener(
+    type: string,
+    listener: EventListener,
+    options?: AddEventListenerOptions,
+  ): void {
+    this.root.addEventListener(type, listener, options);
+  }
+
+  removeEventListener(type: string, listener: EventListener): void {
+    this.root.removeEventListener(type, listener);
+  }
+
+  protected appendStyleToRoot(element: HTMLElement): void {
+    this.root.appendChild(element);
+  }
+
+  /**
+   * Safari-optimized range detection for Shadow DOM.
+   * Uses getComposedRanges when available for better compatibility.
+   */
+  override getNativeRange(): Range | null {
+    const isSafari = this.isSafari();
+
+    // For Safari in Shadow DOM, always try getComposedRanges first
+    if (isSafari && document.getSelection) {
+      const docSelection = document.getSelection();
+      if ((docSelection as any).getComposedRanges) {
+        try {
+          const composedRanges = (docSelection as any).getComposedRanges(
+            this.root,
+          );
+          if (composedRanges && composedRanges.length > 0) {
+            const composedRange = composedRanges[0];
+            const range = this.createRange();
+            range.setStart(
+              composedRange.startContainer,
+              composedRange.startOffset,
+            );
+            range.setEnd(composedRange.endContainer, composedRange.endOffset);
+            return range;
+          }
+        } catch (error) {
+          // Silently fall back to regular selection
+        }
+      }
+    }
+
+    // Fallback to base implementation
+    return super.getNativeRange();
+  }
+
+  /**
+   * Safari-optimized range setting for Shadow DOM.
+   * Uses setBaseAndExtent for better Safari compatibility.
+   */
+  override setNativeRange(
+    startNode: Node,
+    startOffset: number,
+    endNode: Node = startNode,
+    endOffset: number = startOffset,
+  ): boolean {
+    const selection = this.getSelection();
+    if (!selection) return false;
+
+    // Create the range
+    const range = this.createRange();
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+    selection.removeAllRanges();
+
+    // Safari-specific Shadow DOM workaround
+    const isSafari = this.isSafari();
+    const docSelection = document.getSelection();
+
+    if (isSafari && docSelection?.setBaseAndExtent) {
+      // Use document selection for Safari workaround in Shadow DOM
+      selection.removeAllRanges();
+      docSelection.removeAllRanges();
+      docSelection.setBaseAndExtent(startNode, startOffset, endNode, endOffset);
+      return true;
+    } else if (
+      docSelection &&
+      (docSelection as any).getComposedRanges &&
+      docSelection.setBaseAndExtent
+    ) {
+      // Use setBaseAndExtent for other browsers with composed ranges support
+      selection.removeAllRanges();
+      docSelection.setBaseAndExtent(startNode, startOffset, endNode, endOffset);
+      return true;
+    } else {
+      // Standard addRange approach
+      selection.addRange(range);
+      return true;
+    }
+  }
+
+  /**
+   * Detects the browser family (Chrome, Firefox, Safari).
+   * Note: UA sniffing is unreliable because DevTools responsive/device emulation mode
+   * overrides navigator.userAgent with a simulated device UA (e.g. iPad), masking the
+   * actual engine. Detection is therefore based on engine-level globals and CSS properties,
+   * which are not affected by DevTools overrides. UA string is used as a last resort fallback.
+   */
+  protected detectEngine(): 'firefox' | 'chrome' | 'safari' | null {
+    if ('MozAppearance' in document.documentElement.style) return 'firefox';
+    if ((window as any).chrome != null) return 'chrome';
+    if (/Chrome/i.test(navigator.userAgent)) return 'chrome';        
+    // Chromium-based browsers also support webkit appearance, but are ruled out in the rule above
+    if (CSS.supports('-webkit-appearance', 'none')) return 'safari';
+
+    // Fallback: UA string (less reliable, but better than 'unknown')
+    const ua = navigator.userAgent;
+    if (/Firefox/i.test(ua)) return 'firefox';
+    if (/Safari/i.test(ua)) return 'safari';
+
+    // Unable to detect
+    return null;
+  };
+
+  protected isSafari(): boolean {
+    return this.detectEngine() === 'safari';
+  }
+
+}
+
+/**
+ * Factory function to create the appropriate DOMRoot instance based on context.
+ */
+function createDOMRoot(container: Element): DOMRoot {
+  // Detect if container is within a shadow DOM
+  const shadowRoot = findShadowRoot(container);
+  if (shadowRoot) {
+    return new ShadowDOMRoot(container, shadowRoot);
+  } else {
+    return new DocumentRoot(container);
+  }
+}
+
+/**
+ * Traverses up the DOM tree to find the nearest shadow root.
+ */
+function findShadowRoot(element: Element): ShadowRoot | null {
+  let current: Node | null = element;
+
+  while (current) {
+    // Check if current node is a shadow root
+    if (
+      current.nodeType === Node.DOCUMENT_FRAGMENT_NODE &&
+      (current as ShadowRoot).host
+    ) {
+      return current as ShadowRoot;
+    }
+
+    // Check if current element is a shadow host (has shadowRoot)
+    if (current.nodeType === Node.ELEMENT_NODE) {
+      const shadowRoot = (current as Element).shadowRoot;
+      if (shadowRoot && shadowRoot.contains(element)) {
+        return shadowRoot;
+      }
+    }
+
+    current = current.parentNode;
+  }
+
+  return null;
+}
+
+// Export the factory function as the default export
+export { createDOMRoot as DOMRoot };
+export { DocumentRoot, ShadowDOMRoot };
+export default createDOMRoot;
+
+// Export the base class type for use in type annotations
+export { DOMRoot as DOMRootType };
diff --git a/packages/quill/src/core/editor.ts b/packages/quill/src/core/editor.ts
index b6391a7cd4..f3c3bbe5e8 100644
--- a/packages/quill/src/core/editor.ts
+++ b/packages/quill/src/core/editor.ts
@@ -19,10 +19,12 @@ type SelectionInfo = {
 class Editor {
   scroll: Scroll;
   delta: Delta;
+  convertSpacesToNbsp: boolean;
 
-  constructor(scroll: Scroll) {
+  constructor(scroll: Scroll, convertSpacesToNbsp = true) {
     this.scroll = scroll;
     this.delta = this.getDelta();
+    this.convertSpacesToNbsp = convertSpacesToNbsp;
   }
 
   applyDelta(delta: Delta): Delta {
@@ -201,9 +203,9 @@ class Editor {
       const lineLength = line.length();
       const isWithinLine = line.length() >= lineOffset + length;
       if (isWithinLine && !(lineOffset === 0 && length === lineLength)) {
-        return convertHTML(line, lineOffset, length, true);
+        return convertHTML(line, lineOffset, length, true, this.convertSpacesToNbsp);
       }
-      return convertHTML(this.scroll, index, length, true);
+      return convertHTML(this.scroll, index, length, true, this.convertSpacesToNbsp);
     }
     return '';
   }
@@ -327,13 +329,14 @@ function convertListHTML(
   items: ListItem[],
   lastIndent: number,
   types: string[],
+  convertSpacesToNbsp: boolean,
 ): string {
   if (items.length === 0) {
     const [endTag] = getListType(types.pop());
     if (lastIndent <= 0) {
       return `</li></${endTag}>`;
     }
-    return `</li></${endTag}>${convertListHTML([], lastIndent - 1, types)}`;
+    return `</li></${endTag}>${convertListHTML([], lastIndent - 1, types, convertSpacesToNbsp)}`;
   }
   const [{ child, offset, length, indent, type }, ...rest] = items;
   const [tag, attribute] = getListType(type);
@@ -344,9 +347,11 @@ function convertListHTML(
         child,
         offset,
         length,
-      )}${convertListHTML(rest, indent, types)}`;
+        false,
+        convertSpacesToNbsp,
+      )}${convertListHTML(rest, indent, types, convertSpacesToNbsp)}`;
     }
-    return `<${tag}><li>${convertListHTML(items, lastIndent + 1, types)}`;
+    return `<${tag}><li>${convertListHTML(items, lastIndent + 1, types, convertSpacesToNbsp)}`;
   }
   const previousType = types[types.length - 1];
   if (indent === lastIndent && type === previousType) {
@@ -354,10 +359,12 @@ function convertListHTML(
       child,
       offset,
       length,
-    )}${convertListHTML(rest, indent, types)}`;
+      false,
+      convertSpacesToNbsp,
+    )}${convertListHTML(rest, indent, types, convertSpacesToNbsp)}`;
   }
   const [endTag] = getListType(types.pop());
-  return `</li></${endTag}>${convertListHTML(items, lastIndent - 1, types)}`;
+  return `</li></${endTag}>${convertListHTML(items, lastIndent - 1, types, convertSpacesToNbsp)}`;
 }
 
 function convertHTML(
@@ -365,13 +372,16 @@ function convertHTML(
   index: number,
   length: number,
   isRoot = false,
+  convertSpacesToNbsp = true,
 ): string {
   if ('html' in blot && typeof blot.html === 'function') {
     return blot.html(index, length);
   }
   if (blot instanceof TextBlot) {
     const escapedText = escapeText(blot.value().slice(index, index + length));
-    return escapedText.replaceAll(' ', '&nbsp;');
+    return convertSpacesToNbsp
+      ? escapedText.replaceAll(' ', '&nbsp;')
+      : escapedText;
   }
   if (blot instanceof ParentBlot) {
     // TODO fix API
@@ -390,11 +400,11 @@ function convertHTML(
           type: formats.list,
         });
       });
-      return convertListHTML(items, -1, []);
+      return convertListHTML(items, -1, [], convertSpacesToNbsp);
     }
     const parts: string[] = [];
     blot.children.forEachAt(index, length, (child, offset, childLength) => {
-      parts.push(convertHTML(child, offset, childLength));
+      parts.push(convertHTML(child, offset, childLength, false, convertSpacesToNbsp));
     });
     if (isRoot || blot.statics.blotName === 'list') {
       return parts.join('');
diff --git a/packages/quill/src/core/emitter.ts b/packages/quill/src/core/emitter.ts
index 7e981ed47b..5f2dd4152f 100644
--- a/packages/quill/src/core/emitter.ts
+++ b/packages/quill/src/core/emitter.ts
@@ -1,20 +1,52 @@
 import { EventEmitter } from 'eventemitter3';
 import instances from './instances.js';
 import logger from './logger.js';
+import type { DOMRootType } from './dom-root.js';
 
 const debug = logger('quill:events');
 const EVENTS = ['selectionchange', 'mousedown', 'mouseup', 'click'];
 
-EVENTS.forEach((eventName) => {
-  document.addEventListener(eventName, (...args) => {
-    Array.from(document.querySelectorAll('.ql-container')).forEach((node) => {
-      const quill = instances.get(node);
-      if (quill && quill.emitter) {
-        quill.emitter.handleDOM(...args);
-      }
+// Delegate events to the Quill editors in the document or shadow root.
+const initializedRoots = new WeakSet<Document | ShadowRoot>();
+
+// Initialize global event delegation for a specific root context
+function initializeGlobalEvents(domRoot: DOMRootType) {
+  const root = domRoot.getRoot();
+
+  // Avoid duplicate initialization
+  if (initializedRoots.has(root)) {
+    return;
+  }
+  initializedRoots.add(root);
+
+  EVENTS.forEach((eventName) => {
+    root.addEventListener(eventName, (...args) => {
+      // Find all Quill containers within this root's scope
+      const containers = domRoot.querySelectorAll('.ql-container');
+      containers.forEach((node) => {
+        const quill = instances.get(node);
+        if (quill && quill.emitter) {
+          quill.emitter.handleDOM(...args);
+        }
+      });
+    });
+  });
+}
+
+// Initialize global events for the document (backward compatibility)
+if (typeof document !== 'undefined') {
+  EVENTS.forEach((eventName) => {
+    document.addEventListener(eventName, (...args) => {
+      Array.from(document.querySelectorAll('.ql-container')).forEach((node) => {
+        const quill = instances.get(node);
+        if (quill && quill.emitter) {
+          quill.emitter.handleDOM(...args);
+        }
+      });
     });
   });
-});
+  initializedRoots.add(document);
+}
 
 class Emitter extends EventEmitter<string> {
   static events = {
@@ -67,9 +99,15 @@ class Emitter extends EventEmitter<string> {
     }
     this.domListeners[eventName].push({ node, handler });
   }
+
+  // Initialize global events for a DOMRoot context
+  static initializeGlobalEvents(domRoot: DOMRootType) {
+    initializeGlobalEvents(domRoot);
+  }
 }
 
 export type EmitterSource =
   (typeof Emitter.sources)[keyof typeof Emitter.sources];
 
+export { initializeGlobalEvents };
 export default Emitter;
diff --git a/packages/quill/src/core/quill.ts b/packages/quill/src/core/quill.ts
index dae5267bcb..3e4a6594f6 100644
--- a/packages/quill/src/core/quill.ts
+++ b/packages/quill/src/core/quill.ts
@@ -24,6 +24,8 @@ import type { ThemeConstructor } from './theme.js';
 import scrollRectIntoView from './utils/scrollRectIntoView.js';
 import type { Rect } from './utils/scrollRectIntoView.js';
 import createRegistryWithFormats from './utils/createRegistryWithFormats.js';
+import { DOMRoot } from './dom-root.js';
+import type { DOMRootType } from './dom-root.js';
 
 const debug = logger('quill');
 
@@ -57,6 +59,12 @@ export interface QuillOptions {
    * @default null
    */
   formats?: string[] | null;
+
+  /**
+   * Whether to convert spaces to `&nbsp;` when generating HTML output.
+   * @default true
+   */
+  convertSpacesToNbsp?: boolean;
 }
 
 /**
@@ -71,6 +79,7 @@ export interface ExpandedQuillOptions
   modules: Record<string, unknown>;
   bounds?: HTMLElement | null;
   readOnly: boolean;
+  convertSpacesToNbsp: boolean;
 }
 
 class Quill {
@@ -86,6 +95,7 @@ class Quill {
     readOnly: false,
     registry: globalRegistry,
     theme: 'default',
+    convertSpacesToNbsp: true,
   } satisfies Partial<QuillOptions>;
   static events = Emitter.events;
   static sources = Emitter.sources;
@@ -179,6 +189,7 @@ class Quill {
   root: HTMLDivElement;
   scroll: Scroll;
   emitter: Emitter;
+  domRoot: DOMRootType;
   protected allowReadOnlyEdits: boolean;
   editor: Editor;
   composition: Composition;
@@ -202,6 +213,7 @@ class Quill {
     if (this.options.debug) {
       Quill.debug(this.options.debug);
     }
+    this.domRoot = DOMRoot(this.container);
     const html = this.container.innerHTML.trim();
     this.container.classList.add('ql-container');
     this.container.innerHTML = '';
@@ -209,6 +221,8 @@ class Quill {
     this.root = this.addContainer('ql-editor');
     this.root.classList.add('ql-blank');
     this.emitter = new Emitter();
+    // Initialize global event delegation for this DOMRoot context
+    Emitter.initializeGlobalEvents(this.domRoot);
     const scrollBlotName = Parchment.ScrollBlot.blotName;
     const ScrollBlot = this.options.registry.query(scrollBlotName);
     if (!ScrollBlot || !('blotName' in ScrollBlot)) {
@@ -218,9 +232,10 @@ class Quill {
     }
     this.scroll = new ScrollBlot(this.options.registry, this.root, {
       emitter: this.emitter,
+      domRoot: this.domRoot,
     }) as Scroll;
-    this.editor = new Editor(this.scroll);
-    this.selection = new Selection(this.scroll, this.emitter);
+    this.editor = new Editor(this.scroll, this.options.convertSpacesToNbsp);
+    this.selection = new Selection(this.scroll, this.emitter, this.domRoot);
     this.composition = new Composition(this.scroll, this.emitter);
     this.theme = new this.options.theme(this, this.options); // eslint-disable-line new-cap
     this.keyboard = this.theme.addModule('keyboard');
@@ -287,7 +302,7 @@ class Quill {
   ): HTMLDivElement | HTMLElement {
     if (typeof container === 'string') {
       const className = container;
-      container = document.createElement('div');
+      container = this.domRoot.createElement('div') as HTMLDivElement;
       container.classList.add(className);
     }
     this.container.insertBefore(container, refNode);
@@ -673,7 +688,6 @@ class Quill {
   scrollRectIntoView(rect: Rect) {
     scrollRectIntoView(this.root, rect);
   }
-
   /**
    * @deprecated Use Quill#scrollSelectionIntoView() instead.
    */
@@ -691,6 +705,7 @@ class Quill {
   scrollSelectionIntoView() {
     const range = this.selection.lastRange;
     const bounds = range && this.selection.getBounds(range.index, range.length);
+    console.log('[scrollSelectionIntoView] range:', JSON.stringify(range), 'bounds:', bounds ? JSON.stringify({top: bounds.top, bottom: bounds.bottom, left: bounds.left, right: bounds.right}) : null);
     if (bounds) {
       this.scrollRectIntoView(bounds);
     }
diff --git a/packages/quill/src/core/selection.ts b/packages/quill/src/core/selection.ts
index 33f7f2a576..cc6cfd47c1 100644
--- a/packages/quill/src/core/selection.ts
+++ b/packages/quill/src/core/selection.ts
@@ -5,6 +5,7 @@ import type { EmitterSource } from './emitter.js';
 import logger from './logger.js';
 import type Cursor from '../blots/cursor.js';
 import type Scroll from '../blots/scroll.js';
+import type { DOMRootType } from './dom-root.js';
 
 const debug = logger('quill:selection');
 
@@ -38,6 +39,7 @@ export class Range {
 class Selection {
   scroll: Scroll;
   emitter: Emitter;
+  domRoot: DOMRootType;
   composing: boolean;
   mouseDown: boolean;
 
@@ -47,9 +49,10 @@ class Selection {
   lastRange: Range | null;
   lastNative: NormalizedRange | null;
 
-  constructor(scroll: Scroll, emitter: Emitter) {
+  constructor(scroll: Scroll, emitter: Emitter, domRoot: DOMRootType) {
     this.emitter = emitter;
     this.scroll = scroll;
+    this.domRoot = domRoot;
     this.composing = false;
     this.mouseDown = false;
     this.root = this.scroll.domNode;
@@ -61,7 +64,7 @@ class Selection {
     this.lastNative = null;
     this.handleComposition();
     this.handleDragging();
-    this.emitter.listenDOM('selectionchange', document, () => {
+    this.emitter.listenDOM('selectionchange', this.domRoot.getRoot(), () => {
       if (!this.mouseDown && !this.composing) {
         setTimeout(this.update.bind(this, Emitter.sources.USER), 1);
       }
@@ -87,7 +90,7 @@ class Selection {
               );
             }
             const triggeredByTyping = mutations.some(
-              (mutation) =>
+              (mutation: MutationRecord) =>
                 mutation.type === 'characterData' ||
                 mutation.type === 'childList' ||
                 (mutation.type === 'attributes' &&
@@ -132,10 +135,10 @@ class Selection {
   }
 
   handleDragging() {
-    this.emitter.listenDOM('mousedown', document.body, () => {
+    this.emitter.listenDOM('mousedown', this.domRoot.getRoot(), () => {
       this.mouseDown = true;
     });
-    this.emitter.listenDOM('mouseup', document.body, () => {
+    this.emitter.listenDOM('mouseup', this.domRoot.getRoot(), () => {
       this.mouseDown = false;
       this.update(Emitter.sources.USER);
     });
@@ -194,7 +197,7 @@ class Selection {
       }
     }
     [node, offset] = leaf.position(offset, true);
-    const range = document.createRange();
+    const range = this.domRoot.createRange();
     if (length > 0) {
       range.setStart(node, offset);
       [leaf, offset] = this.scroll.leaf(index + length);
@@ -239,10 +242,10 @@ class Selection {
   }
 
   getNativeRange(): NormalizedRange | null {
-    const selection = document.getSelection();
-    if (selection == null || selection.rangeCount <= 0) return null;
-    const nativeRange = selection.getRangeAt(0);
+    // Use DOMRoot's Safari-aware range detection
+    const nativeRange = this.domRoot.getNativeRange();
     if (nativeRange == null) return null;
+
     const range = this.normalizeNative(nativeRange);
     debug.info('getNativeRange', range);
     return range;
@@ -262,10 +265,10 @@ class Selection {
   }
 
   hasFocus(): boolean {
+    const activeElement = this.domRoot.getActiveElement();
     return (
-      document.activeElement === this.root ||
-      (document.activeElement != null &&
-        contains(this.root, document.activeElement))
+      activeElement === this.root ||
+      (activeElement != null && contains(this.root, activeElement))
     );
   }
 
@@ -372,7 +375,7 @@ class Selection {
     ) {
       return;
     }
-    const selection = document.getSelection();
+    const selection = this.domRoot.getSelection();
     if (selection == null) return;
     if (startNode != null) {
       if (!this.hasFocus()) this.root.focus({ preventScroll: true });
@@ -399,13 +402,15 @@ class Selection {
           );
           endNode = endNode.parentNode;
         }
-        const range = document.createRange();
-        // @ts-expect-error Fix me later
-        range.setStart(startNode, startOffset);
-        // @ts-expect-error Fix me later
-        range.setEnd(endNode, endOffset);
-        selection.removeAllRanges();
-        selection.addRange(range);
+        // Use DOMRoot's Safari-aware range setting
+        if (startNode != null && endNode != null) {
+          this.domRoot.setNativeRange(
+            startNode,
+            startOffset as number,
+            endNode,
+            endOffset as number,
+          );
+        }
       }
     } else {
       selection.removeAllRanges();
diff --git a/packages/quill/src/formats/script.ts b/packages/quill/src/formats/script.ts
index 1bb988aa80..0eb8c36827 100644
--- a/packages/quill/src/formats/script.ts
+++ b/packages/quill/src/formats/script.ts
@@ -6,10 +6,36 @@ class Script extends Inline {
 
   static create(value: 'super' | 'sub' | (string & {})) {
     if (value === 'super') {
-      return document.createElement('sup');
+      // Use the standard parchment creation which will use the proper document context
+      const node = super.create(value) as HTMLElement;
+      // Override the tag name to ensure we get the correct element
+      if (node.tagName !== 'SUP') {
+        const supElement = node.ownerDocument.createElement('sup');
+        // Copy any attributes that might have been set
+        Array.from(node.attributes).forEach((attr) => {
+          supElement.setAttribute(attr.name, attr.value);
+        });
+        // Copy any existing content
+        supElement.innerHTML = node.innerHTML;
+        return supElement;
+      }
+      return node;
     }
     if (value === 'sub') {
-      return document.createElement('sub');
+      // Use the standard parchment creation which will use the proper document context
+      const node = super.create(value) as HTMLElement;
+      // Override the tag name to ensure we get the correct element
+      if (node.tagName !== 'SUB') {
+        const subElement = node.ownerDocument.createElement('sub');
+        // Copy any attributes that might have been set
+        Array.from(node.attributes).forEach((attr) => {
+          subElement.setAttribute(attr.name, attr.value);
+        });
+        // Copy any existing content
+        subElement.innerHTML = node.innerHTML;
+        return subElement;
+      }
+      return node;
     }
     return super.create(value);
   }
diff --git a/packages/quill/src/modules/toolbar.ts b/packages/quill/src/modules/toolbar.ts
index a178d25936..276a652212 100644
--- a/packages/quill/src/modules/toolbar.ts
+++ b/packages/quill/src/modules/toolbar.ts
@@ -30,13 +30,15 @@ class Toolbar extends Module<ToolbarProps> {
   constructor(quill: Quill, options: Partial<ToolbarProps>) {
     super(quill, options);
     if (Array.isArray(this.options.container)) {
-      const container = document.createElement('div');
+      const container = quill.domRoot.createElement('div') as HTMLDivElement;
       container.setAttribute('role', 'toolbar');
-      addControls(container, this.options.container);
+      addControls(container, this.options.container, quill);
       quill.container?.parentNode?.insertBefore(container, quill.container);
       this.container = container;
     } else if (typeof this.options.container === 'string') {
-      this.container = document.querySelector(this.options.container);
+      this.container = quill.domRoot.querySelector(
+        this.options.container,
+      ) as HTMLElement;
     } else {
       this.container = this.options.container;
     }
@@ -184,8 +186,14 @@ class Toolbar extends Module<ToolbarProps> {
 }
 Toolbar.DEFAULTS = {};
 
-function addButton(container: HTMLElement, format: string, value?: string) {
-  const input = document.createElement('button');
+function addButton(
+  container: HTMLElement,
+  format: string,
+  value?: string,
+  quill?: Quill,
+) {
+  const doc = quill ? quill.domRoot : container.ownerDocument;
+  const input = doc.createElement('button') as HTMLButtonElement;
   input.setAttribute('type', 'button');
   input.classList.add(`ql-${format}`);
   input.setAttribute('aria-pressed', 'false');
@@ -203,24 +211,26 @@ function addControls(
   groups:
     | (string | Record<string, unknown>)[][]
     | (string | Record<string, unknown>)[],
+  quill?: Quill,
 ) {
   if (!Array.isArray(groups[0])) {
     // @ts-expect-error
     groups = [groups];
   }
   groups.forEach((controls: any) => {
-    const group = document.createElement('span');
+    const doc = quill ? quill.domRoot : container.ownerDocument;
+    const group = doc.createElement('span') as HTMLSpanElement;
     group.classList.add('ql-formats');
     controls.forEach((control: any) => {
       if (typeof control === 'string') {
-        addButton(group, control);
+        addButton(group, control, undefined, quill);
       } else {
         const format = Object.keys(control)[0];
         const value = control[format];
         if (Array.isArray(value)) {
-          addSelect(group, format, value);
+          addSelect(group, format, value, quill);
         } else {
-          addButton(group, format, value);
+          addButton(group, format, value, quill);
         }
       }
     });
@@ -232,11 +242,13 @@ function addSelect(
   container: HTMLElement,
   format: string,
   values: Array<string | boolean>,
+  quill?: Quill,
 ) {
-  const input = document.createElement('select');
+  const doc = quill ? quill.domRoot : container.ownerDocument;
+  const input = doc.createElement('select') as HTMLSelectElement;
   input.classList.add(`ql-${format}`);
   values.forEach((value) => {
-    const option = document.createElement('option');
+    const option = doc.createElement('option') as HTMLOptionElement;
     if (value !== false) {
       option.setAttribute('value', String(value));
     } else {
diff --git a/packages/quill/src/themes/base.ts b/packages/quill/src/themes/base.ts
index 3caf771ad1..d2b789f1ad 100644
--- a/packages/quill/src/themes/base.ts
+++ b/packages/quill/src/themes/base.ts
@@ -67,8 +67,12 @@ class BaseTheme extends Theme {
   constructor(quill: Quill, options: ThemeOptions) {
     super(quill, options);
     const listener = (e: MouseEvent) => {
-      if (!document.body.contains(quill.root)) {
-        document.body.removeEventListener('click', listener);
+      // Use DOMRoot to check if quill root is still in the DOM context
+      const root = quill.domRoot.getRoot();
+      const rootElement =
+        root === document ? document.body : (root as ShadowRoot);
+      if (!rootElement.contains(quill.root)) {
+        quill.domRoot.removeEventListener('click', listener);
         return;
       }
       if (
@@ -76,7 +80,7 @@ class BaseTheme extends Theme {
         // @ts-expect-error
         !this.tooltip.root.contains(e.target) &&
         // @ts-expect-error
-        document.activeElement !== this.tooltip.textbox &&
+        quill.domRoot.getActiveElement() !== this.tooltip.textbox &&
         !this.quill.hasFocus()
       ) {
         this.tooltip.hide();
@@ -90,7 +94,8 @@ class BaseTheme extends Theme {
         });
       }
     };
-    quill.emitter.listenDOM('click', document.body, listener);
+    // Use DOMRoot for context-aware event listening
+    quill.domRoot.addEventListener('click', listener);
   }
 
   addModule(name: 'clipboard'): Clipboard;
@@ -197,7 +202,7 @@ BaseTheme.DEFAULTS = merge({}, Theme.DEFAULTS, {
             'input.ql-image[type=file]',
           );
           if (fileInput == null) {
-            fileInput = document.createElement('input');
+            fileInput = this.quill.domRoot.createElement('input');
             fileInput.setAttribute('type', 'file');
             fileInput.setAttribute(
               'accept',
@@ -350,7 +355,7 @@ function fillSelect(
   defaultValue: unknown = false,
 ) {
   values.forEach((value) => {
-    const option = document.createElement('option');
+    const option = select.ownerDocument.createElement('option');
     if (value === defaultValue) {
       option.setAttribute('selected', 'selected');
     } else {
diff --git a/packages/quill/src/themes/bubble.ts b/packages/quill/src/themes/bubble.ts
index 5bb8519141..4832fac541 100644
--- a/packages/quill/src/themes/bubble.ts
+++ b/packages/quill/src/themes/bubble.ts
@@ -58,7 +58,7 @@ class BubbleTooltip extends BaseTooltip {
             }
           }
         } else if (
-          document.activeElement !== this.textbox &&
+          this.quill.domRoot.getActiveElement() !== this.textbox &&
           this.quill.hasFocus()
         ) {
           this.hide();
diff --git a/packages/quill/src/ui/picker.ts b/packages/quill/src/ui/picker.ts
index d6b387c1a4..7c851cc774 100644
--- a/packages/quill/src/ui/picker.ts
+++ b/packages/quill/src/ui/picker.ts
@@ -13,10 +13,15 @@ class Picker {
   select: HTMLSelectElement;
   container: HTMLElement;
   label: HTMLElement;
+  options: HTMLElement;
 
   constructor(select: HTMLSelectElement) {
     this.select = select;
-    this.container = document.createElement('span');
+
+    // Use ownerDocument for proper context (works in both regular and shadow DOM)
+    const doc = this.select.ownerDocument;
+    this.container = doc.createElement('span');
+
     this.buildPicker();
     this.select.style.display = 'none';
     // @ts-expect-error Fix me later
@@ -44,12 +49,12 @@ class Picker {
     this.container.classList.toggle('ql-expanded');
     // Toggle aria-expanded and aria-hidden to make the picker accessible
     toggleAriaAttribute(this.label, 'aria-expanded');
-    // @ts-expect-error
     toggleAriaAttribute(this.options, 'aria-hidden');
   }
 
   buildItem(option: HTMLOptionElement) {
-    const item = document.createElement('span');
+    const doc = this.select.ownerDocument;
+    const item = doc.createElement('span');
     // @ts-expect-error
     item.tabIndex = '0';
     item.setAttribute('role', 'button');
@@ -82,7 +87,8 @@ class Picker {
   }
 
   buildLabel() {
-    const label = document.createElement('span');
+    const doc = this.select.ownerDocument;
+    const label = doc.createElement('span');
     label.classList.add('ql-picker-label');
     label.innerHTML = DropdownIcon;
     // @ts-expect-error
@@ -94,7 +100,8 @@ class Picker {
   }
 
   buildOptions() {
-    const options = document.createElement('span');
+    const doc = this.select.ownerDocument;
+    const options = doc.createElement('span');
     options.classList.add('ql-picker-options');
 
     // Don't want screen readers to read this until options are visible
@@ -107,7 +114,6 @@ class Picker {
     optionsCounter += 1;
     this.label.setAttribute('aria-controls', options.id);
 
-    // @ts-expect-error
     this.options = options;
 
     Array.from(this.select.options).forEach((option) => {
@@ -140,7 +146,6 @@ class Picker {
   close() {
     this.container.classList.remove('ql-expanded');
     this.label.setAttribute('aria-expanded', 'false');
-    // @ts-expect-error
     this.options.setAttribute('aria-hidden', 'true');
   }
 
diff --git a/packages/quill/src/ui/tooltip.ts b/packages/quill/src/ui/tooltip.ts
index 07bf0013f8..ce434a44a3 100644
--- a/packages/quill/src/ui/tooltip.ts
+++ b/packages/quill/src/ui/tooltip.ts
@@ -13,7 +13,12 @@ class Tooltip {
 
   constructor(quill: Quill, boundsContainer?: HTMLElement) {
     this.quill = quill;
-    this.boundsContainer = boundsContainer || document.body;
+    // Use shadow root or document body based on context
+    this.boundsContainer =
+      boundsContainer ||
+      (quill.domRoot.isInShadowDOM()
+        ? ((quill.domRoot.getRoot() as ShadowRoot).host as HTMLElement)
+        : document.body);
     this.root = quill.addContainer('ql-tooltip');
     // @ts-expect-error
     this.root.innerHTML = this.constructor.TEMPLATE;
diff --git a/packages/quill/test/unit/__helpers__/factory.ts b/packages/quill/test/unit/__helpers__/factory.ts
index 6fa4b7f49d..03528e101d 100644
--- a/packages/quill/test/unit/__helpers__/factory.ts
+++ b/packages/quill/test/unit/__helpers__/factory.ts
@@ -9,6 +9,7 @@ import TextBlot from '../../../src/blots/text.js';
 import ListItem, { ListContainer } from '../../../src/formats/list.js';
 import Inline from '../../../src/blots/inline.js';
 import Emitter from '../../../src/core/emitter.js';
+import { DOMRoot } from '../../../src/core/dom-root.js';
 import { normalizeHTML } from './utils.js';
 
 export const createRegistry = (formats: unknown[] = []) => {
@@ -37,8 +38,10 @@ export const createScroll = (
   const emitter = new Emitter();
   const root = container.appendChild(document.createElement('div'));
   root.innerHTML = normalizeHTML(html);
+  const domRoot = DOMRoot(container);
   const scroll = new Scroll(registry, root, {
     emitter,
+    domRoot,
   });
   return scroll;
 };
diff --git a/packages/quill/test/unit/blots/blot-shadow-dom.spec.ts b/packages/quill/test/unit/blots/blot-shadow-dom.spec.ts
new file mode 100644
index 0000000000..022499cd5d
--- /dev/null
+++ b/packages/quill/test/unit/blots/blot-shadow-dom.spec.ts
@@ -0,0 +1,160 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('Blot Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Embed blot creates elements with correct document context in regular DOM', () => {
+    const quill = new Quill(container);
+
+    // Verify scroll has domRoot
+    expect(quill.scroll.domRoot).toBeDefined();
+    expect(quill.scroll.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.scroll.domRoot.getRoot()).toBe(document);
+
+    // Test creating an embed (like an image)
+    const delta = quill.insertEmbed(0, 'image', 'https://example.com/test.jpg');
+    expect(delta).toBeDefined();
+
+    // Verify the quill content
+    const content = quill.getContents();
+    expect(content.ops[0].insert).toEqual({
+      image: 'https://example.com/test.jpg',
+    });
+  });
+
+  test('Embed blot creates elements with correct document context in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify scroll has domRoot and detects shadow DOM
+    expect(quill.scroll.domRoot).toBeDefined();
+    expect(quill.scroll.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.scroll.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Test creating an embed (like an image)
+    const delta = quill.insertEmbed(
+      0,
+      'image',
+      'https://example.com/shadow-test.jpg',
+    );
+    expect(delta).toBeDefined();
+
+    // Verify the quill content
+    const content = quill.getContents();
+    expect(content.ops[0].insert).toEqual({
+      image: 'https://example.com/shadow-test.jpg',
+    });
+  });
+
+  test('Cursor blot works correctly in regular DOM', () => {
+    const quill = new Quill(container);
+
+    // Insert some text to create cursor scenarios
+    quill.insertText(0, 'Hello World');
+    quill.setSelection(5, 0); // Place cursor in middle
+
+    // Verify selection works
+    const selection = quill.getSelection();
+    expect(selection?.index).toBe(5);
+    expect(selection?.length).toBe(0);
+  });
+
+  test('Cursor blot works correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert some text to create cursor scenarios
+    quill.insertText(0, 'Shadow DOM Text');
+    quill.setSelection(7, 0); // Place cursor in middle
+
+    // Verify selection works
+    const selection = quill.getSelection();
+    expect(selection?.index).toBe(7);
+    expect(selection?.length).toBe(0);
+  });
+
+  test('Multiple Quill instances with blots work independently', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    // Test regular DOM instance
+    regularQuill.insertText(0, 'Regular DOM');
+    regularQuill.insertEmbed(11, 'image', 'regular.jpg');
+
+    // Test shadow DOM instance
+    shadowQuill.insertText(0, 'Shadow DOM');
+    shadowQuill.insertEmbed(10, 'image', 'shadow.jpg');
+
+    // Verify independence
+    expect(regularQuill.getContents().ops).toHaveLength(3); // text + embed + final newline
+    expect(shadowQuill.getContents().ops).toHaveLength(3); // text + embed + final newline
+
+    // Verify different domRoot contexts
+    expect(regularQuill.scroll.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.scroll.domRoot.isInShadowDOM()).toBe(true);
+  });
+
+  test('Text nodes created by blots use correct document context', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert text and verify document context
+    quill.insertText(0, 'Test text');
+
+    // Check that text nodes in the editor have correct ownerDocument
+    const textNodes: Text[] = [];
+    const walker = document.createTreeWalker(
+      shadowContainer,
+      NodeFilter.SHOW_TEXT,
+      null,
+    );
+
+    let node;
+    while ((node = walker.nextNode())) {
+      if (node.textContent && node.textContent.trim()) {
+        textNodes.push(node as Text);
+      }
+    }
+
+    // All text nodes should have the same ownerDocument (which is always document)
+    textNodes.forEach((textNode) => {
+      expect(textNode.ownerDocument).toBe(document);
+    });
+  });
+});
diff --git a/packages/quill/test/unit/blots/scroll.spec.ts b/packages/quill/test/unit/blots/scroll.spec.ts
index a977373e44..122478ae9a 100644
--- a/packages/quill/test/unit/blots/scroll.spec.ts
+++ b/packages/quill/test/unit/blots/scroll.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, test, vitest } from 'vitest';
 import Emitter from '../../../src/core/emitter.js';
 import Selection, { Range } from '../../../src/core/selection.js';
+import { DOMRoot } from '../../../src/core/dom-root.js';
 import Cursor from '../../../src/blots/cursor.js';
 import Scroll from '../../../src/blots/scroll.js';
 import Delta from 'quill-delta';
@@ -14,7 +15,8 @@ const createScroll = (html: string) => {
   const registry = createRegistry([Underline, Strike]);
   const container = document.body.appendChild(document.createElement('div'));
   container.innerHTML = normalizeHTML(html);
-  return new Scroll(registry, container, { emitter });
+  const domRoot = DOMRoot(document.body);
+  return new Scroll(registry, container, { emitter, domRoot });
 };
 
 describe('Scroll', () => {
@@ -85,7 +87,8 @@ describe('Scroll', () => {
 
     test('cursor', () => {
       const scroll = createScroll('<p><u>0</u>1<u>2</u></p>');
-      const selection = new Selection(scroll, scroll.emitter);
+      const domRoot = DOMRoot(document.body);
+      const selection = new Selection(scroll, scroll.emitter, domRoot);
       selection.setRange(new Range(2));
       selection.format('strike', true);
       const [leaf, offset] = selection.scroll.leaf(2);
diff --git a/packages/quill/test/unit/core/composition-shadow-dom.spec.ts b/packages/quill/test/unit/core/composition-shadow-dom.spec.ts
new file mode 100644
index 0000000000..98c943a099
--- /dev/null
+++ b/packages/quill/test/unit/core/composition-shadow-dom.spec.ts
@@ -0,0 +1,72 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('Composition Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Composition events work in regular DOM', () => {
+    const quill = new Quill(container);
+
+    expect(quill.composition).toBeDefined();
+    expect(quill.composition.isComposing).toBe(false);
+
+    // Verify composition event listeners are attached to editor element
+    const editorElement = quill.root;
+    expect(editorElement).toBeDefined();
+  });
+
+  test('Composition events work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    expect(quill.composition).toBeDefined();
+    expect(quill.composition.isComposing).toBe(false);
+
+    // Verify composition event listeners are attached to editor element in shadow DOM
+    const editorElement = quill.root;
+    expect(editorElement).toBeDefined();
+    expect(shadowContainer.contains(editorElement)).toBe(true);
+  });
+
+  test('Composition state is isolated between regular and shadow DOM instances', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    expect(regularQuill.composition.isComposing).toBe(false);
+    expect(shadowQuill.composition.isComposing).toBe(false);
+
+    // Both compositions should be independent
+    expect(regularQuill.composition).not.toBe(shadowQuill.composition);
+  });
+});
diff --git a/packages/quill/test/unit/core/composition.spec.ts b/packages/quill/test/unit/core/composition.spec.ts
index c306318599..6f80cccb21 100644
--- a/packages/quill/test/unit/core/composition.spec.ts
+++ b/packages/quill/test/unit/core/composition.spec.ts
@@ -1,6 +1,7 @@
 import Emitter from '../../../src/core/emitter.js';
 import Composition from '../../../src/core/composition.js';
 import Scroll from '../../../src/blots/scroll.js';
+import { DOMRoot } from '../../../src/core/dom-root.js';
 import { describe, expect, test, vitest } from 'vitest';
 import { createRegistry } from '../__helpers__/factory.js';
 import Quill from '../../../src/core.js';
@@ -8,8 +9,10 @@ import Quill from '../../../src/core.js';
 describe('Composition', () => {
   test('triggers events on compositionstart', async () => {
     const emitter = new Emitter();
+    const domRoot = DOMRoot(document.body);
     const scroll = new Scroll(createRegistry(), document.createElement('div'), {
       emitter,
+      domRoot,
     });
     new Composition(scroll, emitter);
 
diff --git a/packages/quill/test/unit/core/dom-root.spec.ts b/packages/quill/test/unit/core/dom-root.spec.ts
new file mode 100644
index 0000000000..f47ea6b2d3
--- /dev/null
+++ b/packages/quill/test/unit/core/dom-root.spec.ts
@@ -0,0 +1,375 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import { DOMRoot } from '../../../src/core/dom-root.js';
+
+describe('DOMRoot', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  describe('constructor and detection', () => {
+    test('detects regular DOM context', () => {
+      const domRoot = DOMRoot(container);
+
+      expect(domRoot.isInShadowDOM()).toBe(false);
+      expect(domRoot.getRoot()).toBe(document);
+    });
+
+    test('detects shadow DOM context', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      const domRoot = DOMRoot(shadowContainer);
+
+      expect(domRoot.isInShadowDOM()).toBe(true);
+      expect(domRoot.getRoot()).toBe(shadowRoot);
+    });
+
+    test('handles nested shadow DOM', () => {
+      // Create nested shadow DOM
+      const nestedHost = document.createElement('div');
+      shadowRoot.appendChild(nestedHost);
+      const nestedShadowRoot = nestedHost.attachShadow({ mode: 'open' });
+
+      const nestedContainer = document.createElement('div');
+      nestedContainer.id = 'nested-container';
+      nestedShadowRoot.appendChild(nestedContainer);
+
+      const domRoot = DOMRoot(nestedContainer);
+
+      expect(domRoot.isInShadowDOM()).toBe(true);
+      expect(domRoot.getRoot()).toBe(nestedShadowRoot);
+    });
+  });
+
+  describe('DOM queries', () => {
+    test('querySelector works in regular DOM', () => {
+      container.innerHTML = '<div class="test">Hello</div>';
+      const domRoot = DOMRoot(container);
+
+      const element = domRoot.querySelector('.test');
+      expect(element).toBeTruthy();
+      expect(element?.textContent).toBe('Hello');
+    });
+
+    test('querySelector works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      shadowContainer.innerHTML = '<div class="test">Shadow</div>';
+      const domRoot = DOMRoot(shadowContainer);
+
+      const element = domRoot.querySelector('.test');
+      expect(element).toBeTruthy();
+      expect(element?.textContent).toBe('Shadow');
+    });
+
+    test('querySelector scoped to shadow root', () => {
+      // Add element to regular DOM
+      container.innerHTML = '<div class="test">Regular</div>';
+
+      // Add element to shadow DOM
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      shadowContainer.innerHTML = '<div class="test">Shadow</div>';
+      const domRoot = DOMRoot(shadowContainer);
+
+      // Should only find shadow DOM element
+      const element = domRoot.querySelector('.test');
+      expect(element?.textContent).toBe('Shadow');
+    });
+
+    test('querySelectorAll works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      shadowContainer.innerHTML =
+        '<div class="test">One</div><div class="test">Two</div>';
+      const domRoot = DOMRoot(shadowContainer);
+
+      const elements = domRoot.querySelectorAll('.test');
+      expect(elements.length).toBe(2);
+      expect(elements[0].textContent).toBe('One');
+      expect(elements[1].textContent).toBe('Two');
+    });
+
+    test('getElementById works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      shadowContainer.innerHTML = '<div id="test-element">Test</div>';
+      const domRoot = DOMRoot(shadowContainer);
+
+      const element = domRoot.getElementById('test-element');
+      expect(element).toBeTruthy();
+      expect(element?.textContent).toBe('Test');
+    });
+
+    test('getElementById handles special characters', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      shadowContainer.innerHTML = '<div id="test:element">Test</div>';
+      const domRoot = DOMRoot(shadowContainer);
+
+      const element = domRoot.getElementById('test:element');
+      expect(element).toBeTruthy();
+      expect(element?.textContent).toBe('Test');
+    });
+  });
+
+  describe('element creation', () => {
+    test('createElement works in regular DOM', () => {
+      const domRoot = DOMRoot(container);
+
+      const element = domRoot.createElement('div');
+      expect(element.tagName).toBe('DIV');
+      expect(element.ownerDocument).toBe(document);
+    });
+
+    test('createElement works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      const domRoot = DOMRoot(shadowContainer);
+
+      const element = domRoot.createElement('span');
+      expect(element.tagName).toBe('SPAN');
+      expect(element.ownerDocument).toBe(document);
+    });
+
+    test('createTextNode works', () => {
+      const domRoot = DOMRoot(container);
+
+      const textNode = domRoot.createTextNode('Hello World');
+      expect(textNode.nodeType).toBe(Node.TEXT_NODE);
+      expect(textNode.textContent).toBe('Hello World');
+    });
+  });
+
+  describe('style injection', () => {
+    test('injectCSS works in regular DOM', () => {
+      const domRoot = DOMRoot(container);
+
+      domRoot.injectCSS('.test { color: red; }', 'test-styles');
+
+      const styleElement = document.head.querySelector(
+        'style[data-quill-id="test-styles"]',
+      );
+      expect(styleElement).toBeTruthy();
+      expect(styleElement?.textContent).toBe('.test { color: red; }');
+    });
+
+    test('injectCSS works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      const domRoot = DOMRoot(shadowContainer);
+
+      domRoot.injectCSS('.shadow-test { color: blue; }', 'shadow-styles');
+
+      const styleElement = shadowRoot.querySelector(
+        'style[data-quill-id="shadow-styles"]',
+      );
+      expect(styleElement).toBeTruthy();
+      expect(styleElement?.textContent).toBe('.shadow-test { color: blue; }');
+    });
+
+    test('injectCSS prevents duplicates', () => {
+      const domRoot = DOMRoot(container);
+
+      domRoot.injectCSS('.test { color: red; }', 'duplicate-test');
+      domRoot.injectCSS('.test { color: blue; }', 'duplicate-test');
+
+      const styleElements = document.head.querySelectorAll(
+        'style[data-quill-id="duplicate-test"]',
+      );
+      expect(styleElements.length).toBe(1);
+      expect(styleElements[0].textContent).toBe('.test { color: red; }');
+    });
+
+    test('injectStylesheet works in regular DOM', () => {
+      const domRoot = DOMRoot(container);
+
+      domRoot.injectStylesheet('/test.css', 'test-stylesheet');
+
+      const linkElement = document.head.querySelector(
+        'link[data-quill-id="test-stylesheet"]',
+      );
+      expect(linkElement).toBeTruthy();
+      expect(linkElement?.getAttribute('href')).toBe('/test.css');
+      expect(linkElement?.getAttribute('rel')).toBe('stylesheet');
+    });
+
+    test('injectStylesheet works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      const domRoot = DOMRoot(shadowContainer);
+
+      domRoot.injectStylesheet('/shadow-test.css', 'shadow-stylesheet');
+
+      const linkElement = shadowRoot.querySelector(
+        'link[data-quill-id="shadow-stylesheet"]',
+      );
+      expect(linkElement).toBeTruthy();
+      expect(linkElement?.getAttribute('href')).toBe('/shadow-test.css');
+    });
+  });
+
+  describe('event handling', () => {
+    test('addEventListener works in regular DOM', () => {
+      const domRoot = DOMRoot(container);
+      const handler = vi.fn();
+
+      domRoot.addEventListener('click', handler);
+
+      // Trigger event on document
+      const event = new MouseEvent('click', { bubbles: true });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalled();
+    });
+
+    test('addEventListener works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      const domRoot = DOMRoot(shadowContainer);
+      const handler = vi.fn();
+
+      domRoot.addEventListener('click', handler);
+
+      // Trigger event on shadow root
+      const event = new MouseEvent('click', { bubbles: true });
+      shadowRoot.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalled();
+    });
+
+    test('removeEventListener works', () => {
+      const domRoot = DOMRoot(container);
+      const handler = vi.fn();
+
+      domRoot.addEventListener('click', handler);
+      domRoot.removeEventListener('click', handler);
+
+      const event = new MouseEvent('click', { bubbles: true });
+      document.dispatchEvent(event);
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('selection', () => {
+    test('getSelection returns document selection', () => {
+      const domRoot = DOMRoot(container);
+
+      const selection = domRoot.getSelection();
+      expect(selection).toBe(document.getSelection());
+    });
+
+    test('createRange works', () => {
+      const domRoot = DOMRoot(container);
+
+      const range = domRoot.createRange();
+      expect(range).toBeInstanceOf(Range);
+      expect(range.commonAncestorContainer).toBe(document);
+    });
+  });
+
+  describe('focus management', () => {
+    test('getActiveElement works in regular DOM', () => {
+      const input = document.createElement('input');
+      container.appendChild(input);
+      input.focus();
+
+      const domRoot = DOMRoot(container);
+      const activeElement = domRoot.getActiveElement();
+
+      expect(activeElement).toBe(input);
+    });
+
+    test('getActiveElement works in shadow DOM', () => {
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      const input = document.createElement('input');
+      shadowContainer.appendChild(input);
+      input.focus();
+
+      const domRoot = DOMRoot(shadowContainer);
+      const activeElement = domRoot.getActiveElement();
+
+      expect(activeElement).toBe(input);
+    });
+
+    test('getActiveElement traverses nested shadow roots', () => {
+      // Create nested shadow DOM with focused element
+      const nestedHost = document.createElement('div');
+      shadowRoot.appendChild(nestedHost);
+      const nestedShadowRoot = nestedHost.attachShadow({ mode: 'open' });
+
+      const input = document.createElement('input');
+      nestedShadowRoot.appendChild(input);
+      input.focus();
+
+      const shadowContainer = shadowRoot.querySelector(
+        '#shadow-container',
+      ) as HTMLElement;
+      const domRoot = DOMRoot(shadowContainer);
+      const activeElement = domRoot.getActiveElement();
+
+      expect(activeElement).toBe(input);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles null container gracefully', () => {
+      // This would typically be caught by TypeScript, but test runtime behavior
+      const domRoot = DOMRoot(container);
+      expect(domRoot.getRoot()).toBeTruthy();
+    });
+
+    test('handles detached elements', () => {
+      const detachedElement = document.createElement('div');
+      const domRoot = DOMRoot(detachedElement);
+
+      expect(domRoot.isInShadowDOM()).toBe(false);
+      expect(domRoot.getRoot()).toBe(document);
+    });
+
+    test('handles elements with no owner document', () => {
+      const element = document.createElement('div');
+      Object.defineProperty(element, 'ownerDocument', {
+        value: null,
+        configurable: true,
+      });
+
+      const domRoot = DOMRoot(element);
+      expect(domRoot.getRoot()).toBe(document);
+    });
+  });
+});
diff --git a/packages/quill/test/unit/core/editor.spec.ts b/packages/quill/test/unit/core/editor.spec.ts
index 2d47a1dec9..5ee364c087 100644
--- a/packages/quill/test/unit/core/editor.spec.ts
+++ b/packages/quill/test/unit/core/editor.spec.ts
@@ -6,6 +6,7 @@ import Scroll from '../../../src/blots/scroll.js';
 import { Registry } from 'parchment';
 import Text from '../../../src/blots/text.js';
 import Emitter from '../../../src/core/emitter.js';
+import { DOMRoot } from '../../../src/core/dom-root.js';
 import Break from '../../../src/blots/break.js';
 import { describe, expect, test } from 'vitest';
 import { createRegistry } from '../__helpers__/factory.js';
@@ -888,6 +889,7 @@ describe('Editor', () => {
       const editor = new Editor(
         new Scroll(registry, document.createElement('div'), {
           emitter: new Emitter(),
+          domRoot: DOMRoot(document.body),
         }),
       );
 
diff --git a/packages/quill/test/unit/core/emitter-shadow-dom.spec.ts b/packages/quill/test/unit/core/emitter-shadow-dom.spec.ts
new file mode 100644
index 0000000000..e9e965ea08
--- /dev/null
+++ b/packages/quill/test/unit/core/emitter-shadow-dom.spec.ts
@@ -0,0 +1,112 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+import Emitter from '../../../src/core/emitter.js';
+import { DOMRoot } from '../../../src/core/dom-root.js';
+
+describe('Emitter Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Emitter initializes global events for regular DOM', () => {
+    const quill = new Quill(container);
+
+    expect(quill.emitter).toBeDefined();
+    expect(quill.emitter).toBeInstanceOf(Emitter);
+  });
+
+  test('Emitter initializes global events for shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    expect(quill.emitter).toBeDefined();
+    expect(quill.emitter).toBeInstanceOf(Emitter);
+  });
+
+  test('Global events are scoped correctly to each context', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    // Both should have independent emitters
+    expect(regularQuill.emitter).not.toBe(shadowQuill.emitter);
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+  });
+
+  test('initializeGlobalEvents can be called directly', () => {
+    const domRoot = DOMRoot(container);
+
+    // Should not throw an error
+    expect(() => {
+      Emitter.initializeGlobalEvents(domRoot);
+    }).not.toThrow();
+
+    // Should be idempotent (safe to call multiple times)
+    expect(() => {
+      Emitter.initializeGlobalEvents(domRoot);
+      Emitter.initializeGlobalEvents(domRoot);
+    }).not.toThrow();
+  });
+
+  test('Global events work with shadow DOM contexts', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const domRoot = DOMRoot(shadowContainer);
+
+    // Should initialize without errors
+    expect(() => {
+      Emitter.initializeGlobalEvents(domRoot);
+    }).not.toThrow();
+
+    // Verify the root is a shadow root
+    expect(domRoot.isInShadowDOM()).toBe(true);
+    expect(domRoot.getRoot()).toBe(shadowRoot);
+  });
+
+  test('listenDOM method works correctly', () => {
+    const quill = new Quill(container);
+
+    const handler = () => {
+      // Handler implementation for testing
+    };
+
+    quill.emitter.listenDOM('click', container, handler);
+
+    // Trigger a click event
+    container.click();
+
+    // Note: This test verifies the method works without throwing
+    // The actual event handling is tested through integration tests
+    expect(quill.emitter).toBeDefined();
+  });
+});
diff --git a/packages/quill/test/unit/core/quill-dom-root-integration.spec.ts b/packages/quill/test/unit/core/quill-dom-root-integration.spec.ts
new file mode 100644
index 0000000000..04bb89ecdf
--- /dev/null
+++ b/packages/quill/test/unit/core/quill-dom-root-integration.spec.ts
@@ -0,0 +1,111 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('Quill DOMRoot Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Quill initializes with DOMRoot in regular DOM', () => {
+    const quill = new Quill(container);
+
+    expect(quill.domRoot).toBeDefined();
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+  });
+
+  test('Quill initializes with DOMRoot in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    expect(quill.domRoot).toBeDefined();
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+  });
+
+  test('addContainer uses DOMRoot for element creation in regular DOM', () => {
+    const quill = new Quill(container);
+
+    const newContainer = quill.addContainer('test-container');
+
+    expect(newContainer.classList.contains('test-container')).toBe(true);
+    expect(newContainer.ownerDocument).toBe(document);
+    expect(container.contains(newContainer)).toBe(true);
+  });
+
+  test('addContainer uses DOMRoot for element creation in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    const newContainer = quill.addContainer('test-shadow-container');
+
+    expect(newContainer.classList.contains('test-shadow-container')).toBe(true);
+    expect(newContainer.ownerDocument).toBe(document);
+    expect(shadowContainer.contains(newContainer)).toBe(true);
+  });
+
+  test('DOMRoot context is correctly detected during initialization', () => {
+    // Regular DOM
+    const regularQuill = new Quill(container);
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+
+    // Shadow DOM
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const shadowQuill = new Quill(shadowContainer);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+  });
+
+  test('Multiple Quill instances can coexist with different DOMRoot contexts', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+    expect(regularQuill.domRoot.getRoot()).toBe(document);
+    expect(shadowQuill.domRoot.getRoot()).toBe(shadowRoot);
+  });
+
+  test('DOMRoot is available as public property', () => {
+    const quill = new Quill(container);
+
+    // Verify DOMRoot is accessible and has expected methods
+    expect(typeof quill.domRoot.querySelector).toBe('function');
+    expect(typeof quill.domRoot.createElement).toBe('function');
+    expect(typeof quill.domRoot.injectCSS).toBe('function');
+    expect(typeof quill.domRoot.addEventListener).toBe('function');
+    expect(typeof quill.domRoot.getSelection).toBe('function');
+  });
+});
diff --git a/packages/quill/test/unit/core/selection.spec.ts b/packages/quill/test/unit/core/selection.spec.ts
index 168a7240bc..8b6b27e47d 100644
--- a/packages/quill/test/unit/core/selection.spec.ts
+++ b/packages/quill/test/unit/core/selection.spec.ts
@@ -1,6 +1,7 @@
 import Selection, { Range } from '../../../src/core/selection.js';
 import Cursor from '../../../src/blots/cursor.js';
 import Emitter from '../../../src/core/emitter.js';
+import { DOMRoot } from '../../../src/core/dom-root.js';
 import { expect, describe, test } from 'vitest';
 import { createRegistry, createScroll } from '../__helpers__/factory.js';
 import Bold from '../../../src/formats/bold.js';
@@ -29,7 +30,8 @@ const createSelection = (html: string, container = document.body) => {
     ]),
     container,
   );
-  return new Selection(scroll, scroll.emitter);
+  const domRoot = DOMRoot(container);
+  return new Selection(scroll, scroll.emitter, domRoot);
 };
 
 describe('Selection', () => {
diff --git a/packages/quill/test/unit/formats/embed-shadow-dom.spec.ts b/packages/quill/test/unit/formats/embed-shadow-dom.spec.ts
new file mode 100644
index 0000000000..aaf6ac8969
--- /dev/null
+++ b/packages/quill/test/unit/formats/embed-shadow-dom.spec.ts
@@ -0,0 +1,338 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('Embed Blots Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Image embed works in regular DOM', () => {
+    const quill = new Quill(container);
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Insert image embed
+    quill.insertEmbed(0, 'image', 'https://example.com/test.jpg');
+
+    const content = quill.getContents();
+    expect(content.ops).toEqual([
+      { insert: { image: 'https://example.com/test.jpg' } },
+      { insert: '\n' },
+    ]);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<img src="https://example.com/test.jpg">');
+
+    // Verify the image element was created with correct document context
+    const imgElement = container.querySelector('img');
+    expect(imgElement?.ownerDocument).toBe(document);
+    expect(imgElement?.getAttribute('src')).toBe(
+      'https://example.com/test.jpg',
+    );
+  });
+
+  test('Image embed works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Insert image embed
+    quill.insertEmbed(0, 'image', 'https://example.com/shadow-test.jpg');
+
+    const content = quill.getContents();
+    expect(content.ops).toEqual([
+      { insert: { image: 'https://example.com/shadow-test.jpg' } },
+      { insert: '\n' },
+    ]);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<img src="https://example.com/shadow-test.jpg">');
+
+    // Verify the image element was created with correct document context
+    const imgElement = shadowContainer.querySelector('img');
+    expect(imgElement?.ownerDocument).toBe(document);
+    expect(imgElement?.getAttribute('src')).toBe(
+      'https://example.com/shadow-test.jpg',
+    );
+  });
+
+  test('Video embed works in regular DOM', () => {
+    const quill = new Quill(container);
+
+    // Insert video embed
+    quill.insertEmbed(0, 'video', 'https://youtube.com/watch?v=test');
+
+    const content = quill.getContents();
+    expect(content.ops).toEqual([
+      { insert: { video: 'https://youtube.com/watch?v=test' } },
+      { insert: '\n' },
+    ]);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<iframe');
+    expect(html).toContain('src="https://youtube.com/watch?v=test"');
+    expect(html).toContain('class="ql-video"');
+    expect(html).toContain('frameborder="0"');
+    expect(html).toContain('allowfullscreen="true"');
+
+    // Verify the iframe element was created with correct document context
+    const iframeElement = container.querySelector('iframe');
+    expect(iframeElement?.ownerDocument).toBe(document);
+    expect(iframeElement?.getAttribute('src')).toBe(
+      'https://youtube.com/watch?v=test',
+    );
+  });
+
+  test('Video embed works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Insert video embed
+    quill.insertEmbed(0, 'video', 'https://vimeo.com/123456');
+
+    const content = quill.getContents();
+    expect(content.ops).toEqual([
+      { insert: { video: 'https://vimeo.com/123456' } },
+      { insert: '\n' },
+    ]);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<iframe');
+    expect(html).toContain('src="https://vimeo.com/123456"');
+    expect(html).toContain('class="ql-video"');
+
+    // Verify the iframe element was created with correct document context
+    const iframeElement = shadowContainer.querySelector('iframe');
+    expect(iframeElement?.ownerDocument).toBe(document);
+    expect(iframeElement?.getAttribute('src')).toBe('https://vimeo.com/123456');
+  });
+
+  test('Multiple embeds work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert multiple embeds
+    quill.insertEmbed(0, 'image', 'https://example.com/image1.jpg');
+    quill.insertEmbed(1, 'video', 'https://youtube.com/watch?v=video1');
+    quill.insertEmbed(2, 'image', 'https://example.com/image2.png');
+
+    const content = quill.getContents();
+    console.log(
+      'Multiple embeds content:',
+      JSON.stringify(content.ops, null, 2),
+    );
+
+    // Verify embeds exist in delta
+    const hasImage1 = content.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.image === 'https://example.com/image1.jpg',
+    );
+    const hasVideo = content.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.video === 'https://youtube.com/watch?v=video1',
+    );
+    const hasImage2 = content.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.image === 'https://example.com/image2.png',
+    );
+
+    expect(hasImage1).toBe(true);
+    expect(hasVideo).toBe(true);
+    expect(hasImage2).toBe(true);
+
+    // Verify all elements are present
+    const images = shadowContainer.querySelectorAll('img');
+    const videos = shadowContainer.querySelectorAll('iframe');
+
+    expect(images).toHaveLength(2);
+    expect(videos).toHaveLength(1);
+
+    // Verify document contexts
+    images.forEach((img) => {
+      expect(img.ownerDocument).toBe(document);
+    });
+    videos.forEach((video) => {
+      expect(video.ownerDocument).toBe(document);
+    });
+  });
+
+  test('Text and embeds mixed in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert mixed content step by step
+    quill.insertText(0, 'Here is an image: ');
+    quill.insertEmbed(18, 'image', 'https://example.com/mixed.jpg');
+    quill.insertText(19, '\nAnd here is a video:\n');
+    quill.insertEmbed(41, 'video', 'https://youtube.com/watch?v=mixed');
+    quill.insertText(42, '\nDone!');
+
+    const content = quill.getContents();
+    console.log('Mixed content:', JSON.stringify(content.ops, null, 2));
+
+    // Check that we have both text and embeds
+    const hasText = content.ops.some(
+      (op) => typeof op.insert === 'string' && op.insert.includes('Here is'),
+    );
+    const hasImage = content.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.image === 'https://example.com/mixed.jpg',
+    );
+    const hasVideo = content.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.video === 'https://youtube.com/watch?v=mixed',
+    );
+
+    expect(hasText).toBe(true);
+    expect(hasImage).toBe(true);
+    expect(hasVideo).toBe(true);
+
+    // Verify HTML contains all elements
+    const html = quill.root.innerHTML;
+    expect(html).toContain('Here is an image:');
+    expect(html).toContain('<img src="https://example.com/mixed.jpg">');
+    expect(html).toContain('And here is a video:');
+    expect(html).toContain('src="https://youtube.com/watch?v=mixed"');
+    expect(html).toContain('Done!');
+  });
+
+  test('Embed formatting and attributes work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert image and apply format
+    quill.insertEmbed(0, 'image', 'https://example.com/formatted.jpg');
+
+    // Get the image element and verify we can format it
+    const imgElement = shadowContainer.querySelector('img');
+    expect(imgElement).toBeTruthy();
+
+    // Verify image attributes
+    expect(imgElement?.getAttribute('src')).toBe(
+      'https://example.com/formatted.jpg',
+    );
+
+    // Test that image can be found within shadow DOM queries
+    const foundImg = quill.domRoot.querySelector('img');
+    expect(foundImg).toBe(imgElement);
+    expect(foundImg?.getAttribute('src')).toBe(
+      'https://example.com/formatted.jpg',
+    );
+  });
+
+  test('Multiple Quill instances with embeds work independently', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    // Insert different embeds in each instance
+    regularQuill.insertEmbed(0, 'image', 'https://example.com/regular.jpg');
+    shadowQuill.insertEmbed(0, 'video', 'https://youtube.com/watch?v=shadow');
+
+    // Verify independence
+    const regularContent = regularQuill.getContents();
+    const shadowContent = shadowQuill.getContents();
+
+    expect(regularContent.ops).toEqual([
+      { insert: { image: 'https://example.com/regular.jpg' } },
+      { insert: '\n' },
+    ]);
+
+    expect(shadowContent.ops).toEqual([
+      { insert: { video: 'https://youtube.com/watch?v=shadow' } },
+      { insert: '\n' },
+    ]);
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+
+    // Verify elements exist in correct containers
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('iframe')).toBeFalsy();
+    expect(shadowContainer.querySelector('img')).toBeFalsy();
+    expect(shadowContainer.querySelector('iframe')).toBeTruthy();
+  });
+
+  test('Embed removal works correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert embed and text
+    quill.insertText(0, 'Before embed\n');
+    quill.insertEmbed(13, 'image', 'https://example.com/remove.jpg');
+    quill.insertText(14, '\nAfter embed');
+
+    // Verify embed is present
+    expect(shadowContainer.querySelector('img')).toBeTruthy();
+
+    // Remove the embed
+    quill.deleteText(13, 1);
+
+    // Verify embed is removed but text remains
+    expect(shadowContainer.querySelector('img')).toBeFalsy();
+
+    const content = quill.getContents();
+    const text = content.ops
+      .map((op) => (typeof op.insert === 'string' ? op.insert : ''))
+      .join('');
+    expect(text).toContain('Before embed');
+    expect(text).toContain('After embed');
+  });
+});
diff --git a/packages/quill/test/unit/formats/format-shadow-dom.spec.ts b/packages/quill/test/unit/formats/format-shadow-dom.spec.ts
new file mode 100644
index 0000000000..fa52368533
--- /dev/null
+++ b/packages/quill/test/unit/formats/format-shadow-dom.spec.ts
@@ -0,0 +1,337 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('Format Blots Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Script format (superscript/subscript) works in regular DOM', () => {
+    const quill = new Quill(container);
+
+    // Insert text and apply script formatting
+    quill.insertText(0, 'E=mc2 H2O');
+
+    // Apply superscript to the first '2'
+    quill.formatText(4, 1, 'script', 'super');
+
+    // Apply subscript to the second '2'
+    quill.formatText(7, 1, 'script', 'sub');
+
+    const content = quill.getContents();
+    console.log(
+      'Regular DOM script content:',
+      JSON.stringify(content.ops, null, 2),
+    );
+
+    // Verify the HTML structure contains the correct elements
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<sup>2</sup>');
+    expect(html).toContain('<sub>2</sub>');
+
+    // Verify script formatting exists in the delta
+    const hasSuper = content.ops.some(
+      (op) => op.attributes?.script === 'super',
+    );
+    const hasSub = content.ops.some((op) => op.attributes?.script === 'sub');
+    expect(hasSuper).toBe(true);
+    expect(hasSub).toBe(true);
+  });
+
+  test('Script format (superscript/subscript) works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Insert text and apply script formatting
+    quill.insertText(0, 'E=mc2 H2O');
+
+    // Apply superscript to the first '2'
+    quill.formatText(4, 1, 'script', 'super');
+
+    // Apply subscript to the second '2'
+    quill.formatText(7, 1, 'script', 'sub');
+
+    const content = quill.getContents();
+    console.log(
+      'Shadow DOM script content:',
+      JSON.stringify(content.ops, null, 2),
+    );
+
+    // Verify the HTML structure contains the correct elements
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<sup>2</sup>');
+    expect(html).toContain('<sub>2</sub>');
+
+    // Verify script formatting exists in the delta
+    const hasSuper = content.ops.some(
+      (op) => op.attributes?.script === 'super',
+    );
+    const hasSub = content.ops.some((op) => op.attributes?.script === 'sub');
+    expect(hasSuper).toBe(true);
+    expect(hasSub).toBe(true);
+
+    // Verify the elements were created with correct document context
+    const supElement = shadowContainer.querySelector('sup');
+    const subElement = shadowContainer.querySelector('sub');
+    expect(supElement?.ownerDocument).toBe(document);
+    expect(subElement?.ownerDocument).toBe(document);
+  });
+
+  test('Text formatting (bold, italic, etc.) works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Apply various text formats
+    quill.insertText(0, 'Bold Italic Underlined');
+    quill.formatText(0, 4, 'bold', true);
+    quill.formatText(5, 6, 'italic', true);
+    quill.formatText(12, 10, 'underline', true);
+
+    const content = quill.getContents();
+    console.log(
+      'Text formatting content:',
+      JSON.stringify(content.ops, null, 2),
+    );
+
+    // Verify formatting exists in delta
+    const hasBold = content.ops.some((op) => op.attributes?.bold === true);
+    const hasItalic = content.ops.some((op) => op.attributes?.italic === true);
+    const hasUnderline = content.ops.some(
+      (op) => op.attributes?.underline === true,
+    );
+
+    expect(hasBold).toBe(true);
+    expect(hasItalic).toBe(true);
+    expect(hasUnderline).toBe(true);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<strong>');
+    expect(html).toContain('<em>');
+    expect(html).toContain('<u>');
+  });
+
+  test('Link format works correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert text and make it a link
+    quill.insertText(0, 'Visit our website');
+    quill.formatText(0, 17, 'link', 'https://example.com');
+
+    const content = quill.getContents();
+
+    // Verify link in delta
+    expect(content.ops).toEqual([
+      {
+        insert: 'Visit our website',
+        attributes: { link: 'https://example.com' },
+      },
+      { insert: '\n' },
+    ]);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<a href="https://example.com"');
+    expect(html).toContain('Visit our website</a>');
+
+    // Verify link attributes
+    const linkElement = shadowContainer.querySelector('a');
+    expect(linkElement?.getAttribute('href')).toBe('https://example.com');
+    expect(linkElement?.getAttribute('target')).toBe('_blank');
+    expect(linkElement?.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+
+  test('Block formats (header, blockquote) work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Create header
+    quill.insertText(0, 'Main Heading\n');
+    quill.formatLine(0, 1, 'header', 1);
+
+    // Create blockquote
+    quill.insertText(13, 'This is a quote\n');
+    quill.formatLine(13, 1, 'blockquote', true);
+
+    const content = quill.getContents();
+
+    // Verify block formats in delta
+    expect(content.ops).toEqual([
+      { insert: 'Main Heading' },
+      { insert: '\n', attributes: { header: 1 } },
+      { insert: 'This is a quote' },
+      { insert: '\n', attributes: { blockquote: true } },
+      { insert: '\n' },
+    ]);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<h1>Main Heading</h1>');
+    expect(html).toContain('<blockquote>This is a quote</blockquote>');
+  });
+
+  test('Embed formats (image, video) work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Insert image
+    quill.insertEmbed(0, 'image', 'https://example.com/image.jpg');
+
+    // Insert video
+    quill.insertEmbed(1, 'video', 'https://youtube.com/watch?v=example');
+
+    const content = quill.getContents();
+    console.log('Embed formats content:', JSON.stringify(content.ops, null, 2));
+
+    // Verify embeds exist in delta
+    const hasImage = content.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.image === 'https://example.com/image.jpg',
+    );
+    const hasVideo = content.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.video === 'https://youtube.com/watch?v=example',
+    );
+
+    expect(hasImage).toBe(true);
+    expect(hasVideo).toBe(true);
+
+    // Verify HTML structure
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<img src="https://example.com/image.jpg"');
+    expect(html).toContain('<iframe');
+    expect(html).toContain('src="https://youtube.com/watch?v=example"');
+  });
+
+  test('Multiple Quill instances with different formats work independently', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    // Format text in regular DOM instance
+    regularQuill.insertText(0, 'Regular Text');
+    regularQuill.formatText(0, 7, 'bold', true);
+
+    // Format text in shadow DOM instance
+    shadowQuill.insertText(0, 'Shadow Text');
+    shadowQuill.formatText(0, 6, 'italic', true);
+
+    // Verify independence
+    const regularContent = regularQuill.getContents();
+    const shadowContent = shadowQuill.getContents();
+
+    console.log(
+      'Regular content:',
+      JSON.stringify(regularContent.ops, null, 2),
+    );
+    console.log('Shadow content:', JSON.stringify(shadowContent.ops, null, 2));
+
+    // Verify formatting exists
+    const regularHasBold = regularContent.ops.some(
+      (op) => op.attributes?.bold === true,
+    );
+    const shadowHasItalic = shadowContent.ops.some(
+      (op) => op.attributes?.italic === true,
+    );
+
+    expect(regularHasBold).toBe(true);
+    expect(shadowHasItalic).toBe(true);
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+  });
+
+  test('Nested formatting works correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Create complex nested formatting
+    quill.insertText(0, 'This text has multiple formats');
+
+    // Apply multiple formats to overlapping ranges
+    quill.formatText(0, 4, 'bold', true); // "This"
+    quill.formatText(5, 4, 'italic', true); // "text"
+    quill.formatText(10, 3, 'underline', true); // "has"
+    quill.formatText(23, 7, 'script', 'super'); // "formats"
+
+    const content = quill.getContents();
+    console.log(
+      'Nested formatting content:',
+      JSON.stringify(content.ops, null, 2),
+    );
+
+    // Check that the text content is preserved
+    const text = content.ops
+      .map((op) => (typeof op.insert === 'string' ? op.insert : ''))
+      .join('');
+    expect(text).toContain('This text has multiple formats');
+
+    // Verify formatting exists
+    const hasBold = content.ops.some((op) => op.attributes?.bold === true);
+    const hasItalic = content.ops.some((op) => op.attributes?.italic === true);
+    const hasUnderline = content.ops.some(
+      (op) => op.attributes?.underline === true,
+    );
+    const hasScript = content.ops.some(
+      (op) => op.attributes?.script === 'super',
+    );
+
+    expect(hasBold).toBe(true);
+    expect(hasItalic).toBe(true);
+    expect(hasUnderline).toBe(true);
+    expect(hasScript).toBe(true);
+
+    // Verify HTML contains all format elements
+    const html = quill.root.innerHTML;
+    expect(html).toContain('<strong>');
+    expect(html).toContain('<em>');
+    expect(html).toContain('<u>');
+    expect(html).toContain('<sup>');
+  });
+});
diff --git a/packages/quill/test/unit/modules/clipboard-shadow-dom.spec.ts b/packages/quill/test/unit/modules/clipboard-shadow-dom.spec.ts
new file mode 100644
index 0000000000..50f06de4b7
--- /dev/null
+++ b/packages/quill/test/unit/modules/clipboard-shadow-dom.spec.ts
@@ -0,0 +1,296 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('Clipboard Module Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Clipboard module initializes correctly in regular DOM', () => {
+    const quill = new Quill(container);
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Verify clipboard module exists and is properly initialized
+    expect(quill.clipboard).toBeDefined();
+    expect(quill.clipboard.matchers).toBeDefined();
+    expect(quill.clipboard.matchers.length).toBeGreaterThan(0);
+  });
+
+  test('Clipboard module initializes correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify clipboard module exists and is properly initialized
+    expect(quill.clipboard).toBeDefined();
+    expect(quill.clipboard.matchers).toBeDefined();
+    expect(quill.clipboard.matchers.length).toBeGreaterThan(0);
+  });
+
+  test('HTML parsing and conversion works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Test HTML conversion functionality
+    const html = `
+      <h1>Heading</h1>
+      <p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
+      <ul>
+        <li>List item 1</li>
+        <li>List item 2</li>
+      </ul>
+    `;
+
+    const delta = quill.clipboard.convert({ html, text: '' });
+
+    // Verify conversion worked correctly
+    expect(delta.ops.length).toBeGreaterThan(0);
+
+    // Check for specific formatting
+    const hasHeading = delta.ops.some((op) => op.attributes?.header === 1);
+    const hasBold = delta.ops.some((op) => op.attributes?.bold === true);
+    const hasItalic = delta.ops.some((op) => op.attributes?.italic === true);
+    const hasList = delta.ops.some((op) => op.attributes?.list === 'bullet');
+
+    expect(hasHeading).toBe(true);
+    expect(hasBold).toBe(true);
+    expect(hasItalic).toBe(true);
+    expect(hasList).toBe(true);
+  });
+
+  test('dangerouslyPasteHTML works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Set initial content
+    quill.setContents([{ insert: 'Start\n' }]);
+
+    // Use dangerouslyPasteHTML to insert formatted content
+    const html = '<p>Inserted <strong>HTML</strong> content</p>';
+    quill.clipboard.dangerouslyPasteHTML(5, html);
+
+    // Verify content was inserted
+    const content = quill.getContents();
+    const text = content.ops
+      .map((op) => (typeof op.insert === 'string' ? op.insert : ''))
+      .join('');
+
+    expect(text).toContain('Start');
+    expect(text).toContain('Inserted');
+    expect(text).toContain('HTML');
+    expect(text).toContain('content');
+
+    // Verify formatting was preserved
+    const hasBold = content.ops.some(
+      (op) => op.attributes?.bold === true && op.insert === 'HTML',
+    );
+    expect(hasBold).toBe(true);
+  });
+
+  test('onCopy functionality works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Set content with formatting
+    quill.setContents([
+      { insert: 'Shadow ' },
+      { insert: 'Content', attributes: { bold: true } },
+      { insert: '\n' },
+    ]);
+
+    // Test copy functionality
+    const range = { index: 0, length: 14 };
+    const { html, text } = quill.clipboard.onCopy(range, true);
+
+    // Verify copy results
+    expect(text).toBe('Shadow Content');
+    expect(html).toContain('Shadow');
+    expect(html).toContain('Content');
+    expect(html).toContain('<strong>'); // Bold formatting preserved
+  });
+
+  test('Complex formatting conversion works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Test complex HTML with nested formatting
+    const complexHtml = `
+      <div>
+        <h2>Styled Heading</h2>
+        <p>
+          Text with 
+          <span style="font-weight: bold; font-style: italic;">bold italic</span> 
+          and 
+          <a href="https://example.com">link</a>
+        </p>
+        <blockquote>
+          <p>A quote with <code>code</code> inside</p>
+        </blockquote>
+      </div>
+    `;
+
+    // Convert the HTML
+    const delta = quill.clipboard.convert({ html: complexHtml, text: '' });
+
+    // Verify complex formatting was processed
+    const hasHeader = delta.ops.some((op) => op.attributes?.header);
+    const hasBold = delta.ops.some((op) => op.attributes?.bold);
+    const hasItalic = delta.ops.some((op) => op.attributes?.italic);
+    const hasLink = delta.ops.some((op) => op.attributes?.link);
+    const hasBlockquote = delta.ops.some((op) => op.attributes?.blockquote);
+    const hasCode = delta.ops.some((op) => op.attributes?.code);
+
+    expect(hasHeader).toBe(true);
+    expect(hasBold).toBe(true);
+    expect(hasItalic).toBe(true);
+    expect(hasLink).toBe(true);
+    expect(hasBlockquote).toBe(true);
+    expect(hasCode).toBe(true);
+  });
+
+  test('Multiple Quill instances clipboard work independently', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    // Set different content in each
+    regularQuill.setContents([{ insert: 'Regular content\n' }]);
+    shadowQuill.setContents([{ insert: 'Shadow content\n' }]);
+
+    // Test copy from each instance
+    const regularRange = { index: 0, length: 15 };
+    const shadowRange = { index: 0, length: 14 };
+
+    const { text: regularText } = regularQuill.clipboard.onCopy(
+      regularRange,
+      true,
+    );
+    const { text: shadowText } = shadowQuill.clipboard.onCopy(
+      shadowRange,
+      true,
+    );
+
+    // Verify independence
+    expect(regularText).toBe('Regular content');
+    expect(shadowText).toBe('Shadow content');
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+  });
+
+  test('Matcher functions work in shadow DOM context', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Test that matchers are properly configured
+    expect(quill.clipboard.matchers.length).toBeGreaterThan(0);
+
+    // Test specific HTML structures that use matchers
+    const tableHtml = `
+      <table>
+        <tr>
+          <td>Cell 1</td>
+          <td>Cell 2</td>
+        </tr>
+        <tr>
+          <td>Cell 3</td>
+          <td>Cell 4</td>
+        </tr>
+      </table>
+    `;
+
+    const delta = quill.clipboard.convert({ html: tableHtml, text: '' });
+
+    // Verify table structure was processed
+    expect(delta.ops.length).toBeGreaterThan(0);
+    const text = delta.ops
+      .map((op) => (typeof op.insert === 'string' ? op.insert : ''))
+      .join('');
+
+    expect(text).toContain('Cell 1');
+    expect(text).toContain('Cell 2');
+    expect(text).toContain('Cell 3');
+    expect(text).toContain('Cell 4');
+  });
+
+  test('Event listeners are properly attached in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify event listeners are attached to the editor root
+    // We can't easily test the actual events without complex mocking,
+    // but we can verify the clipboard module has the necessary methods
+    expect(typeof quill.clipboard.onCaptureCopy).toBe('function');
+    expect(typeof quill.clipboard.onCapturePaste).toBe('function');
+
+    // Verify the editor root is the correct element
+    expect(quill.root.parentElement).toBe(shadowContainer);
+  });
+
+  test('Text-only paste works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Test text-only conversion
+    const textData = 'Plain text content\nWith newlines\nAnd more text';
+    const delta = quill.clipboard.convert({ text: textData });
+
+    // Verify text conversion
+    expect(delta.ops.length).toBe(1);
+    expect(delta.ops[0].insert).toBe(textData);
+
+    // Test applying the text
+    quill.setContents(delta);
+    const content = quill.getText();
+    expect(content.trim()).toBe(textData);
+  });
+});
diff --git a/packages/quill/test/unit/modules/history-shadow-dom.spec.ts b/packages/quill/test/unit/modules/history-shadow-dom.spec.ts
new file mode 100644
index 0000000000..0410b549b5
--- /dev/null
+++ b/packages/quill/test/unit/modules/history-shadow-dom.spec.ts
@@ -0,0 +1,570 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+import { sleep } from '../__helpers__/utils.js';
+
+describe('History Module Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('History module initializes correctly in regular DOM', () => {
+    const quill = new Quill(container, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Verify history module exists and is properly initialized
+    expect(quill.history).toBeDefined();
+    expect(quill.history.stack).toBeDefined();
+    expect(quill.history.stack.undo).toEqual([]);
+    expect(quill.history.stack.redo).toEqual([]);
+  });
+
+  test('History module initializes correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify history module exists and is properly initialized
+    expect(quill.history).toBeDefined();
+    expect(quill.history.stack).toBeDefined();
+    expect(quill.history.stack.undo).toEqual([]);
+    expect(quill.history.stack.redo).toEqual([]);
+  });
+
+  test('Undo/redo operations work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Hello\n' }]);
+
+    // Clear history stack after initial setup
+    quill.history.clear();
+    const originalContent = quill.getContents();
+
+    // Make a change
+    quill.insertText(5, ' World');
+    const modifiedContent = quill.getContents();
+
+    // Verify change was made
+    expect(modifiedContent).not.toEqual(originalContent);
+    expect(quill.getText()).toBe('Hello World\n');
+
+    // Verify undo stack has one item
+    expect(quill.history.stack.undo.length).toBe(1);
+    expect(quill.history.stack.redo.length).toBe(0);
+
+    // Test undo
+    quill.history.undo();
+    expect(quill.getContents()).toEqual(originalContent);
+    expect(quill.getText()).toBe('Hello\n');
+
+    // Verify stacks updated
+    expect(quill.history.stack.undo.length).toBe(0);
+    expect(quill.history.stack.redo.length).toBe(1);
+
+    // Test redo
+    quill.history.redo();
+    expect(quill.getContents()).toEqual(modifiedContent);
+    expect(quill.getText()).toBe('Hello World\n');
+
+    // Verify stacks updated
+    expect(quill.history.stack.undo.length).toBe(1);
+    expect(quill.history.stack.redo.length).toBe(0);
+  });
+
+  test('Keyboard shortcuts work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Test\n' }]);
+
+    // Clear history stack after initial setup
+    quill.history.clear();
+    const originalContent = quill.getContents();
+
+    // Make a change
+    quill.insertText(4, ' Content');
+    expect(quill.getText()).toBe('Test Content\n');
+
+    // Verify undo keyboard binding exists
+    const undoBindings = quill.keyboard.bindings['z'];
+    expect(undoBindings).toBeDefined();
+    expect(undoBindings.length).toBeGreaterThan(0);
+
+    // Find the undo binding with shortKey (check for actual property name)
+    const undoBinding = undoBindings.find((binding) => {
+      // Check if this binding has the correct shortkey setup
+      const shortKeyProp = /Mac/i.test(navigator.platform)
+        ? 'metaKey'
+        : 'ctrlKey';
+      return binding[shortKeyProp] === true && !binding.shiftKey;
+    });
+    expect(undoBinding).toBeDefined();
+
+    // Test programmatic undo (simulating keyboard shortcut)
+    quill.history.undo();
+    expect(quill.getContents()).toEqual(originalContent);
+    expect(quill.getText()).toBe('Test\n');
+
+    // Verify redo keyboard bindings exist (check for Z or y depending on platform)
+    let redoBinding;
+    if (/Win/i.test(navigator.platform)) {
+      // Windows uses Ctrl+Y for redo
+      const redoBindings = quill.keyboard.bindings['y'];
+      if (redoBindings) {
+        redoBinding = redoBindings.find((binding) => binding.ctrlKey === true);
+      }
+    } else {
+      // Mac/Linux use Cmd/Ctrl+Shift+Z for redo
+      const redoBindings =
+        quill.keyboard.bindings['z'] || quill.keyboard.bindings['Z'];
+      if (redoBindings) {
+        const shortKeyProp = /Mac/i.test(navigator.platform)
+          ? 'metaKey'
+          : 'ctrlKey';
+        redoBinding = redoBindings.find(
+          (binding) =>
+            binding[shortKeyProp] === true && binding.shiftKey === true,
+        );
+      }
+    }
+    expect(redoBinding).toBeDefined();
+
+    // Test programmatic redo
+    quill.history.redo();
+    expect(quill.getText()).toBe('Test Content\n');
+  });
+
+  test('Multiple operations and undo/redo stack in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 400 },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Start\n' }]);
+
+    // Clear history stack after initial setup
+    quill.history.clear();
+
+    // Make first change
+    quill.insertText(5, ' First');
+    expect(quill.history.stack.undo.length).toBe(1);
+
+    // Wait for delay to separate operations
+    await sleep(500);
+
+    // Make second change
+    quill.insertText(11, ' Second');
+    expect(quill.history.stack.undo.length).toBe(2);
+
+    // Wait for delay to separate operations
+    await sleep(500);
+
+    // Make third change
+    quill.insertText(18, ' Third');
+    expect(quill.history.stack.undo.length).toBe(3);
+
+    // Verify final content
+    expect(quill.getText()).toBe('Start First Second Third\n');
+
+    // Undo operations one by one
+    quill.history.undo();
+    expect(quill.getText()).toBe('Start First Second\n');
+    expect(quill.history.stack.undo.length).toBe(2);
+    expect(quill.history.stack.redo.length).toBe(1);
+
+    quill.history.undo();
+    expect(quill.getText()).toBe('Start First\n');
+    expect(quill.history.stack.undo.length).toBe(1);
+    expect(quill.history.stack.redo.length).toBe(2);
+
+    quill.history.undo();
+    expect(quill.getText()).toBe('Start\n');
+    expect(quill.history.stack.undo.length).toBe(0);
+    expect(quill.history.stack.redo.length).toBe(3);
+
+    // Redo operations
+    quill.history.redo();
+    expect(quill.getText()).toBe('Start First\n');
+
+    quill.history.redo();
+    expect(quill.getText()).toBe('Start First Second\n');
+
+    quill.history.redo();
+    expect(quill.getText()).toBe('Start First Second Third\n');
+  });
+
+  test('Format changes work with history in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Bold text\n' }]);
+
+    // Clear history stack after initial setup
+    quill.history.clear();
+    const originalContent = quill.getContents();
+
+    // Apply bold formatting
+    quill.formatText(0, 4, 'bold', true);
+
+    // Verify formatting was applied
+    const formattedContent = quill.getContents();
+    expect(formattedContent.ops[0].attributes?.bold).toBe(true);
+    expect(formattedContent).not.toEqual(originalContent);
+
+    // Verify undo stack
+    expect(quill.history.stack.undo.length).toBe(1);
+
+    // Test undo
+    quill.history.undo();
+    expect(quill.getContents()).toEqual(originalContent);
+    expect(quill.getContents().ops[0].attributes?.bold).toBeUndefined();
+
+    // Test redo
+    quill.history.redo();
+    expect(quill.getContents()).toEqual(formattedContent);
+    expect(quill.getContents().ops[0].attributes?.bold).toBe(true);
+  });
+
+  test('Embed operations work with history in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Image: \n' }]);
+
+    // Clear history stack after initial setup
+    quill.history.clear();
+    const originalContent = quill.getContents();
+
+    // Insert image embed
+    quill.insertEmbed(7, 'image', 'https://example.com/test.jpg');
+
+    // Verify embed was inserted
+    const embedContent = quill.getContents();
+    const hasImage = embedContent.ops.some(
+      (op) =>
+        typeof op.insert === 'object' &&
+        op.insert?.image === 'https://example.com/test.jpg',
+    );
+    expect(hasImage).toBe(true);
+    expect(embedContent).not.toEqual(originalContent);
+
+    // Verify undo stack
+    expect(quill.history.stack.undo.length).toBe(1);
+
+    // Test undo
+    quill.history.undo();
+    expect(quill.getContents()).toEqual(originalContent);
+
+    // Verify image is removed
+    const imageElements = shadowContainer.querySelectorAll('img');
+    expect(imageElements.length).toBe(0);
+
+    // Test redo
+    quill.history.redo();
+    expect(quill.getContents()).toEqual(embedContent);
+
+    // Verify image is restored
+    const restoredImages = shadowContainer.querySelectorAll('img');
+    expect(restoredImages.length).toBe(1);
+    expect(restoredImages[0].getAttribute('src')).toBe(
+      'https://example.com/test.jpg',
+    );
+  });
+
+  test('History stack limits work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0, maxStack: 3 },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Test\n' }]);
+
+    // Make changes that exceed maxStack
+    ['A', 'B', 'C', 'D', 'E'].forEach((letter, index) => {
+      quill.insertText(4 + index, letter);
+    });
+
+    // Verify stack is limited to maxStack
+    expect(quill.history.stack.undo.length).toBe(3);
+
+    // Test that we can still undo the last 3 operations
+    quill.history.undo(); // Remove E
+    expect(quill.getText()).toBe('TestABCD\n');
+
+    quill.history.undo(); // Remove D
+    expect(quill.getText()).toBe('TestABC\n');
+
+    quill.history.undo(); // Remove C
+    expect(quill.getText()).toBe('TestAB\n');
+
+    // Should not be able to undo further
+    expect(quill.history.stack.undo.length).toBe(0);
+  });
+
+  test('User-only history mode works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0, userOnly: true },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Start\n' }]);
+
+    // Make user change
+    quill.insertText(5, ' USER', Quill.sources.USER);
+    expect(quill.history.stack.undo.length).toBe(1);
+
+    // Make API change (should not be recorded)
+    quill.insertText(10, ' API', Quill.sources.API);
+    expect(quill.history.stack.undo.length).toBe(1); // Should still be 1
+
+    // Verify content
+    expect(quill.getText()).toBe('Start USER API\n');
+
+    // Undo should only remove USER change
+    quill.history.undo();
+    expect(quill.getText()).toBe('Start API\n');
+
+    // Redo should restore USER change
+    quill.history.redo();
+    expect(quill.getText()).toBe('Start USER API\n');
+  });
+
+  test('Multiple Quill instances have independent history', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+    const shadowQuill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Set different content in each
+    regularQuill.setContents([{ insert: 'Regular\n' }]);
+    shadowQuill.setContents([{ insert: 'Shadow\n' }]);
+
+    // Clear history stacks after initial setup
+    regularQuill.history.clear();
+    shadowQuill.history.clear();
+
+    // Make changes
+    regularQuill.insertText(7, ' Content');
+    shadowQuill.insertText(6, ' Content');
+
+    // Verify independent history stacks
+    expect(regularQuill.history.stack.undo.length).toBe(1);
+    expect(shadowQuill.history.stack.undo.length).toBe(1);
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+
+    // Test independent undo operations
+    regularQuill.history.undo();
+    expect(regularQuill.getText()).toBe('Regular\n');
+    expect(shadowQuill.getText()).toBe('Shadow Content\n'); // Unchanged
+
+    shadowQuill.history.undo();
+    expect(regularQuill.getText()).toBe('Regular\n'); // Still unchanged
+    expect(shadowQuill.getText()).toBe('Shadow\n');
+  });
+
+  test('History works with Delta transformations in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0, userOnly: true },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Test\n' }]);
+
+    // Make user change
+    quill.insertText(0, 'A', Quill.sources.USER);
+    expect(quill.getText()).toBe('ATest\n');
+
+    // Make API change that transforms the position
+    quill.insertText(0, 'B', Quill.sources.API);
+    expect(quill.getText()).toBe('BATest\n');
+
+    // Undo should correctly handle transformed position
+    quill.history.undo();
+    expect(quill.getText()).toBe('BTest\n');
+
+    // Redo should also handle transformed position
+    quill.history.redo();
+    expect(quill.getText()).toBe('BATest\n');
+  });
+
+  test('Selection is restored correctly after undo/redo in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Set initial content and selection
+    quill.setContents([{ insert: 'Hello World\n' }]);
+    quill.setSelection(6, 5); // Select "World"
+
+    // Apply formatting
+    quill.formatText(6, 5, 'bold', true);
+
+    // Verify formatting was applied
+    const range = quill.getSelection();
+    expect(range?.index).toBe(6);
+    expect(range?.length).toBe(5);
+
+    // Undo formatting
+    quill.history.undo();
+
+    // Verify selection is restored
+    const restoredRange = quill.getSelection();
+    expect(restoredRange?.index).toBe(6);
+    expect(restoredRange?.length).toBe(5);
+
+    // Verify formatting is removed
+    const format = quill.getFormat();
+    expect(format.bold).toBeUndefined();
+  });
+
+  test('beforeinput event handlers work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        history: { delay: 0 },
+      },
+    });
+
+    // Set initial content
+    quill.setContents([{ insert: 'Test\n' }]);
+
+    // Clear history stack after initial setup
+    quill.history.clear();
+
+    // Make a change
+    quill.insertText(4, ' Content');
+    expect(quill.history.stack.undo.length).toBe(1);
+
+    // Create beforeinput event for undo
+    const undoEvent = new InputEvent('beforeinput', {
+      inputType: 'historyUndo',
+      cancelable: true,
+    });
+
+    // Dispatch to editor root
+    quill.root.dispatchEvent(undoEvent);
+
+    // Verify event was prevented and undo occurred
+    expect(undoEvent.defaultPrevented).toBe(true);
+    expect(quill.getText()).toBe('Test\n');
+
+    // Test redo event
+    const redoEvent = new InputEvent('beforeinput', {
+      inputType: 'historyRedo',
+      cancelable: true,
+    });
+
+    quill.root.dispatchEvent(redoEvent);
+
+    // Verify event was prevented and redo occurred
+    expect(redoEvent.defaultPrevented).toBe(true);
+    expect(quill.getText()).toBe('Test Content\n');
+  });
+});
diff --git a/packages/quill/test/unit/modules/keyboard-shadow-dom.spec.ts b/packages/quill/test/unit/modules/keyboard-shadow-dom.spec.ts
new file mode 100644
index 0000000000..90e125b798
--- /dev/null
+++ b/packages/quill/test/unit/modules/keyboard-shadow-dom.spec.ts
@@ -0,0 +1,260 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('Keyboard Module Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Keyboard module initializes correctly in regular DOM', () => {
+    const quill = new Quill(container);
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Verify keyboard module exists and is properly initialized
+    expect(quill.keyboard).toBeDefined();
+    expect(quill.keyboard.bindings).toBeDefined();
+    expect(Object.keys(quill.keyboard.bindings).length).toBeGreaterThan(0);
+  });
+
+  test('Keyboard module initializes correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify keyboard module exists and is properly initialized
+    expect(quill.keyboard).toBeDefined();
+    expect(quill.keyboard.bindings).toBeDefined();
+    expect(Object.keys(quill.keyboard.bindings).length).toBeGreaterThan(0);
+  });
+
+  test('Keyboard bindings are properly configured in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify keyboard bindings are set up
+    expect(quill.keyboard.bindings).toBeDefined();
+
+    // Check for common key bindings
+    expect(quill.keyboard.bindings['Enter']).toBeDefined();
+    expect(quill.keyboard.bindings['Enter'].length).toBeGreaterThan(0);
+
+    // Verify some other common bindings exist
+    const hasBackspace = Object.prototype.hasOwnProperty.call(
+      quill.keyboard.bindings,
+      'Backspace',
+    );
+    expect(hasBackspace || quill.keyboard.bindings['8']).toBeTruthy(); // Backspace key
+  });
+
+  test('Event listener is attached to correct element in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Verify the keyboard module methods exist
+    expect(typeof quill.keyboard.listen).toBe('function');
+
+    // Verify the editor root is the correct element within shadow DOM
+    expect(quill.root.parentElement).toBe(shadowContainer);
+    expect(shadowContainer.parentNode).toBe(shadowRoot);
+  });
+
+  test('Custom keyboard bindings can be added in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Add a custom keyboard binding
+    quill.keyboard.addBinding(
+      {
+        key: 'F1',
+      },
+      () => {
+        // Custom handler
+      },
+    );
+
+    // Verify binding was added
+    expect(quill.keyboard.bindings['F1']).toBeDefined();
+  });
+
+  test('Multiple Quill instances have independent keyboard modules', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container);
+    const shadowQuill = new Quill(shadowContainer);
+
+    // Verify both have their own keyboard modules
+    expect(regularQuill.keyboard).toBeDefined();
+    expect(shadowQuill.keyboard).toBeDefined();
+    expect(regularQuill.keyboard).not.toBe(shadowQuill.keyboard);
+
+    // Verify they have the same default bindings
+    const regularBindingKeys = Object.keys(regularQuill.keyboard.bindings);
+    const shadowBindingKeys = Object.keys(shadowQuill.keyboard.bindings);
+    expect(regularBindingKeys.length).toBe(shadowBindingKeys.length);
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+  });
+
+  test('Keyboard.match function works correctly', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Test the keyboard matching function
+    const mockEvent = {
+      key: 'b',
+      ctrlKey: true,
+      shiftKey: false,
+      altKey: false,
+      metaKey: false,
+    } as KeyboardEvent;
+
+    const binding = {
+      key: 'b',
+      ctrlKey: true,
+    };
+
+    // This should match (using the static match method from Keyboard class)
+    const KeyboardClass = quill.keyboard.constructor as any;
+    const matches = KeyboardClass.match(mockEvent, binding);
+    expect(matches).toBe(true);
+
+    // Test non-matching case
+    const nonMatchingBinding = {
+      key: 'b',
+      ctrlKey: false,
+    };
+
+    const doesNotMatch = KeyboardClass.match(mockEvent, nonMatchingBinding);
+    expect(doesNotMatch).toBe(false);
+  });
+
+  test('Keyboard module handles browser detection correctly', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // The keyboard module should initialize regardless of browser
+    // This tests that browser-specific code doesn't break in shadow DOM
+    expect(quill.keyboard).toBeDefined();
+    expect(quill.keyboard.bindings).toBeDefined();
+
+    // Verify common bindings exist (these vary by browser)
+    const hasEnterBinding = quill.keyboard.bindings['Enter'];
+    expect(hasEnterBinding).toBeDefined();
+    expect(Array.isArray(hasEnterBinding)).toBe(true);
+  });
+
+  test('Keyboard binding normalization works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Test that we can add bindings with different formats
+    quill.keyboard.addBinding(
+      {
+        key: 'Enter',
+        shiftKey: true,
+      },
+      () => {},
+    );
+
+    quill.keyboard.addBinding('F2', () => {});
+
+    // Verify bindings were added and normalized
+    expect(quill.keyboard.bindings['Enter']).toBeDefined();
+    expect(quill.keyboard.bindings['F2']).toBeDefined();
+  });
+
+  test('Keyboard context detection setup works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Set content with formatting to test context
+    quill.setContents([
+      { insert: 'Normal ' },
+      { insert: 'bold', attributes: { bold: true } },
+      { insert: ' text\n' },
+    ]);
+
+    // Place cursor in bold text
+    quill.setSelection(8, 0); // In the middle of "bold"
+
+    // Verify we can detect format context
+    const range = quill.getSelection();
+    expect(range).not.toBeNull();
+
+    if (range) {
+      const format = quill.getFormat(range);
+      expect(format.bold).toBe(true);
+    }
+  });
+
+  test('Keyboard module works with blot detection in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer);
+
+    // Set content
+    quill.setContents([{ insert: 'Test content\n' }]);
+
+    // The keyboard module uses Quill.find to locate blots
+    // Verify this works in shadow DOM context
+    const textNode = quill.root.querySelector('.ql-editor')?.firstChild;
+    if (textNode) {
+      // This internal API should work in shadow DOM
+      const blot = Quill.find(textNode, true);
+      expect(blot).toBeDefined();
+      if (blot) {
+        expect(blot.scroll).toBe(quill.scroll);
+      }
+    }
+  });
+});
diff --git a/packages/quill/test/unit/modules/syntax-shadow-dom.spec.ts b/packages/quill/test/unit/modules/syntax-shadow-dom.spec.ts
new file mode 100644
index 0000000000..6d11ebbb16
--- /dev/null
+++ b/packages/quill/test/unit/modules/syntax-shadow-dom.spec.ts
@@ -0,0 +1,459 @@
+import {
+  describe,
+  test,
+  expect,
+  beforeEach,
+  afterEach,
+  beforeAll,
+} from 'vitest';
+import hljs from 'highlight.js';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+import Syntax, { CodeBlock, CodeToken } from '../../../src/modules/syntax.js';
+import Bold from '../../../src/formats/bold.js';
+import { createRegistry } from '../__helpers__/factory.js';
+import { normalizeHTML, sleep } from '../__helpers__/utils.js';
+
+const HIGHLIGHT_INTERVAL = 10;
+
+describe('Syntax Module Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeAll(() => {
+    Quill.register({ 'modules/syntax': Syntax }, true);
+    Syntax.register();
+    Syntax.DEFAULTS.languages = [
+      { key: 'javascript', label: 'JavaScript' },
+      { key: 'ruby', label: 'Ruby' },
+      { key: 'python', label: 'Python' },
+    ];
+  });
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  const createRegularQuill = () => {
+    container.innerHTML = normalizeHTML(
+      `<pre data-language="javascript">var test = 1;<br>var bugz = 0;<br></pre>
+       <p><br></p>`,
+    );
+    const quill = new Quill(container, {
+      modules: {
+        syntax: {
+          hljs,
+          interval: HIGHLIGHT_INTERVAL,
+        },
+      },
+      registry: createRegistry([
+        Bold,
+        CodeToken,
+        CodeBlock,
+        Quill.import('formats/code-block-container'),
+      ]),
+    });
+    return quill;
+  };
+
+  const createShadowQuill = () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    shadowContainer.innerHTML = normalizeHTML(
+      `<pre data-language="javascript">var test = 1;<br>var bugz = 0;<br></pre>
+       <p><br></p>`,
+    );
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        syntax: {
+          hljs,
+          interval: HIGHLIGHT_INTERVAL,
+        },
+      },
+      registry: createRegistry([
+        Bold,
+        CodeToken,
+        CodeBlock,
+        Quill.import('formats/code-block-container'),
+      ]),
+    });
+    return quill;
+  };
+
+  test('Syntax module initializes correctly in regular DOM', () => {
+    const quill = createRegularQuill();
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Verify syntax module exists and is properly initialized
+    expect(quill.getModule('syntax')).toBeDefined();
+
+    // Verify initial code block structure
+    expect(quill.root).toEqualHTML(
+      `<div class="ql-code-block-container" spellcheck="false">
+        <div class="ql-code-block" data-language="javascript">var test = 1;</div>
+        <div class="ql-code-block" data-language="javascript">var bugz = 0;</div>
+      </div>
+      <p><br></p>`,
+    );
+  });
+
+  test('Syntax module initializes correctly in shadow DOM', () => {
+    const quill = createShadowQuill();
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify syntax module exists and is properly initialized
+    expect(quill.getModule('syntax')).toBeDefined();
+
+    // Verify initial code block structure
+    expect(quill.root).toEqualHTML(
+      `<div class="ql-code-block-container" spellcheck="false">
+        <div class="ql-code-block" data-language="javascript">var test = 1;</div>
+        <div class="ql-code-block" data-language="javascript">var bugz = 0;</div>
+      </div>
+      <p><br></p>`,
+    );
+  });
+
+  test('Syntax highlighting works in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // Wait for highlighting to occur
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify highlighting tokens are applied
+    expect(quill.root).toEqualHTML(
+      `<div class="ql-code-block-container" spellcheck="false">
+          <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>
+          <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
+        </div>
+        <p><br></p>`,
+    );
+  });
+
+  test('Language selector dropdown works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    shadowContainer.innerHTML = normalizeHTML(
+      `<pre data-language="javascript">function test() {<br>  return 42;<br>}<br></pre>`,
+    );
+
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        syntax: {
+          hljs,
+          interval: HIGHLIGHT_INTERVAL,
+        },
+      },
+      registry: createRegistry([
+        Bold,
+        CodeToken,
+        CodeBlock,
+        Quill.import('formats/code-block-container'),
+      ]),
+    });
+
+    // Add a paragraph to trigger container mounting
+    quill.updateContents(quill.getContents().insert('\n'));
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify language selector is created within shadow DOM
+    const selectors = shadowContainer.querySelectorAll('select.ql-ui');
+    expect(selectors.length).toBeGreaterThanOrEqual(1);
+
+    // Verify selector has correct options
+    const selector = selectors[0] as HTMLSelectElement;
+    expect(selector.ownerDocument).toBe(document);
+    expect(selector.options.length).toBe(3);
+    expect(selector.options[0].value).toBe('javascript');
+    expect(selector.options[0].textContent).toBe('JavaScript');
+    expect(selector.options[1].value).toBe('ruby');
+    expect(selector.options[1].textContent).toBe('Ruby');
+    expect(selector.options[2].value).toBe('python');
+    expect(selector.options[2].textContent).toBe('Python');
+  });
+
+  test('Language changes work in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // Change language to Ruby
+    quill.formatLine(0, 20, 'code-block', 'ruby');
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify language change is applied and highlighting updated
+    expect(quill.root).toEqualHTML(
+      `<div class="ql-code-block-container" spellcheck="false">
+        <div class="ql-code-block" data-language="ruby">var test = <span class="ql-token hljs-number">1</span>;</div>
+        <div class="ql-code-block" data-language="ruby">var bugz = <span class="ql-token hljs-number">0</span>;</div>
+      </div>
+      <p><br></p>`,
+    );
+
+    // Verify Delta content
+    const contents = quill.getContents();
+    expect(contents.ops[1].attributes?.['code-block']).toBe('ruby');
+    expect(contents.ops[3].attributes?.['code-block']).toBe('ruby');
+  });
+
+  test('Invalid language fallback works in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // Set invalid language
+    quill.formatLine(0, 20, 'code-block', 'nonexistent');
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify fallback to 'plain' language
+    expect(quill.root).toEqualHTML(
+      `<div class="ql-code-block-container" spellcheck="false">
+        <div class="ql-code-block" data-language="plain">var test = 1;</div>
+        <div class="ql-code-block" data-language="plain">var bugz = 0;</div>
+      </div>
+      <p><br></p>`,
+    );
+
+    // Verify no highlighting tokens (plain text)
+    const tokens = shadowRoot.querySelectorAll('.ql-token');
+    expect(tokens.length).toBe(0);
+  });
+
+  test('Code block splitting works in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // Split the code block by inserting a newline
+    quill.updateContents(quill.getContents().retain(14).insert('\n'));
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify that splitting creates separate containers
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const containers = shadowContainer.querySelectorAll(
+      '.ql-code-block-container',
+    );
+    expect(containers.length).toBeGreaterThanOrEqual(2);
+
+    // Verify selectors are created within shadow DOM
+    const selectors = shadowContainer.querySelectorAll('select.ql-ui');
+    expect(selectors.length).toBeGreaterThanOrEqual(2);
+    selectors.forEach((selector) => {
+      expect(selector.ownerDocument).toBe(document);
+    });
+
+    // Verify both code blocks still have highlighting
+    const tokens = shadowContainer.querySelectorAll('.ql-token');
+    expect(tokens.length).toBeGreaterThan(0);
+  });
+
+  test('Code block merging works in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // First split the blocks
+    quill.updateContents(quill.getContents().retain(14).insert('\n'));
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify split occurred
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    let containers = shadowContainer.querySelectorAll(
+      '.ql-code-block-container',
+    );
+    const initialContainerCount = containers.length;
+    expect(initialContainerCount).toBeGreaterThanOrEqual(2);
+
+    // Then merge them back by removing the newline
+    quill.deleteText(14, 1);
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify blocks are merged back - should have fewer or equal containers than before
+    containers = shadowContainer.querySelectorAll('.ql-code-block-container');
+    expect(containers.length).toBeLessThanOrEqual(initialContainerCount);
+
+    // Verify highlighting still works
+    const tokens = shadowContainer.querySelectorAll('.ql-token');
+    expect(tokens.length).toBeGreaterThan(0);
+
+    // Verify both code lines are present
+    const text = quill.getText();
+    expect(text).toContain('var test = 1;');
+    expect(text).toContain('var bugz = 0;');
+  });
+
+  test('Formatting within code blocks works in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // Allow bold formatting in code blocks for this test
+    CodeBlock.allowedChildren.push(Bold);
+
+    try {
+      // Apply bold formatting to part of the code
+      quill.formatText(2, 3, 'bold', true);
+      await sleep(HIGHLIGHT_INTERVAL + 1);
+
+      // Verify formatting is preserved with highlighting
+      expect(quill.root).toEqualHTML(
+        `<div class="ql-code-block-container" spellcheck="false">
+          <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">va</span><strong><span class="ql-token hljs-keyword">r</span> t</strong>est = <span class="ql-token hljs-number">1</span>;</div>
+          <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
+        </div>
+        <p><br></p>`,
+      );
+    } finally {
+      // Clean up: remove Bold from allowedChildren
+      CodeBlock.allowedChildren.pop();
+    }
+  });
+
+  test('Converting from code block to regular text works in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // Apply bold formatting first
+    CodeBlock.allowedChildren.push(Bold);
+    quill.formatText(2, 3, 'bold', true);
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    try {
+      // Remove code block formatting from first line
+      quill.formatLine(0, 1, 'code-block', false);
+
+      // Verify first line becomes regular paragraph with preserved formatting
+      expect(quill.root).toEqualHTML(
+        `<p>va<strong>r t</strong>est = 1;</p>
+         <div class="ql-code-block-container" spellcheck="false">
+           <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
+         </div>
+         <p><br></p>`,
+      );
+    } finally {
+      CodeBlock.allowedChildren.pop();
+    }
+  });
+
+  test('Multiple Quill instances with syntax work independently', async () => {
+    const regularQuill = createRegularQuill();
+    const shadowQuill = createShadowQuill();
+
+    // Set different languages for each instance
+    regularQuill.formatLine(0, 20, 'code-block', 'ruby');
+    shadowQuill.formatLine(0, 20, 'code-block', 'python');
+
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify each instance has correct language
+    const regularContents = regularQuill.getContents();
+    const shadowContents = shadowQuill.getContents();
+
+    expect(regularContents.ops[1].attributes?.['code-block']).toBe('ruby');
+    expect(shadowContents.ops[1].attributes?.['code-block']).toBe('python');
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+
+    // Verify highlighting is applied correctly in both
+    const regularTokens = container.querySelectorAll('.ql-token');
+    const shadowTokens = shadowRoot.querySelectorAll('.ql-token');
+
+    expect(regularTokens.length).toBeGreaterThan(0);
+    expect(shadowTokens.length).toBeGreaterThan(0);
+  });
+
+  test('Syntax module HTML export works in shadow DOM', async () => {
+    const quill = createShadowQuill();
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify semantic HTML export includes language data
+    const html = quill.getSemanticHTML();
+    expect(html).toContain('data-language="javascript"');
+  });
+
+  test('Element creation uses correct document context in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    shadowContainer.innerHTML = normalizeHTML(
+      `<pre data-language="javascript">console.log('test');</pre>`,
+    );
+
+    const quill = new Quill(shadowContainer, {
+      modules: {
+        syntax: {
+          hljs,
+          interval: HIGHLIGHT_INTERVAL,
+        },
+      },
+      registry: createRegistry([
+        Bold,
+        CodeToken,
+        CodeBlock,
+        Quill.import('formats/code-block-container'),
+      ]),
+    });
+
+    // Trigger container mounting to create selector
+    quill.updateContents(quill.getContents().insert('\n'));
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify all created elements have correct document context
+    const selector = shadowContainer.querySelector('select.ql-ui');
+    expect(selector?.ownerDocument).toBe(document);
+
+    const options = shadowContainer.querySelectorAll('option');
+    options.forEach((option) => {
+      expect(option.ownerDocument).toBe(document);
+    });
+
+    // Verify highlighting container elements
+    const tokens = shadowContainer.querySelectorAll('.ql-token');
+    tokens.forEach((token) => {
+      expect(token.ownerDocument).toBe(document);
+    });
+  });
+
+  test('Tokens do not escape code blocks in shadow DOM', async () => {
+    const quill = createShadowQuill();
+
+    // Delete the second line of code (moving text outside code block)
+    quill.deleteText(22, 6);
+    await sleep(HIGHLIGHT_INTERVAL + 1);
+
+    // Verify tokens don't escape to regular paragraph
+    expect(quill.root).toEqualHTML(
+      `<div class="ql-code-block-container" spellcheck="false">
+        <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>
+      </div>
+      <p>var bugz</p>`,
+    );
+
+    // Verify the escaped text has no highlighting tokens
+    const paragraph = shadowRoot.querySelector('p');
+    const tokensInParagraph = paragraph?.querySelectorAll('.ql-token');
+    expect(tokensInParagraph?.length).toBe(0);
+  });
+});
diff --git a/packages/quill/test/unit/shadow-dom/manual-test-character-swap.html b/packages/quill/test/unit/shadow-dom/manual-test-character-swap.html
new file mode 100644
index 0000000000..9cd3fc6e1e
--- /dev/null
+++ b/packages/quill/test/unit/shadow-dom/manual-test-character-swap.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Character Swap Test - Shadow DOM</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 40px;
+    }
+    .test-container {
+      margin: 20px 0;
+      border: 1px solid #ddd;
+      padding: 20px;
+      border-radius: 5px;
+    }
+    .shadow-host {
+      border: 2px solid #007bff;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 5px;
+    }
+    pre {
+      background: #f4f4f4;
+      padding: 10px;
+      border-radius: 3px;
+      overflow-x: auto;
+    }
+  </style>
+</head>
+<body>
+  <h1>Character Swap Test - Shadow DOM</h1>
+  
+  <div class="test-container">
+    <h2>Test Instructions:</h2>
+    <ol>
+      <li>Click in the shadow DOM editor below</li>
+      <li>Press Enter to create a new line</li>
+      <li>Type "abc" on the new line</li>
+      <li>Check if you see "abc" or "bac"</li>
+    </ol>
+  </div>
+
+  <div class="test-container">
+    <h2>Shadow DOM Quill Editor</h2>
+    <div id="shadow-host" class="shadow-host"></div>
+    <h3>Delta Output:</h3>
+    <pre id="delta-output"></pre>
+  </div>
+
+  <!-- Use local build -->
+  <script src="../../../dist/quill.js"></script>
+  
+  <script>
+    // Shadow DOM editor
+    const shadowHost = document.getElementById('shadow-host');
+    const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+    
+    // Create container for Quill in shadow DOM
+    const shadowContainer = document.createElement('div');
+    shadowContainer.innerHTML = `
+      <style>
+        .ql-container {
+          border: 1px solid #ccc;
+          min-height: 200px;
+        }
+        .ql-editor {
+          min-height: 150px;
+          padding: 10px;
+        }
+      </style>
+      <div id="shadow-editor"></div>
+    `;
+    shadowRoot.appendChild(shadowContainer);
+    
+    // Initialize Quill in shadow DOM
+    const shadowQuill = new Quill(shadowRoot.querySelector('#shadow-editor'));
+    
+    // Add some initial content
+    shadowQuill.setText('Type on this line, then press Enter and type "abc" on the new line.\n');
+    
+    // Monitor changes
+    const deltaOutput = document.getElementById('delta-output');
+    shadowQuill.on('text-change', (delta, oldDelta, source) => {
+      console.log('Text change:', delta, source);
+      deltaOutput.textContent = JSON.stringify(shadowQuill.getContents(), null, 2);
+    });
+    
+    // Log selection changes
+    shadowQuill.on('selection-change', (range, oldRange, source) => {
+      if (range) {
+        console.log('Selection:', range, source);
+      }
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/quill/test/unit/themes/bubble-shadow-dom.spec.ts b/packages/quill/test/unit/themes/bubble-shadow-dom.spec.ts
new file mode 100644
index 0000000000..8d6f35050a
--- /dev/null
+++ b/packages/quill/test/unit/themes/bubble-shadow-dom.spec.ts
@@ -0,0 +1,469 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+import { sleep } from '../__helpers__/utils.js';
+
+describe('Bubble Theme Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Bubble theme initializes correctly in regular DOM', () => {
+    const quill = new Quill(container, {
+      theme: 'bubble',
+    });
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Verify theme is applied
+    expect(quill.container.classList.contains('ql-bubble')).toBe(true);
+
+    // Verify tooltip exists
+    const tooltip = container.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+  });
+
+  test('Bubble theme initializes correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+    });
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify theme is applied
+    expect(quill.container.classList.contains('ql-bubble')).toBe(true);
+
+    // Verify tooltip exists within shadow DOM
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+  });
+
+  test('Bubble tooltip shows on text selection in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+    });
+
+    // Insert some text
+    quill.setText('Hello World');
+
+    // Select text with USER source to trigger bubble
+    quill.setSelection(0, 5, 'user'); // Select "Hello" with user source
+    await sleep(10);
+
+    // Check if tooltip exists
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+
+    // Verify tooltip exists in shadow DOM (visibility depends on user interaction)
+    expect(tooltip?.ownerDocument).toBe(document);
+  });
+
+  test('Bubble toolbar renders correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+      modules: {
+        toolbar: [
+          ['bold', 'italic', 'link'],
+          [{ header: 1 }, { header: 2 }, 'blockquote'],
+        ],
+      },
+    });
+
+    // Insert text and select to show toolbar
+    quill.setText('Test text for toolbar');
+    quill.setSelection(0, 4, 'user'); // Use 'user' source to trigger bubble
+
+    // Verify toolbar elements exist within shadow DOM
+    const boldButton = shadowRoot.querySelector('.ql-bold');
+    const italicButton = shadowRoot.querySelector('.ql-italic');
+    const linkButton = shadowRoot.querySelector('.ql-link');
+    // Note: header dropdown might not exist if not configured correctly
+    const headerButton = shadowRoot.querySelector('.ql-header');
+
+    expect(boldButton).toBeTruthy();
+    expect(italicButton).toBeTruthy();
+    expect(linkButton).toBeTruthy();
+    // Headers might be buttons, not selects in bubble theme
+    expect(headerButton).toBeTruthy();
+
+    // Verify buttons have correct document context
+    expect(boldButton?.ownerDocument).toBe(document);
+    expect(italicButton?.ownerDocument).toBe(document);
+    expect(linkButton?.ownerDocument).toBe(document);
+    expect(headerButton?.ownerDocument).toBe(document);
+  });
+
+  test('Bubble toolbar functionality works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+      modules: {
+        toolbar: ['bold', 'italic'],
+      },
+    });
+
+    // Set some text and select it
+    quill.setText('Hello World');
+    quill.setSelection(0, 5, 'user'); // Select "Hello"
+
+    // Apply bold formatting via toolbar
+    const boldButton = shadowRoot.querySelector(
+      '.ql-bold',
+    ) as HTMLButtonElement;
+    expect(boldButton).toBeTruthy();
+
+    boldButton.click();
+
+    // Verify formatting was applied
+    const delta = quill.getContents();
+    expect(delta.ops[0].attributes?.bold).toBe(true);
+    expect(delta.ops[0].insert).toBe('Hello');
+  });
+
+  test('Bubble tooltip positioning works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+    });
+
+    // Insert text and select to trigger positioning
+    quill.setText('Position test text');
+    quill.setSelection(0, 8, 'user'); // Select "Position"
+    await sleep(10);
+
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    if (tooltip) {
+      // Verify tooltip exists in shadow DOM
+      expect(tooltip.ownerDocument).toBe(document);
+
+      // Check if tooltip has positioning styles
+      const hasLeftStyle = (tooltip as HTMLElement).style.left !== '';
+      const hasTopStyle = (tooltip as HTMLElement).style.top !== '';
+
+      // If positioned, verify it's within reasonable bounds
+      if (hasLeftStyle && hasTopStyle) {
+        const shadowBounds = shadowContainer.getBoundingClientRect();
+        const tooltipBounds = tooltip.getBoundingClientRect();
+
+        expect(tooltipBounds.top).toBeGreaterThanOrEqual(
+          shadowBounds.top - 100,
+        );
+        expect(tooltipBounds.left).toBeGreaterThanOrEqual(
+          shadowBounds.left - 200,
+        );
+      } else {
+        // Tooltip exists but may not be positioned yet - this is valid
+        expect(tooltip).toBeTruthy();
+      }
+    }
+  });
+
+  test('Bubble tooltip arrow positioning works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+    });
+
+    // Insert text and select to trigger tooltip with arrow
+    quill.setText('Arrow positioning test');
+    quill.setSelection(0, 5, 'user'); // Select "Arrow"
+    await sleep(10);
+
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    const arrow = shadowRoot.querySelector('.ql-tooltip-arrow');
+
+    expect(tooltip).toBeTruthy();
+    expect(arrow).toBeTruthy();
+
+    if (arrow) {
+      // Verify arrow has correct document context
+      expect(arrow.ownerDocument).toBe(document);
+
+      // Arrow should exist within the tooltip
+      expect(tooltip?.contains(arrow)).toBe(true);
+    }
+  });
+
+  test('Bubble theme link editing works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Insert text and select for link editing
+    quill.setText('Link test text');
+    quill.setSelection(0, 4, 'user'); // Select "Link"
+    await sleep(10);
+
+    // Find and click the link button
+    const linkButton = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    expect(linkButton).toBeTruthy();
+
+    linkButton.click();
+    await sleep(10);
+
+    // Verify tooltip is in editing mode
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    if (tooltip) {
+      expect(tooltip.classList.contains('ql-editing')).toBe(true);
+
+      // Verify text input exists
+      const textInput = tooltip.querySelector('input[type="text"]');
+      expect(textInput).toBeTruthy();
+      expect(textInput?.ownerDocument).toBe(document);
+    }
+  });
+
+  test('Bubble theme close button works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Insert text and trigger editing mode
+    quill.setText('Close test');
+    quill.setSelection(0, 5, 'user');
+    await sleep(10);
+
+    const linkButton = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    linkButton?.click();
+    await sleep(10);
+
+    // Find and click close button
+    const closeButton = shadowRoot.querySelector('.ql-close') as HTMLElement;
+    expect(closeButton).toBeTruthy();
+
+    closeButton.click();
+    await sleep(10);
+
+    // Verify tooltip is no longer in editing mode
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    if (tooltip) {
+      expect(tooltip.classList.contains('ql-editing')).toBe(false);
+    }
+  });
+
+  test('Multiple Bubble theme instances work independently', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container, {
+      theme: 'bubble',
+      modules: {
+        toolbar: ['bold', 'italic'],
+      },
+    });
+
+    const shadowQuill = new Quill(shadowContainer, {
+      theme: 'bubble',
+      modules: {
+        toolbar: ['underline', 'strike'],
+      },
+    });
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+
+    // Verify independent tooltips
+    const regularTooltip = container.querySelector('.ql-tooltip');
+    const shadowTooltip = shadowRoot.querySelector('.ql-tooltip');
+
+    expect(regularTooltip).toBeTruthy();
+    expect(shadowTooltip).toBeTruthy();
+
+    // Set text in both instances
+    regularQuill.setText('Regular instance');
+    shadowQuill.setText('Shadow instance');
+
+    // Select text in both to show toolbars
+    regularQuill.setSelection(0, 7, 'user'); // Select "Regular"
+    shadowQuill.setSelection(0, 6, 'user'); // Select "Shadow"
+
+    // Verify different button sets exist independently
+    expect(container.querySelector('.ql-bold')).toBeTruthy();
+    expect(container.querySelector('.ql-italic')).toBeTruthy();
+    expect(container.querySelector('.ql-underline')).toBeFalsy();
+    expect(container.querySelector('.ql-strike')).toBeFalsy();
+
+    expect(shadowRoot.querySelector('.ql-bold')).toBeFalsy();
+    expect(shadowRoot.querySelector('.ql-italic')).toBeFalsy();
+    expect(shadowRoot.querySelector('.ql-underline')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-strike')).toBeTruthy();
+  });
+
+  test('Bubble theme active element detection works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Insert text and enter link editing mode
+    quill.setText('Active element test');
+    quill.setSelection(0, 6, 'user'); // Select "Active"
+    await sleep(10);
+
+    const linkButton = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    linkButton?.click();
+    await sleep(10);
+
+    // Verify tooltip input is active
+    const textInput = shadowRoot.querySelector(
+      '.ql-tooltip input[type="text"]',
+    ) as HTMLInputElement;
+    expect(textInput).toBeTruthy();
+
+    // Focus the input
+    textInput.focus();
+    await sleep(10);
+
+    // Verify getActiveElement works correctly in shadow DOM
+    const activeElement = quill.domRoot.getActiveElement();
+    expect(activeElement).toBe(textInput);
+  });
+
+  test('Bubble theme styles are properly scoped in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+    });
+
+    // Verify theme classes are applied
+    expect(quill.container.classList.contains('ql-bubble')).toBe(true);
+
+    // Verify tooltip exists with proper structure
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+
+    const arrow = shadowRoot.querySelector('.ql-tooltip-arrow');
+    expect(arrow).toBeTruthy();
+
+    const editor = shadowRoot.querySelector('.ql-tooltip-editor');
+    expect(editor).toBeTruthy();
+
+    // Verify main editor element
+    const editorElement = shadowRoot.querySelector('.ql-editor');
+    expect(editorElement).toBeTruthy();
+  });
+
+  test('Bubble theme scroll optimization works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+    });
+
+    // Create a longer text to enable scrolling
+    const longText = 'Long text '.repeat(100);
+    quill.setText(longText);
+
+    // Select text to show tooltip with user source
+    quill.setSelection(0, 10, 'user');
+    await sleep(10);
+
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+
+    // Verify tooltip exists in shadow DOM context
+    expect(tooltip?.ownerDocument).toBe(document);
+
+    // Trigger a scroll event (simulate the event properly)
+    const range = quill.getSelection();
+    quill.emitter.emit('scroll-optimize', range, range, 'user');
+    await sleep(10);
+
+    // Tooltip should still be functional
+    expect(tooltip).toBeTruthy();
+  });
+
+  test('Bubble theme multiline selection positioning', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'bubble',
+    });
+
+    // Insert multiline text
+    quill.setText('First line\nSecond line\nThird line');
+
+    // Select across multiple lines
+    quill.setSelection(5, 15, 'user'); // From "line" in first line to "line" in second line
+    await sleep(10);
+
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+
+    // Verify tooltip positioning handles multiline selection
+    if (tooltip) {
+      // Either tooltip is positioned or it exists (both are valid states)
+      expect(tooltip).toBeTruthy();
+    }
+  });
+});
diff --git a/packages/quill/test/unit/themes/snow-shadow-dom.spec.ts b/packages/quill/test/unit/themes/snow-shadow-dom.spec.ts
new file mode 100644
index 0000000000..882490bc47
--- /dev/null
+++ b/packages/quill/test/unit/themes/snow-shadow-dom.spec.ts
@@ -0,0 +1,477 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+import { sleep } from '../__helpers__/utils.js';
+
+describe('Snow Theme Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Snow theme initializes correctly in regular DOM', () => {
+    const quill = new Quill(container, {
+      theme: 'snow',
+    });
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Verify theme is applied
+    expect(quill.container.classList.contains('ql-snow')).toBe(true);
+
+    // Verify toolbar exists - check parent element as toolbar is inserted before container
+    const toolbar = container.parentElement?.querySelector('.ql-toolbar');
+    expect(toolbar).toBeTruthy();
+    expect(toolbar?.classList.contains('ql-snow')).toBe(true);
+  });
+
+  test('Snow theme initializes correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify theme is applied
+    expect(quill.container.classList.contains('ql-snow')).toBe(true);
+
+    // Verify toolbar exists within shadow DOM - check shadow root as toolbar is inserted before container
+    const toolbar = shadowRoot.querySelector('.ql-toolbar');
+    expect(toolbar).toBeTruthy();
+    expect(toolbar?.classList.contains('ql-snow')).toBe(true);
+  });
+
+  test('Toolbar renders correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ['bold', 'italic', 'underline', 'link'],
+          [{ list: 'ordered' }, { list: 'bullet' }],
+          ['clean'],
+        ],
+      },
+    });
+
+    // Verify toolbar elements are created within shadow DOM
+    const toolbar = shadowRoot.querySelector('.ql-toolbar');
+    expect(toolbar).toBeTruthy();
+
+    // Verify toolbar buttons
+    const boldButton = shadowRoot.querySelector('.ql-bold');
+    const italicButton = shadowRoot.querySelector('.ql-italic');
+    const linkButton = shadowRoot.querySelector('.ql-link');
+
+    expect(boldButton).toBeTruthy();
+    expect(italicButton).toBeTruthy();
+    expect(linkButton).toBeTruthy();
+
+    // Verify buttons have correct document context
+    expect(boldButton?.ownerDocument).toBe(document);
+    expect(italicButton?.ownerDocument).toBe(document);
+    expect(linkButton?.ownerDocument).toBe(document);
+  });
+
+  test('Toolbar functionality works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['bold', 'italic', 'link'],
+      },
+    });
+
+    // Set some text
+    quill.setText('Hello World');
+    quill.setSelection(0, 5); // Select "Hello"
+
+    // Apply bold formatting via toolbar
+    const boldButton = shadowRoot.querySelector(
+      '.ql-bold',
+    ) as HTMLButtonElement;
+    expect(boldButton).toBeTruthy();
+
+    boldButton.click();
+
+    // Verify formatting was applied
+    const delta = quill.getContents();
+    expect(delta.ops[0].attributes?.bold).toBe(true);
+    expect(delta.ops[0].insert).toBe('Hello');
+  });
+
+  test('Dropdown selectors work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, 3, false] }],
+          [{ size: ['small', false, 'large', 'huge'] }],
+        ],
+      },
+    });
+
+    // Find actual select elements
+    const headerSelect = shadowRoot.querySelector(
+      'select.ql-header',
+    ) as HTMLSelectElement;
+    const sizeSelect = shadowRoot.querySelector(
+      'select.ql-size',
+    ) as HTMLSelectElement;
+
+    // Verify header dropdown exists and is a select element
+    expect(headerSelect).toBeTruthy();
+    expect(headerSelect?.tagName).toBe('SELECT');
+    if (headerSelect) {
+      expect(headerSelect.options.length).toBeGreaterThan(0);
+    }
+
+    // Verify size dropdown exists and is a select element
+    expect(sizeSelect).toBeTruthy();
+    expect(sizeSelect?.tagName).toBe('SELECT');
+    if (sizeSelect) {
+      expect(sizeSelect.options.length).toBeGreaterThan(0);
+    }
+
+    // Verify options have correct document context
+    if (headerSelect) {
+      Array.from(headerSelect.options).forEach((option) => {
+        expect(option.ownerDocument).toBe(document);
+      });
+    }
+
+    if (sizeSelect) {
+      Array.from(sizeSelect.options).forEach((option) => {
+        expect(option.ownerDocument).toBe(document);
+      });
+    }
+  });
+
+  test('Color picker works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [[{ color: [] }, { background: [] }]],
+      },
+    });
+
+    // Verify color picker elements
+    const colorSelect = shadowRoot.querySelector('.ql-color');
+    const backgroundSelect = shadowRoot.querySelector('.ql-background');
+
+    expect(colorSelect).toBeTruthy();
+    expect(backgroundSelect).toBeTruthy();
+
+    // Verify color options are created with correct document context
+    if (colorSelect) {
+      const colorOptions = colorSelect.querySelectorAll('option');
+      colorOptions.forEach((option) => {
+        expect(option.ownerDocument).toBe(document);
+      });
+    }
+
+    if (backgroundSelect) {
+      const backgroundOptions = backgroundSelect.querySelectorAll('option');
+      backgroundOptions.forEach((option) => {
+        expect(option.ownerDocument).toBe(document);
+      });
+    }
+  });
+
+  test('Image upload handler works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['image'],
+      },
+    });
+
+    // Get the toolbar module to access handlers
+    const toolbar = quill.getModule('toolbar');
+    expect(toolbar).toBeTruthy();
+
+    // Verify image button exists
+    const imageButton = shadowRoot.querySelector('.ql-image');
+    expect(imageButton).toBeTruthy();
+
+    // Simulate clicking the image button
+    imageButton?.dispatchEvent(new Event('click'));
+
+    // Verify file input is created within shadow DOM context
+    const fileInput = shadowRoot.querySelector('input.ql-image[type=file]');
+    expect(fileInput).toBeTruthy();
+    expect(fileInput?.ownerDocument).toBe(document);
+  });
+
+  test('Multiple Snow theme instances work independently', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['bold', 'italic'],
+      },
+    });
+
+    const shadowQuill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['underline', 'strike'],
+      },
+    });
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+
+    // Verify independent toolbars
+    const regularToolbar =
+      container.parentElement?.querySelector('.ql-toolbar');
+    const shadowToolbar = shadowRoot.querySelector('.ql-toolbar');
+
+    expect(regularToolbar).toBeTruthy();
+    expect(shadowToolbar).toBeTruthy();
+
+    // Verify different button sets
+    expect(container.parentElement?.querySelector('.ql-bold')).toBeTruthy();
+    expect(container.parentElement?.querySelector('.ql-italic')).toBeTruthy();
+    expect(container.parentElement?.querySelector('.ql-underline')).toBeFalsy();
+    expect(container.parentElement?.querySelector('.ql-strike')).toBeFalsy();
+
+    expect(shadowRoot.querySelector('.ql-bold')).toBeFalsy();
+    expect(shadowRoot.querySelector('.ql-italic')).toBeFalsy();
+    expect(shadowRoot.querySelector('.ql-underline')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-strike')).toBeTruthy();
+  });
+
+  test('Theme styles are properly scoped in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Verify theme classes are applied
+    expect(quill.container.classList.contains('ql-snow')).toBe(true);
+
+    const toolbar = shadowRoot.querySelector('.ql-toolbar');
+    expect(toolbar?.classList.contains('ql-snow')).toBe(true);
+
+    // Verify editor classes
+    const editor = shadowRoot.querySelector('.ql-editor');
+    expect(editor).toBeTruthy();
+  });
+
+  test('Keyboard shortcuts work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['link', 'bold'],
+      },
+    });
+
+    // Set some text and select it
+    quill.setText('Test text');
+    quill.setSelection(0, 4);
+
+    // Verify keyboard module is working in shadow DOM
+    const keyboard = quill.getModule('keyboard') as any;
+    expect(keyboard).toBeTruthy();
+
+    // Verify basic keyboard functionality
+    expect(keyboard.bindings).toBeDefined();
+    expect(typeof keyboard.addBinding).toBe('function');
+
+    // Check if link button exists in shadow DOM
+    const linkButton = shadowRoot.querySelector('.ql-link');
+    expect(linkButton).toBeTruthy();
+
+    // Verify that keyboard module can handle events in shadow DOM context
+    // (Don't test specific bindings as they may have timing/registration issues)
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(keyboard.quill.domRoot.isInShadowDOM()).toBe(true);
+  });
+
+  test('Event handling is properly scoped in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['bold'],
+      },
+    });
+
+    // Test that clicks outside the editor don't interfere
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+
+    try {
+      // Click outside
+      outsideElement.click();
+
+      // Verify quill still functions
+      quill.setText('Test');
+      expect(quill.getText()).toBe('Test\n');
+
+      // Verify toolbar still works
+      const boldButton = shadowRoot.querySelector(
+        '.ql-bold',
+      ) as HTMLButtonElement;
+      expect(boldButton).toBeTruthy();
+
+      quill.setSelection(0, 4);
+      boldButton.click();
+
+      const delta = quill.getContents();
+      expect(delta.ops[0].attributes?.bold).toBe(true);
+    } finally {
+      document.body.removeChild(outsideElement);
+    }
+  });
+
+  test('Tooltip positioning works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Insert text and link
+    quill.setText('Click this link');
+    quill.setSelection(6, 4); // Select "this"
+    quill.format('link', 'https://example.com');
+
+    // Click in the link to show tooltip
+    quill.setSelection(7, 0);
+    await sleep(10);
+
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    if (tooltip) {
+      // Verify tooltip exists in shadow DOM
+      expect(tooltip.ownerDocument).toBe(document);
+
+      // Check if tooltip has positioning styles (set by position() method)
+      const hasLeftStyle = (tooltip as HTMLElement).style.left !== '';
+      const hasTopStyle = (tooltip as HTMLElement).style.top !== '';
+
+      // If tooltip has been positioned, it should have left/top styles
+      if (hasLeftStyle && hasTopStyle) {
+        // Verify tooltip is within reasonable bounds
+        const shadowBounds = shadowContainer.getBoundingClientRect();
+        const tooltipBounds = tooltip.getBoundingClientRect();
+
+        expect(tooltipBounds.top).toBeGreaterThanOrEqual(
+          shadowBounds.top - 100,
+        );
+        expect(tooltipBounds.left).toBeGreaterThanOrEqual(
+          shadowBounds.left - 200,
+        ); // Allow generous overflow for positioning
+      } else {
+        // Tooltip exists but may not be positioned yet - this is also valid
+        expect(tooltip).toBeTruthy();
+      }
+    }
+  });
+
+  test('Custom toolbar configuration works in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const customToolbar = [
+      [{ font: [] }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      ['bold', 'italic', 'underline', 'strike'],
+      [{ color: [] }, { background: [] }],
+      [{ script: 'sub' }, { script: 'super' }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ indent: '-1' }, { indent: '+1' }],
+      [{ align: [] }],
+      ['link', 'image', 'video'],
+      ['clean'],
+    ];
+
+    new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: customToolbar,
+      },
+    });
+
+    // Verify all toolbar elements exist
+    const toolbar = shadowRoot.querySelector('.ql-toolbar');
+    expect(toolbar).toBeTruthy();
+
+    // Check various toolbar elements
+    expect(shadowRoot.querySelector('.ql-font')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-header')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-bold')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-color')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-background')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-list[value="ordered"]')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-align')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-link')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-image')).toBeTruthy();
+    expect(shadowRoot.querySelector('.ql-clean')).toBeTruthy();
+
+    // Verify all elements have correct document context
+    const toolbarElements = shadowRoot.querySelectorAll('.ql-toolbar *');
+    toolbarElements.forEach((element) => {
+      expect(element.ownerDocument).toBe(document);
+    });
+  });
+});
diff --git a/packages/quill/test/unit/ui/picker-shadow-dom.spec.ts b/packages/quill/test/unit/ui/picker-shadow-dom.spec.ts
new file mode 100644
index 0000000000..312fc67d23
--- /dev/null
+++ b/packages/quill/test/unit/ui/picker-shadow-dom.spec.ts
@@ -0,0 +1,550 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+
+describe('UI Components Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Picker components initialize correctly in regular DOM', () => {
+    const quill = new Quill(container, {
+      theme: 'snow',
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, 3, false] }],
+          [{ size: ['small', false, 'large', 'huge'] }],
+          [{ color: [] }, { background: [] }],
+        ],
+      },
+    });
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // In regular DOM, toolbar is inserted into parent (document.body)
+    const headerPicker = document.body.querySelector('.ql-header.ql-picker');
+    const sizePicker = document.body.querySelector('.ql-size.ql-picker');
+    const colorPicker = document.body.querySelector('.ql-color.ql-picker');
+    const backgroundPicker = document.body.querySelector(
+      '.ql-background.ql-picker',
+    );
+
+    expect(headerPicker).toBeTruthy();
+    expect(sizePicker).toBeTruthy();
+    expect(colorPicker).toBeTruthy();
+    expect(backgroundPicker).toBeTruthy();
+
+    // Verify picker structure
+    expect(headerPicker?.querySelector('.ql-picker-label')).toBeTruthy();
+    expect(headerPicker?.querySelector('.ql-picker-options')).toBeTruthy();
+  });
+
+  test('Picker components initialize correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, 3, false] }],
+          [{ size: ['small', false, 'large', 'huge'] }],
+          [{ color: [] }, { background: [] }],
+        ],
+      },
+    });
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify picker elements exist within shadow DOM
+    const headerPicker = shadowRoot.querySelector('.ql-header');
+    const sizePicker = shadowRoot.querySelector('.ql-size');
+    const colorPicker = shadowRoot.querySelector('.ql-color');
+    const backgroundPicker = shadowRoot.querySelector('.ql-background');
+
+    expect(headerPicker).toBeTruthy();
+    expect(sizePicker).toBeTruthy();
+    expect(colorPicker).toBeTruthy();
+    expect(backgroundPicker).toBeTruthy();
+
+    // Verify picker structure
+    expect(headerPicker?.querySelector('.ql-picker-label')).toBeTruthy();
+    expect(headerPicker?.querySelector('.ql-picker-options')).toBeTruthy();
+
+    // Verify elements have correct document context
+    expect(headerPicker?.ownerDocument).toBe(document);
+    expect(sizePicker?.ownerDocument).toBe(document);
+    expect(colorPicker?.ownerDocument).toBe(document);
+    expect(backgroundPicker?.ownerDocument).toBe(document);
+  });
+
+  test('Header picker functionality works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ header: [1, 2, 3, false] }],
+      },
+    });
+
+    // Insert some text
+    quill.setText('Header test text');
+    quill.setSelection(0, 6); // Select "Header"
+
+    // Find header picker (use specific selector for picker span, not select)
+    const headerPicker = shadowRoot.querySelector(
+      '.ql-header.ql-picker',
+    ) as HTMLElement;
+    expect(headerPicker).toBeTruthy();
+
+    // Verify picker can be expanded
+    const pickerLabel = headerPicker.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+    expect(pickerLabel).toBeTruthy();
+
+    // Click to expand picker (using mousedown event)
+    const mousedownEvent = new MouseEvent('mousedown', { bubbles: true });
+    pickerLabel.dispatchEvent(mousedownEvent);
+    expect(headerPicker.classList.contains('ql-expanded')).toBe(true);
+
+    // Find header options
+    const headerOptions = headerPicker.querySelectorAll('.ql-picker-item');
+    expect(headerOptions.length).toBeGreaterThan(0);
+
+    // Click on H1 option (should be first option)
+    const h1Option = headerOptions[0] as HTMLElement;
+    h1Option.click();
+
+    // Verify formatting was applied (header is a block format applied to the newline)
+    const delta = quill.getContents();
+    expect(delta.ops[1].attributes?.header).toBe(1);
+    expect(delta.ops[0].insert).toBe('Header test text');
+  });
+
+  test('Size picker functionality works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ size: ['small', false, 'large', 'huge'] }],
+      },
+    });
+
+    // Insert some text
+    quill.setText('Size test text');
+    quill.setSelection(0, 4); // Select "Size"
+
+    // Find size picker
+    const sizePicker = shadowRoot.querySelector(
+      '.ql-size.ql-picker',
+    ) as HTMLElement;
+    expect(sizePicker).toBeTruthy();
+
+    // Expand picker
+    const pickerLabel = sizePicker.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+    const mousedownEvent = new MouseEvent('mousedown', { bubbles: true });
+    pickerLabel.dispatchEvent(mousedownEvent);
+    expect(sizePicker.classList.contains('ql-expanded')).toBe(true);
+
+    // Find size options
+    const sizeOptions = sizePicker.querySelectorAll('.ql-picker-item');
+    expect(sizeOptions.length).toBeGreaterThan(0);
+
+    // Click on large option
+    const largeOption = Array.from(sizeOptions).find(
+      (option) => option.getAttribute('data-value') === 'large',
+    ) as HTMLElement;
+    expect(largeOption).toBeTruthy();
+    largeOption.click();
+
+    // Verify formatting was applied
+    const delta = quill.getContents();
+    expect(delta.ops[0].attributes?.size).toBe('large');
+    expect(delta.ops[0].insert).toBe('Size');
+  });
+
+  test('Color picker functionality works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ color: [] }],
+      },
+    });
+
+    // Insert some text
+    quill.setText('Color test text');
+    quill.setSelection(0, 5); // Select "Color"
+
+    // Find color picker
+    const colorPicker = shadowRoot.querySelector(
+      '.ql-color.ql-picker',
+    ) as HTMLElement;
+    expect(colorPicker).toBeTruthy();
+    expect(colorPicker.classList.contains('ql-color-picker')).toBe(true);
+
+    // Expand picker
+    const pickerLabel = colorPicker.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+    const mousedownEvent = new MouseEvent('mousedown', { bubbles: true });
+    pickerLabel.dispatchEvent(mousedownEvent);
+    expect(colorPicker.classList.contains('ql-expanded')).toBe(true);
+
+    // Find color options
+    const colorOptions = colorPicker.querySelectorAll('.ql-picker-item');
+    expect(colorOptions.length).toBeGreaterThan(0);
+
+    // Verify primary colors exist
+    const primaryColors = colorPicker.querySelectorAll(
+      '.ql-picker-item.ql-primary',
+    );
+    expect(primaryColors.length).toBe(7); // Should have 7 primary colors
+
+    // Click on a color option
+    const redOption = Array.from(colorOptions).find(
+      (option) =>
+        (option as HTMLElement).style.backgroundColor === 'rgb(230, 0, 0)',
+    ) as HTMLElement;
+
+    if (redOption) {
+      redOption.click();
+
+      // Verify formatting was applied
+      const delta = quill.getContents();
+      expect(delta.ops[0].attributes?.color).toBeTruthy();
+      expect(delta.ops[0].insert).toBe('Color');
+    }
+  });
+
+  test('Background color picker functionality works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ background: [] }],
+      },
+    });
+
+    // Insert some text
+    quill.setText('Background test');
+    quill.setSelection(0, 10); // Select "Background"
+
+    // Find background picker
+    const backgroundPicker = shadowRoot.querySelector(
+      '.ql-background.ql-picker',
+    ) as HTMLElement;
+    expect(backgroundPicker).toBeTruthy();
+    expect(backgroundPicker.classList.contains('ql-color-picker')).toBe(true);
+
+    // Expand picker
+    const pickerLabel = backgroundPicker.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+    const mousedownEvent = new MouseEvent('mousedown', { bubbles: true });
+    pickerLabel.dispatchEvent(mousedownEvent);
+    expect(backgroundPicker.classList.contains('ql-expanded')).toBe(true);
+
+    // Find background options
+    const backgroundOptions =
+      backgroundPicker.querySelectorAll('.ql-picker-item');
+    expect(backgroundOptions.length).toBeGreaterThan(0);
+
+    // Click on a background option
+    const yellowOption = Array.from(backgroundOptions).find(
+      (option) =>
+        (option as HTMLElement).style.backgroundColor === 'rgb(255, 255, 0)',
+    ) as HTMLElement;
+
+    if (yellowOption) {
+      yellowOption.click();
+
+      // Verify formatting was applied
+      const delta = quill.getContents();
+      expect(delta.ops[0].attributes?.background).toBeTruthy();
+      expect(delta.ops[0].insert).toBe('Background');
+    }
+  });
+
+  test('Picker keyboard navigation works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ header: [1, 2, 3, false] }],
+      },
+    });
+
+    // Ensure quill context is available
+    expect(quill).toBeTruthy();
+
+    // Find header picker
+    const headerPicker = shadowRoot.querySelector(
+      '.ql-header.ql-picker',
+    ) as HTMLElement;
+    const pickerLabel = headerPicker.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+
+    // Focus the picker label
+    pickerLabel.focus();
+    // In shadow DOM, document.activeElement will be the shadow host
+    // Use shadowRoot.activeElement to get the actual focused element
+    const actualActiveElement =
+      shadowRoot.activeElement || document.activeElement;
+    expect(actualActiveElement).toBe(pickerLabel);
+
+    // Simulate Enter key to expand picker
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+    pickerLabel.dispatchEvent(enterEvent);
+    expect(headerPicker.classList.contains('ql-expanded')).toBe(true);
+
+    // Simulate Escape key to close picker
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+    pickerLabel.dispatchEvent(escapeEvent);
+    expect(headerPicker.classList.contains('ql-expanded')).toBe(false);
+  });
+
+  test('Picker ARIA attributes work correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ header: [1, 2, 3, false] }],
+      },
+    });
+
+    // Ensure quill context is available
+    expect(quill).toBeTruthy();
+
+    // Find header picker
+    const headerPicker = shadowRoot.querySelector(
+      '.ql-header.ql-picker',
+    ) as HTMLElement;
+    const pickerLabel = headerPicker.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+    const pickerOptions = headerPicker.querySelector(
+      '.ql-picker-options',
+    ) as HTMLElement;
+
+    // Verify initial ARIA attributes
+    expect(pickerLabel.getAttribute('aria-expanded')).toBe('false');
+    expect(pickerLabel.getAttribute('role')).toBe('button');
+    expect(pickerOptions.getAttribute('aria-hidden')).toBe('true');
+    expect(pickerLabel.getAttribute('aria-controls')).toBe(pickerOptions.id);
+
+    // Expand picker
+    const mousedownEvent = new MouseEvent('mousedown', { bubbles: true });
+    pickerLabel.dispatchEvent(mousedownEvent);
+
+    // Verify ARIA attributes after expansion
+    expect(pickerLabel.getAttribute('aria-expanded')).toBe('true');
+    expect(pickerOptions.getAttribute('aria-hidden')).toBe('false');
+
+    // Verify picker items have correct ARIA
+    const pickerItems = pickerOptions.querySelectorAll('.ql-picker-item');
+    pickerItems.forEach((item) => {
+      expect(item.getAttribute('role')).toBe('button');
+      expect(item.getAttribute('tabindex')).toBe('0');
+    });
+  });
+
+  test('Multiple Quill instances with pickers work independently', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ header: [1, 2, false] }],
+      },
+    });
+
+    const shadowQuill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ size: ['small', 'large'] }],
+      },
+    });
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+
+    // Verify independent picker sets
+    const regularHeaderPicker = document.body.querySelector(
+      '.ql-header.ql-picker',
+    );
+    const regularSizePicker = document.body.querySelector('.ql-size.ql-picker');
+    const shadowHeaderPicker = shadowRoot.querySelector('.ql-header.ql-picker');
+    const shadowSizePicker = shadowRoot.querySelector('.ql-size.ql-picker');
+
+    // Regular instance should have header picker but not size picker
+    expect(regularHeaderPicker).toBeTruthy();
+    expect(regularSizePicker).toBeFalsy();
+
+    // Shadow instance should have size picker but not header picker
+    expect(shadowHeaderPicker).toBeFalsy();
+    expect(shadowSizePicker).toBeTruthy();
+
+    // Set text in both instances
+    regularQuill.setText('Regular instance');
+    shadowQuill.setText('Shadow instance');
+
+    // Select text and apply formatting independently
+    regularQuill.setSelection(0, 7); // Select "Regular"
+    shadowQuill.setSelection(0, 6); // Select "Shadow"
+
+    // Expand both pickers
+    const regularLabel = regularHeaderPicker?.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+    const shadowLabel = shadowSizePicker?.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+
+    const regularMousedown = new MouseEvent('mousedown', { bubbles: true });
+    const shadowMousedown = new MouseEvent('mousedown', { bubbles: true });
+    regularLabel.dispatchEvent(regularMousedown);
+    shadowLabel.dispatchEvent(shadowMousedown);
+
+    // Verify both are expanded independently
+    expect(regularHeaderPicker?.classList.contains('ql-expanded')).toBe(true);
+    expect(shadowSizePicker?.classList.contains('ql-expanded')).toBe(true);
+  });
+
+  test('Picker element creation uses correct document context', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [{ header: [1, 2, 3, false] }],
+      },
+    });
+
+    // Ensure quill context is available
+    expect(quill).toBeTruthy();
+
+    // Find header picker and its elements
+    const headerPicker = shadowRoot.querySelector(
+      '.ql-header.ql-picker',
+    ) as HTMLElement;
+    const pickerLabel = headerPicker.querySelector(
+      '.ql-picker-label',
+    ) as HTMLElement;
+    const pickerOptions = headerPicker.querySelector(
+      '.ql-picker-options',
+    ) as HTMLElement;
+    const pickerItems = headerPicker.querySelectorAll('.ql-picker-item');
+
+    // Verify all elements have correct document context
+    expect(headerPicker.ownerDocument).toBe(document);
+    expect(pickerLabel.ownerDocument).toBe(document);
+    expect(pickerOptions.ownerDocument).toBe(document);
+
+    pickerItems.forEach((item) => {
+      expect(item.ownerDocument).toBe(document);
+    });
+
+    // Verify elements exist within shadow root
+    expect(shadowRoot.contains(headerPicker)).toBe(true);
+    expect(shadowRoot.contains(pickerLabel)).toBe(true);
+    expect(shadowRoot.contains(pickerOptions)).toBe(true);
+
+    pickerItems.forEach((item) => {
+      expect(shadowRoot.contains(item)).toBe(true);
+    });
+  });
+
+  test('Picker styling and CSS classes work in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: [[{ header: [1, 2, 3, false] }], [{ color: [] }]],
+      },
+    });
+
+    // Ensure quill context is available
+    expect(quill).toBeTruthy();
+
+    // Verify picker elements have correct CSS classes
+    const headerPicker = shadowRoot.querySelector(
+      '.ql-header.ql-picker',
+    ) as HTMLElement;
+    const colorPicker = shadowRoot.querySelector(
+      '.ql-color.ql-picker',
+    ) as HTMLElement;
+
+    expect(headerPicker.classList.contains('ql-picker')).toBe(true);
+    expect(colorPicker.classList.contains('ql-picker')).toBe(true);
+    expect(colorPicker.classList.contains('ql-color-picker')).toBe(true);
+
+    // Verify picker structure classes
+    const headerLabel = headerPicker.querySelector('.ql-picker-label');
+    const headerOptions = headerPicker.querySelector('.ql-picker-options');
+    const headerItems = headerPicker.querySelectorAll('.ql-picker-item');
+
+    expect(headerLabel).toBeTruthy();
+    expect(headerOptions).toBeTruthy();
+    expect(headerItems.length).toBeGreaterThan(0);
+
+    // Verify color picker specific classes
+    const colorLabel = colorPicker.querySelector('.ql-picker-label');
+    const colorOptions = colorPicker.querySelector('.ql-picker-options');
+    const primaryColors = colorPicker.querySelectorAll(
+      '.ql-picker-item.ql-primary',
+    );
+
+    expect(colorLabel).toBeTruthy();
+    expect(colorOptions).toBeTruthy();
+    expect(primaryColors.length).toBe(7); // Should have 7 primary colors
+  });
+});
diff --git a/packages/quill/test/unit/ui/tooltip-shadow-dom.spec.ts b/packages/quill/test/unit/ui/tooltip-shadow-dom.spec.ts
new file mode 100644
index 0000000000..302c86096a
--- /dev/null
+++ b/packages/quill/test/unit/ui/tooltip-shadow-dom.spec.ts
@@ -0,0 +1,400 @@
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import '../../../src/quill.js';
+import Quill from '../../../src/core/quill.js';
+import { sleep } from '../__helpers__/utils.js';
+
+describe('Tooltip Shadow DOM Integration', () => {
+  let container: HTMLElement;
+  let shadowHost: HTMLElement;
+  let shadowRoot: ShadowRoot;
+
+  beforeEach(() => {
+    // Create regular DOM container
+    container = document.createElement('div');
+    container.id = 'regular-container';
+    document.body.appendChild(container);
+
+    // Create shadow DOM setup
+    shadowHost = document.createElement('div');
+    shadowHost.id = 'shadow-host';
+    document.body.appendChild(shadowHost);
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+
+    const shadowContainer = document.createElement('div');
+    shadowContainer.id = 'shadow-container';
+    shadowRoot.appendChild(shadowContainer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(shadowHost);
+  });
+
+  test('Tooltip initializes correctly in regular DOM', () => {
+    const quill = new Quill(container, {
+      theme: 'snow',
+    });
+
+    // Verify we're in regular DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(false);
+    expect(quill.domRoot.getRoot()).toBe(document);
+
+    // Verify tooltip exists
+    const tooltip = container.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+    expect(tooltip?.classList.contains('ql-hidden')).toBe(true);
+  });
+
+  test('Tooltip initializes correctly in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Verify we're in shadow DOM context
+    expect(quill.domRoot.isInShadowDOM()).toBe(true);
+    expect(quill.domRoot.getRoot()).toBe(shadowRoot);
+
+    // Verify tooltip exists within shadow DOM
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+    expect(tooltip?.classList.contains('ql-hidden')).toBe(true);
+  });
+
+  test('Tooltip positioning works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Insert a link to trigger tooltip
+    quill.setText('Click this link to edit');
+    quill.formatText(11, 4, 'link', 'https://example.com');
+
+    // Get the link and simulate selection
+    const link = shadowRoot.querySelector('.ql-editor a') as HTMLAnchorElement;
+    expect(link).toBeTruthy();
+
+    // Select the link text
+    quill.setSelection(11, 4);
+
+    // Trigger link editing
+    const linkButton = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    if (linkButton) {
+      linkButton.click();
+      await sleep(10);
+    }
+
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+
+    // Check if tooltip has positioning styles
+    const tooltipEl = tooltip as HTMLElement;
+    if (tooltipEl.classList.contains('ql-editing')) {
+      // Tooltip should be positioned
+      expect(tooltipEl.style.left).toBeTruthy();
+      expect(tooltipEl.style.top).toBeTruthy();
+    }
+  });
+
+  test('Tooltip bounds container is correct in shadow DOM', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Access the tooltip instance through the theme
+    const theme = quill.theme as any;
+    if (theme.tooltip) {
+      // In shadow DOM, bounds container should be the shadow host
+      expect(theme.tooltip.boundsContainer).toBe(shadowHost);
+    }
+  });
+
+  test('Tooltip link editing works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Insert some text
+    quill.setText('Edit this text');
+    quill.setSelection(5, 4); // Select "this"
+
+    // Click link button to show tooltip
+    const linkButton = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    expect(linkButton).toBeTruthy();
+    linkButton.click();
+    await sleep(10);
+
+    // Verify tooltip is in editing mode
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip).toBeTruthy();
+    expect(tooltip?.classList.contains('ql-editing')).toBe(true);
+
+    // Verify text input exists
+    const textInput = tooltip?.querySelector(
+      'input[type="text"]',
+    ) as HTMLInputElement;
+    expect(textInput).toBeTruthy();
+    expect(textInput?.getAttribute('data-link')).toBe('https://quilljs.com');
+  });
+
+  test('Tooltip save functionality works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Insert some text
+    quill.setText('Make this a link');
+    quill.setSelection(5, 4); // Select "this"
+
+    // Open link editor
+    const linkButton = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    linkButton.click();
+    await sleep(10);
+
+    // Get the input and set a value
+    const textInput = shadowRoot.querySelector(
+      '.ql-tooltip input[type="text"]',
+    ) as HTMLInputElement;
+    expect(textInput).toBeTruthy();
+
+    textInput.value = 'https://example.com';
+
+    // Simulate Enter key to save
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+    textInput.dispatchEvent(enterEvent);
+    await sleep(10);
+
+    // Verify link was applied
+    const delta = quill.getContents();
+    const linkOp = delta.ops.find((op) => op.attributes?.link);
+    expect(linkOp).toBeTruthy();
+    expect(linkOp?.attributes?.link).toBe('https://example.com');
+  });
+
+  test('Tooltip cancel functionality works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Insert some text
+    quill.setText('Cancel link edit');
+    quill.setSelection(7, 4); // Select "link"
+
+    // Open link editor
+    const linkButton = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    linkButton.click();
+    await sleep(10);
+
+    // Verify tooltip is visible
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    expect(tooltip?.classList.contains('ql-editing')).toBe(true);
+
+    // Get the input and trigger Escape
+    const textInput = shadowRoot.querySelector(
+      '.ql-tooltip input[type="text"]',
+    ) as HTMLInputElement;
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+    textInput.dispatchEvent(escapeEvent);
+    await sleep(10);
+
+    // Verify tooltip is hidden
+    expect(tooltip?.classList.contains('ql-hidden')).toBe(true);
+  });
+
+  test('Tooltip preview functionality works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Insert a link
+    quill.setText('Visit Quill website');
+    quill.formatText(6, 5, 'link', 'https://quilljs.com');
+
+    // Find the link
+    const link = shadowRoot.querySelector('.ql-editor a') as HTMLAnchorElement;
+    expect(link).toBeTruthy();
+    expect(link.href).toBe('https://quilljs.com/');
+
+    // Verify link preview element exists
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    const preview = tooltip?.querySelector('.ql-preview');
+    expect(preview).toBeTruthy();
+    expect(preview?.getAttribute('href')).toBe('about:blank');
+  });
+
+  test('Tooltip action buttons work in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Insert a link
+    quill.setText('Edit or remove this link');
+    quill.formatText(15, 4, 'link', 'https://example.com');
+
+    // Select the link
+    quill.setSelection(15, 4);
+
+    // Verify action buttons exist
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    const editAction = tooltip?.querySelector('.ql-action');
+    const removeAction = tooltip?.querySelector('.ql-remove');
+
+    expect(editAction).toBeTruthy();
+    expect(removeAction).toBeTruthy();
+  });
+
+  test('Multiple Quill instances with tooltips work independently', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    const regularQuill = new Quill(container, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    const shadowQuill = new Quill(shadowContainer, {
+      theme: 'snow',
+      modules: {
+        toolbar: ['link'],
+      },
+    });
+
+    // Verify different contexts
+    expect(regularQuill.domRoot.isInShadowDOM()).toBe(false);
+    expect(shadowQuill.domRoot.isInShadowDOM()).toBe(true);
+
+    // Verify independent tooltips
+    const regularTooltip = container.querySelector('.ql-tooltip');
+    const shadowTooltip = shadowRoot.querySelector('.ql-tooltip');
+
+    expect(regularTooltip).toBeTruthy();
+    expect(shadowTooltip).toBeTruthy();
+
+    // Open link editor in regular instance
+    regularQuill.setText('Regular link');
+    regularQuill.setSelection(0, 7);
+    const regularLinkBtn = container.parentElement?.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    regularLinkBtn?.click();
+    await sleep(10);
+
+    // Open link editor in shadow instance
+    shadowQuill.setText('Shadow link');
+    shadowQuill.setSelection(0, 6);
+    const shadowLinkBtn = shadowRoot.querySelector(
+      '.ql-link',
+    ) as HTMLButtonElement;
+    shadowLinkBtn?.click();
+    await sleep(10);
+
+    // Both should be in editing mode independently
+    expect(regularTooltip?.classList.contains('ql-editing')).toBe(true);
+    expect(shadowTooltip?.classList.contains('ql-editing')).toBe(true);
+  });
+
+  test('Tooltip scrolling behavior works in shadow DOM', async () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+
+    // Make container scrollable
+    shadowContainer.style.height = '100px';
+    shadowContainer.style.overflow = 'auto';
+
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Add enough content to make it scrollable
+    const longText = 'Line\n'.repeat(20);
+    quill.setText(longText);
+
+    // Verify tooltip margin adjustment on scroll
+    const tooltip = shadowRoot.querySelector('.ql-tooltip') as HTMLElement;
+    expect(tooltip).toBeTruthy();
+
+    // Simulate scroll
+    shadowContainer.scrollTop = 50;
+    shadowContainer.dispatchEvent(new Event('scroll'));
+    await sleep(10);
+
+    // For scrollable containers, tooltip should adjust margin
+    // Note: The actual implementation only adjusts if quill.root is scrollable
+    const editorEl = shadowRoot.querySelector('.ql-editor') as HTMLElement;
+    if (getComputedStyle(editorEl).overflowY !== 'visible') {
+      expect(tooltip.style.marginTop).toBeTruthy();
+    }
+  });
+
+  test('Tooltip element creation uses correct document context', () => {
+    const shadowContainer = shadowRoot.querySelector(
+      '#shadow-container',
+    ) as HTMLElement;
+    const quill = new Quill(shadowContainer, {
+      theme: 'snow',
+    });
+
+    // Ensure quill context is available
+    expect(quill).toBeTruthy();
+
+    // Verify tooltip elements have correct document context
+    const tooltip = shadowRoot.querySelector('.ql-tooltip');
+    const preview = tooltip?.querySelector('.ql-preview');
+    const textInput = tooltip?.querySelector('input[type="text"]');
+    const actionBtn = tooltip?.querySelector('.ql-action');
+    const removeBtn = tooltip?.querySelector('.ql-remove');
+
+    expect(tooltip?.ownerDocument).toBe(document);
+    expect(preview?.ownerDocument).toBe(document);
+    expect(textInput?.ownerDocument).toBe(document);
+    expect(actionBtn?.ownerDocument).toBe(document);
+    expect(removeBtn?.ownerDocument).toBe(document);
+
+    // All should exist within shadow root
+    expect(shadowRoot.contains(tooltip)).toBe(true);
+  });
+});