[web] Move text editing nodes outside of shadowDOM

lib/web_ui/lib/src/engine/embedder.dart

@@ -124,6 +124,9 @@ class FlutterViewEmbedder {
   HostNode? get glassPaneShadow => _glassPaneShadow;
   HostNode? _glassPaneShadow;
 
+  DomElement? get textEditingHostNode => _textEditingHostNode;
+  DomElement? _textEditingHostNode;
+
   static const String defaultFontStyle = 'normal';
   static const String defaultFontWeight = 'normal';
   static const double defaultFontSize = 14;
@@ -170,6 +173,9 @@ class FlutterViewEmbedder {
     );
     _glassPaneShadow = glassPaneElementHostNode;
 
+    _textEditingHostNode =
+        createTextEditingHostNode(glassPaneElement, defaultCssFont);
+
     // Don't allow the scene to receive pointer events.
     _sceneHostElement = domDocument.createElement('flt-scene-host')
       ..style.pointerEvents = 'none';
@@ -189,7 +195,6 @@ class FlutterViewEmbedder {
         .prepareAccessibilityPlaceholder();
 
     glassPaneElementHostNode.appendAll(<DomNode>[
-      accessibilityPlaceholder,
       _sceneHostElement!,
 
       // The semantic host goes last because hit-test order-wise it must be
@@ -202,9 +207,10 @@ class FlutterViewEmbedder {
       // elements transparent. This way, if a platform view appears among other
       // interactive Flutter widgets, as long as those widgets do not intersect
       // with the platform view, the platform view will be reachable.
-      semanticsHostElement,
     ]);
 
+    _textEditingHostNode?.appendChild(accessibilityPlaceholder);
+    _textEditingHostNode?.appendChild(semanticsHostElement);
     // When debugging semantics, make the scene semi-transparent so that the
     // semantics tree is more prominent.
     if (configuration.debugShowSemanticsNodes) {

lib/web_ui/lib/src/engine/host_node.dart

@@ -110,11 +110,12 @@ class ShadowDomHostNode implements HostNode {
   /// This also calls [applyGlobalCssRulesToSheet], with the [defaultFont]
   /// to be used as the default font definition.
   ShadowDomHostNode(DomElement root, String defaultFont)
-      : assert(
-          root.isConnected ?? true,
-          'The `root` of a ShadowDomHostNode must be connected to the Document object or a ShadowRoot.'
-        ) {
-    _shadow = root.attachShadow(<String, dynamic>{
+      : assert(root.isConnected ?? true,
+            'The `root` of a ShadowDomHostNode must be connected to the Document object or a ShadowRoot.') {
+    final DomElement element =
+        domDocument.createElement('flt-shadow-host-node');
+    root.appendChild(element);
+    _shadow = element.attachShadow(<String, dynamic>{
       'mode': 'open',
       // This needs to stay false to prevent issues like this:
       // - https://github.com/flutter/flutter/issues/85759
@@ -221,6 +222,25 @@ class ElementHostNode implements HostNode {
   void appendAll(Iterable<DomNode> nodes) => nodes.forEach(append);
 }
 
+DomElement createTextEditingHostNode(DomElement root, String defaultFont) {
+  const String hostTagName = 'flt-text-editing-host-node';
+  final DomElement domElement = domDocument.createElement(hostTagName);
+  final DomHTMLStyleElement styleElement = createDomHTMLStyleElement();
+
+  styleElement.id = 'flt-text-editing-stylesheet';
+  root.appendChild(styleElement);
+  applyGlobalCssRulesToSheet(
+    styleElement.sheet! as DomCSSStyleSheet,
+    hasAutofillOverlay: browserHasAutofillOverlay(),
+    cssSelectorPrefix: hostTagName,
+    defaultCssFont: defaultFont,
+  );
+
+  root.appendChild(domElement);
+
+  return domElement;
+}
+
 // Applies the required global CSS to an incoming [DomCSSStyleSheet] `sheet`.
 void applyGlobalCssRulesToSheet(
   DomCSSStyleSheet sheet, {

lib/web_ui/lib/src/engine/text_editing/text_editing.dart

@@ -53,6 +53,9 @@ void _emptyCallback(dynamic _) {}
 @visibleForTesting
 HostNode get defaultTextEditingRoot => flutterViewEmbedder.glassPaneShadow!;
 
+DomElement get nonShadowTextEditingRoot =>
+    flutterViewEmbedder.textEditingHostNode!;
+
 /// These style attributes are constant throughout the life time of an input
 /// element.
 ///
@@ -278,7 +281,7 @@ class EngineAutofillForm {
 
   void placeForm(DomHTMLElement mainTextEditingElement) {
     formElement.append(mainTextEditingElement);
-    defaultTextEditingRoot.append(formElement);
+    nonShadowTextEditingRoot.append(formElement);
   }
 
   void storeForm() {
@@ -1175,7 +1178,7 @@ abstract class DefaultTextEditingStrategy with CompositionAwareMixin implements
       // DOM later, when the first location information arrived.
       // Otherwise, on Blink based Desktop browsers, the autofill menu appears
       // on top left of the screen.
-      defaultTextEditingRoot.append(activeDomElement);
+      nonShadowTextEditingRoot.append(activeDomElement);
       _appendedToForm = false;
     }
 
@@ -1661,7 +1664,7 @@ class AndroidTextEditingStrategy extends GloballyPositionedTextEditingStrategy {
     if (hasAutofillGroup) {
       placeForm();
     } else {
-      defaultTextEditingRoot.append(activeDomElement);
+      nonShadowTextEditingRoot.append(activeDomElement);
     }
     inputConfig.textCapitalization.setAutocapitalizeAttribute(
         activeDomElement);