Revert "[web] Migrate Flutter Web DOM usage to JS static interop - 37. (#33373)"

This reverts commit e744b3a423ef13dfcf0ea937df58731a5bbfed9f.
diff --git a/lib/web_ui/lib/src/engine/dom.dart b/lib/web_ui/lib/src/engine/dom.dart
index 88dcd3e..1870e9c 100644
--- a/lib/web_ui/lib/src/engine/dom.dart
+++ b/lib/web_ui/lib/src/engine/dom.dart
@@ -46,7 +46,6 @@
         elt,
         if (pseudoElt != null) pseudoElt
       ]) as DomCSSStyleDeclaration;
-  external DomScreen? get screen;
 }
 
 @JS()
@@ -1096,14 +1095,6 @@
 
 @JS()
 @staticInterop
-class DomCompositionEvent {}
-
-extension DomCompositionEventExtension on DomCompositionEvent {
-  external String? get data;
-}
-
-@JS()
-@staticInterop
 class DomHTMLInputElement extends DomHTMLElement {}
 
 extension DomHTMLInputElementExtension on DomHTMLInputElement {
@@ -1227,35 +1218,6 @@
 @staticInterop
 class DomCSSStyleSheet extends DomStyleSheet {}
 
-extension DomCSSStyleSheetExtension on DomCSSStyleSheet {
-  List<DomCSSRule> get cssRules =>
-      js_util.getProperty<List<Object?>>(this, 'cssRules').cast<DomCSSRule>();
-  int insertRule(String rule, [int? index]) => js_util
-      .callMethod(this, 'insertRule', <Object>[rule, if (index != null) index]);
-}
-
-@JS()
-@staticInterop
-class DomCSSRule {}
-
-@JS()
-@staticInterop
-class DomScreen {}
-
-extension DomScreenExtension on DomScreen {
-  external DomScreenOrientation? get orientation;
-}
-
-@JS()
-@staticInterop
-class DomScreenOrientation extends DomEventTarget {}
-
-extension DomScreenOrientationExtension on DomScreenOrientation {
-  Future<dynamic> lock(String orientation) => js_util
-      .promiseToFuture(js_util.callMethod(this, 'lock', <String>[orientation]));
-  external void unlock();
-}
-
 // A helper class for managing a subscription. On construction it will add an
 // event listener of the requested type to the target. Calling [cancel] will
 // remove the listener. Caller is still responsible for calling [allowInterop]
diff --git a/lib/web_ui/lib/src/engine/embedder.dart b/lib/web_ui/lib/src/engine/embedder.dart
index 0aa7f84..c93c6e1 100644
--- a/lib/web_ui/lib/src/engine/embedder.dart
+++ b/lib/web_ui/lib/src/engine/embedder.dart
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:html' as html;
 
 import 'package:ui/ui.dart' as ui;
 
@@ -51,18 +52,22 @@
   // The tag name for the root view of the flutter app (glass-pane)
   static const String _glassPaneTagName = 'flt-glass-pane';
 
-  /// Listens to window resize events
-  DomSubscription? _resizeSubscription;
+  /// Fires when browser language preferences change.
+  static const html.EventStreamProvider<html.Event> languageChangeEvent =
+      html.EventStreamProvider<html.Event>('languagechange');
+
+  /// Listens to window resize events.
+  StreamSubscription<html.Event>? _resizeSubscription;
 
   /// Listens to window locale events.
-  DomSubscription? _localeSubscription;
+  StreamSubscription<html.Event>? _localeSubscription;
 
   /// Contains Flutter-specific CSS rules, such as default margins and
   /// paddings.
-  DomHTMLStyleElement? _styleElement;
+  html.StyleElement? _styleElement;
 
   /// Configures the screen, such as scaling.
-  DomHTMLMetaElement? _viewportMeta;
+  html.MetaElement? _viewportMeta;
 
   /// The element that contains the [sceneElement].
   ///
@@ -71,12 +76,12 @@
   ///
   /// This element is inserted after the [semanticsHostElement] so that
   /// platform views take precedence in DOM event handling.
-  DomElement? get sceneHostElement => _sceneHostElement;
-  DomElement? _sceneHostElement;
+  html.Element? get sceneHostElement => _sceneHostElement;
+  html.Element? _sceneHostElement;
 
   /// A child element of body outside the shadowroot that hosts
   /// global resources such svg filters and clip paths when using webkit.
-  DomElement? _resourcesHost;
+  html.Element? _resourcesHost;
 
   /// The element that contains the semantics tree.
   ///
@@ -91,18 +96,18 @@
   ///
   /// This element is inserted before the [semanticsHostElement] so that
   /// platform views take precedence in DOM event handling.
-  DomElement? get semanticsHostElement => _semanticsHostElement;
-  DomElement? _semanticsHostElement;
+  html.Element? get semanticsHostElement => _semanticsHostElement;
+  html.Element? _semanticsHostElement;
 
   /// The last scene element rendered by the [render] method.
-  DomElement? get sceneElement => _sceneElement;
-  DomElement? _sceneElement;
+  html.Element? get sceneElement => _sceneElement;
+  html.Element? _sceneElement;
 
   /// This is state persistent across hot restarts that indicates what
   /// to clear.  Delay removal of old visible state to make the
   /// transition appear smooth.
   static const String _staleHotRestartStore = '__flutter_state';
-  List<DomElement?>? _staleHotRestartState;
+  List<html.Element?>? _staleHotRestartState;
 
   /// Creates a container for DOM elements that need to be cleaned up between
   /// hot restarts.
@@ -110,11 +115,11 @@
   /// If a contains already exists, reuses the existing one.
   void _setupHotRestart() {
     // This persists across hot restarts to clear stale DOM.
-    _staleHotRestartState = getJsProperty<List<DomElement?>?>(domWindow, _staleHotRestartStore);
+    _staleHotRestartState = getJsProperty<List<html.Element?>?>(html.window, _staleHotRestartStore);
     if (_staleHotRestartState == null) {
-      _staleHotRestartState = <DomElement?>[];
+      _staleHotRestartState = <html.Element?>[];
       setJsProperty(
-          domWindow, _staleHotRestartStore, _staleHotRestartState);
+          html.window, _staleHotRestartStore, _staleHotRestartState);
     }
   }
 
@@ -125,7 +130,7 @@
     registerHotRestartListener(() {
       _resizeSubscription?.cancel();
       _localeSubscription?.cancel();
-      _staleHotRestartState!.addAll(<DomElement?>[
+      _staleHotRestartState!.addAll(<html.Element?>[
         _glassPaneElement,
         _styleElement,
         _viewportMeta,
@@ -135,7 +140,7 @@
 
   void _clearOnHotRestart() {
     if (_staleHotRestartState!.isNotEmpty) {
-      for (final DomElement? element in _staleHotRestartState!) {
+      for (final html.Element? element in _staleHotRestartState!) {
         element?.remove();
       }
       _staleHotRestartState!.clear();
@@ -146,7 +151,7 @@
   /// already in the right place, skip DOM mutation. This is both faster and
   /// more correct, because moving DOM nodes loses internal state, such as
   /// text selection.
-  void addSceneToSceneHost(DomElement? sceneElement) {
+  void addSceneToSceneHost(html.Element? sceneElement) {
     if (sceneElement != _sceneElement) {
       _sceneElement?.remove();
       _sceneElement = sceneElement;
@@ -164,14 +169,14 @@
   /// which captures semantics input events. The semantics DOM tree must be a
   /// child of the glass pane element so that events bubble up to the glass pane
   /// if they are not handled by semantics.
-  DomElement? get glassPaneElement => _glassPaneElement;
-  DomElement? _glassPaneElement;
+  html.Element? get glassPaneElement => _glassPaneElement;
+  html.Element? _glassPaneElement;
 
   /// The [HostNode] of the [glassPaneElement], which contains the whole Flutter app.
   HostNode? get glassPaneShadow => _glassPaneShadow;
   HostNode? _glassPaneShadow;
 
-  final DomElement rootElement = domDocument.body!;
+  final html.Element rootElement = html.document.body!;
 
   static const String defaultFontStyle = 'normal';
   static const String defaultFontWeight = 'normal';
@@ -184,11 +189,11 @@
     final bool isWebKit = browserEngine == BrowserEngine.webkit;
 
     _styleElement?.remove();
-    _styleElement = createDomHTMLStyleElement();
+    _styleElement = html.StyleElement();
     _resourcesHost?.remove();
     _resourcesHost = null;
-    domDocument.head!.append(_styleElement!);
-    final DomCSSStyleSheet sheet = _styleElement!.sheet! as DomCSSStyleSheet;
+    html.document.head!.append(_styleElement!);
+    final html.CssStyleSheet sheet = _styleElement!.sheet! as html.CssStyleSheet;
     applyGlobalCssRulesToSheet(
       sheet,
       browserEngine: browserEngine,
@@ -233,8 +238,8 @@
     // engine are complete.
     bodyElement.spellcheck = false;
 
-    for (final DomElement viewportMeta
-        in domDocument.head!.querySelectorAll('meta[name="viewport"]')) {
+    for (final html.Element viewportMeta
+        in html.document.head!.querySelectorAll('meta[name="viewport"]')) {
       if (assertionsEnabled) {
         // Filter out the meta tag that the engine placed on the page. This is
         // to avoid UI flicker during hot restart. Hot restart will clean up the
@@ -255,18 +260,18 @@
     // variables, so this will be null upon hot restart. Instead, this tag is
     // removed by _clearOnHotRestart.
     _viewportMeta?.remove();
-    _viewportMeta = createDomHTMLMetaElement()
+    _viewportMeta = html.MetaElement()
       ..setAttribute('flt-viewport', '')
       ..name = 'viewport'
       ..content = 'width=device-width, initial-scale=1.0, '
           'maximum-scale=1.0, user-scalable=no';
-    domDocument.head!.append(_viewportMeta!);
+    html.document.head!.append(_viewportMeta!);
 
     // IMPORTANT: the glass pane element must come after the scene element in the DOM node list so
     //            it can intercept input events.
     _glassPaneElement?.remove();
     final DomElement glassPaneElement = domDocument.createElement(_glassPaneTagName);
-    _glassPaneElement = glassPaneElement;
+    _glassPaneElement = glassPaneElement as html.Element;
     glassPaneElement.style
       ..position = 'absolute'
       ..top = '0'
@@ -280,11 +285,12 @@
 
     // Create a [HostNode] under the glass pane element, and attach everything
     // there, instead of directly underneath the glass panel.
-    final HostNode glassPaneElementHostNode = _createHostNode(glassPaneElement);
+    final HostNode glassPaneElementHostNode = _createHostNode(glassPaneElement
+        as html.Element);
     _glassPaneShadow = glassPaneElementHostNode;
 
     // Don't allow the scene to receive pointer events.
-    _sceneHostElement = domDocument.createElement('flt-scene-host')
+    _sceneHostElement = html.document.createElement('flt-scene-host')
       ..style.pointerEvents = 'none';
 
     /// CanvasKit uses a static scene element that never gets replaced, so it's
@@ -292,24 +298,24 @@
     /// system is reset due to hot restart or in a test.
     if (useCanvasKit) {
       skiaSceneHost = createDomElement('flt-scene');
-      addSceneToSceneHost(skiaSceneHost);
+      addSceneToSceneHost(skiaSceneHost as html.Element?);
     }
 
-    final DomElement semanticsHostElement =
-        domDocument.createElement('flt-semantics-host');
+    final html.Element semanticsHostElement =
+        html.document.createElement('flt-semantics-host');
     semanticsHostElement.style
       ..position = 'absolute'
       ..transformOrigin = '0 0 0';
     _semanticsHostElement = semanticsHostElement;
     updateSemanticsScreenProperties();
 
-    final DomElement _accessibilityPlaceholder = EngineSemanticsOwner
+    final html.Element _accessibilityPlaceholder = EngineSemanticsOwner
         .instance.semanticsHelper
-        .prepareAccessibilityPlaceholder();
+        .prepareAccessibilityPlaceholder() as html.Element;
 
     glassPaneElementHostNode.appendAll(<DomNode>[
-      _accessibilityPlaceholder,
-      _sceneHostElement!,
+      _accessibilityPlaceholder as DomNode,
+      _sceneHostElement! as DomNode,
 
       // The semantic host goes last because hit-test order-wise it must be
       // first. If semantics goes under the scene host, platform views will
@@ -321,7 +327,7 @@
       // 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,
+      semanticsHostElement as DomNode,
     ]);
 
     // When debugging semantics, make the scene semi-transparent so that the
@@ -333,7 +339,7 @@
     PointerBinding.initInstance(glassPaneElement);
     KeyboardBinding.initInstance(glassPaneElement);
 
-    if (domWindow.visualViewport == null && isWebKit) {
+    if (html.window.visualViewport == null && isWebKit) {
       // Older Safari versions sometimes give us bogus innerWidth/innerHeight
       // values when the page loads. When it changes the values to correct ones
       // it does not notify of the change via `onResize`. As a workaround, we
@@ -347,13 +353,13 @@
       // Firefox returns correct values for innerHeight, innerWidth.
       // Firefox also triggers html.window.onResize therefore this timer does
       // not need to be set up for Firefox.
-      final int initialInnerWidth = domWindow.innerWidth!;
+      final int initialInnerWidth = html.window.innerWidth!;
       // Counts how many times screen size was checked. It is checked up to 5
       // times.
       int checkCount = 0;
       Timer.periodic(const Duration(milliseconds: 100), (Timer t) {
         checkCount += 1;
-        if (initialInnerWidth != domWindow.innerWidth) {
+        if (initialInnerWidth != html.window.innerWidth) {
           // Window size changed. Notify.
           t.cancel();
           _metricsDidChange(null);
@@ -364,25 +370,24 @@
       });
     }
 
-    if (domWindow.visualViewport != null) {
-      _resizeSubscription = DomSubscription(domWindow.visualViewport!, 'resize',
-          allowInterop(_metricsDidChange));
+    if (html.window.visualViewport != null) {
+      _resizeSubscription =
+          html.window.visualViewport!.onResize.listen(_metricsDidChange);
     } else {
-      _resizeSubscription = DomSubscription(domWindow, 'resize',
-          allowInterop(_metricsDidChange));
+      _resizeSubscription = html.window.onResize.listen(_metricsDidChange);
     }
-    _localeSubscription = DomSubscription(domWindow, 'languagechange',
-          allowInterop(_languageDidChange));
+    _localeSubscription =
+        languageChangeEvent.forTarget(html.window).listen(_languageDidChange);
     EnginePlatformDispatcher.instance.updateLocales();
   }
 
-  // Creates a [HostNode] into a `root` [DomElement].
-  HostNode _createHostNode(DomElement root) {
+  // Creates a [HostNode] into a `root` [html.Element].
+  HostNode _createHostNode(html.Element root) {
     if (getJsProperty<Object?>(root, 'attachShadow') != null) {
-      return ShadowDomHostNode(root);
+      return ShadowDomHostNode(root as DomElement);
     } else {
       // attachShadow not available, fall back to ElementHostNode.
-      return ElementHostNode(root);
+      return ElementHostNode(root as DomElement);
     }
   }
 
@@ -390,8 +395,8 @@
   /// logical pixels. To compensate, an inverse scale is injected at the root
   /// level.
   void updateSemanticsScreenProperties() {
-    _semanticsHostElement!.style.setProperty('transform',
-        'scale(${1 / domWindow.devicePixelRatio})');
+    _semanticsHostElement!.style.transform =
+        'scale(${1 / html.window.devicePixelRatio})';
   }
 
   /// Called immediately after browser window metrics change.
@@ -403,7 +408,7 @@
   ///
   /// Note: always check for rotations for a mobile device. Update the physical
   /// size if the change is caused by a rotation.
-  void _metricsDidChange(DomEvent? event) {
+  void _metricsDidChange(html.Event? event) {
     updateSemanticsScreenProperties();
     if (isMobile && !window.isRotation() && textEditing.isEditing) {
       window.computeOnScreenKeyboardInsets(true);
@@ -417,7 +422,7 @@
   }
 
   /// Called immediately after browser window language change.
-  void _languageDidChange(DomEvent event) {
+  void _languageDidChange(html.Event event) {
     EnginePlatformDispatcher.instance.updateLocales();
     if (ui.window.onLocaleChanged != null) {
       ui.window.onLocaleChanged!();
@@ -446,9 +451,9 @@
   ///
   /// See w3c screen api: https://www.w3.org/TR/screen-orientation/
   Future<bool> setPreferredOrientation(List<dynamic> orientations) {
-    final DomScreen screen = domWindow.screen!;
+    final html.Screen screen = html.window.screen!;
     if (!unsafeIsNull(screen)) {
-      final DomScreenOrientation? screenOrientation = screen.orientation;
+      final html.ScreenOrientation? screenOrientation = screen.orientation;
       if (!unsafeIsNull(screenOrientation)) {
         if (orientations.isEmpty) {
           screenOrientation!.unlock();
@@ -495,9 +500,9 @@
   }
 
   /// The element corresponding to the only child of the root surface.
-  DomElement? get _rootApplicationElement {
-    final DomElement lastElement = rootElement.children.last;
-    for (final DomElement child in lastElement.children) {
+  html.Element? get _rootApplicationElement {
+    final html.Element lastElement = rootElement.children.last;
+    for (final html.Element child in lastElement.children) {
       if (child.tagName == 'FLT-SCENE') {
         return child;
       }
@@ -511,37 +516,37 @@
   /// place it as first element of body(webkit), or as a child of
   /// glass pane element for other browsers to make sure url resolution
   /// works correctly when content is inside a shadow root.
-  void addResource(DomElement element) {
+  void addResource(html.Element element) {
     final bool isWebKit = browserEngine == BrowserEngine.webkit;
     if (_resourcesHost == null) {
-      _resourcesHost = createDomHTMLDivElement()
+      _resourcesHost = html.DivElement()
         ..style.visibility = 'hidden';
       if (isWebKit) {
-        final DomNode bodyNode = domDocument.body!;
+        final html.Node bodyNode = html.document.body!;
         bodyNode.insertBefore(_resourcesHost!, bodyNode.firstChild);
       } else {
         _glassPaneShadow!.node.insertBefore(
-            _resourcesHost!, _glassPaneShadow!.node.firstChild);
+            _resourcesHost! as DomNode, _glassPaneShadow!.node.firstChild);
       }
     }
     _resourcesHost!.append(element);
   }
 
   /// Removes a global resource element.
-  void removeResource(DomElement? element) {
+  void removeResource(html.Element? element) {
     if (element == null) {
       return;
     }
-    assert(element.parentNode == _resourcesHost);
+    assert(element.parent == _resourcesHost);
     element.remove();
   }
 
-  String get currentHtml => _rootApplicationElement?.outerHTML ?? '';
+  String get currentHtml => _rootApplicationElement?.outerHtml ?? '';
 }
 
 // Applies the required global CSS to an incoming [html.CssStyleSheet] `sheet`.
 void applyGlobalCssRulesToSheet(
-  DomCSSStyleSheet sheet, {
+  html.CssStyleSheet sheet, {
   required BrowserEngine browserEngine,
   required bool hasAutofillOverlay,
   String glassPaneTagName = FlutterViewEmbedder._glassPaneTagName,
diff --git a/lib/web_ui/lib/src/engine/host_node.dart b/lib/web_ui/lib/src/engine/host_node.dart
index dee8ffb..fe48e9d 100644
--- a/lib/web_ui/lib/src/engine/host_node.dart
+++ b/lib/web_ui/lib/src/engine/host_node.dart
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:html' as html;
+
 import 'browser_detection.dart';
 import 'dom.dart';
 import 'embedder.dart';
@@ -109,7 +111,7 @@
 
     // TODO(dit): Apply only rules for the shadow root
     applyGlobalCssRulesToSheet(
-      shadowRootStyleElement.sheet! as DomCSSStyleSheet,
+      shadowRootStyleElement.sheet! as html.CssStyleSheet,
       browserEngine: browserEngine,
       hasAutofillOverlay: browserHasAutofillOverlay(),
     );
diff --git a/lib/web_ui/lib/src/engine/html/color_filter.dart b/lib/web_ui/lib/src/engine/html/color_filter.dart
index 0858956..71beada 100644
--- a/lib/web_ui/lib/src/engine/html/color_filter.dart
+++ b/lib/web_ui/lib/src/engine/html/color_filter.dart
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:html' as html;
+
 import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
@@ -52,7 +54,7 @@
   @override
   void discard() {
     super.discard();
-    flutterViewEmbedder.removeResource(_filterElement);
+    flutterViewEmbedder.removeResource(_filterElement as html.Element?);
     // Do not detach the child container from the root. It is permanently
     // attached. The elements are reused together and are detached from the DOM
     // together.
@@ -71,7 +73,7 @@
 
   @override
   void apply() {
-    flutterViewEmbedder.removeResource(_filterElement);
+    flutterViewEmbedder.removeResource(_filterElement as html.Element?);
     _filterElement = null;
     final EngineColorFilter? engineValue = filter as EngineColorFilter?;
     if (engineValue == null) {
@@ -137,7 +139,7 @@
     // Use SVG filter for blend mode.
     final SvgFilter svgFilter = svgFilterFromBlendMode(filterColor, colorFilterBlendMode);
     _filterElement = svgFilter.element;
-    flutterViewEmbedder.addResource(_filterElement!);
+    flutterViewEmbedder.addResource(_filterElement! as html.Element);
     style.filter = 'url(#${svgFilter.id})';
     if (colorFilterBlendMode == ui.BlendMode.saturation ||
         colorFilterBlendMode == ui.BlendMode.multiply ||
@@ -149,7 +151,7 @@
   void _applyMatrixColorFilter(CkMatrixColorFilter colorFilter) {
     final SvgFilter svgFilter = svgFilterFromColorMatrix(colorFilter.matrix);
     _filterElement = svgFilter.element;
-    flutterViewEmbedder.addResource(_filterElement!);
+    flutterViewEmbedder.addResource(_filterElement! as html.Element);
     childContainer!.style.filter = 'url(#${svgFilter.id})';
   }
 
diff --git a/lib/web_ui/lib/src/engine/html/shader_mask.dart b/lib/web_ui/lib/src/engine/html/shader_mask.dart
index d748bc1..526bf88 100644
--- a/lib/web_ui/lib/src/engine/html/shader_mask.dart
+++ b/lib/web_ui/lib/src/engine/html/shader_mask.dart
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:html' as html;
+
 import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
@@ -38,7 +40,7 @@
   final ui.Rect maskRect;
   final ui.BlendMode blendMode;
   final ui.FilterQuality filterQuality;
-  DomElement? _shaderElement;
+  html.Element? _shaderElement;
   final bool isWebKit = browserEngine == BrowserEngine.webkit;
 
   @override
@@ -160,7 +162,7 @@
 
       final SvgFilter svgFilter = svgMaskFilterFromImageAndBlendMode(
           imageUrl, blendModeTemp, maskRect.width, maskRect.height);
-      _shaderElement = svgFilter.element;
+      _shaderElement = svgFilter.element as html.Element;
       if (isWebKit) {
         _childContainer!.style.filter = 'url(#${svgFilter.id})';
       } else {
diff --git a/lib/web_ui/lib/src/engine/mouse_cursor.dart b/lib/web_ui/lib/src/engine/mouse_cursor.dart
index 3e5979b..1d05a24 100644
--- a/lib/web_ui/lib/src/engine/mouse_cursor.dart
+++ b/lib/web_ui/lib/src/engine/mouse_cursor.dart
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dom.dart';
 import 'embedder.dart';
 import 'util.dart';
 
@@ -67,7 +68,7 @@
 
   void activateSystemCursor(String? kind) {
     setElementStyle(
-      flutterViewEmbedder.glassPaneElement!,
+      flutterViewEmbedder.glassPaneElement! as DomElement,
       'cursor',
       _mapKindToCssValue(kind),
     );
diff --git a/lib/web_ui/lib/src/engine/platform_dispatcher.dart b/lib/web_ui/lib/src/engine/platform_dispatcher.dart
index f5c03c0..39da68a 100644
--- a/lib/web_ui/lib/src/engine/platform_dispatcher.dart
+++ b/lib/web_ui/lib/src/engine/platform_dispatcher.dart
@@ -4,6 +4,7 @@
 
 import 'dart:async';
 import 'dart:convert';
+import 'dart:html' as html;
 import 'dart:typed_data';
 
 import 'package:meta/meta.dart';
@@ -484,7 +485,7 @@
           contentManager: platformViewManager,
           contentHandler: (DomElement content) {
             // Remove cast to [html.Element] after migration.
-            flutterViewEmbedder.glassPaneElement!.append(content);
+            flutterViewEmbedder.glassPaneElement!.append(content as html.Element);
           },
         );
         _platformViewMessageHandler!.handlePlatformViewCall(data, callback!);
@@ -607,7 +608,7 @@
       rasterizer!.draw(layerScene.layerTree);
     } else {
       final SurfaceScene surfaceScene = scene as SurfaceScene;
-      flutterViewEmbedder.addSceneToSceneHost(surfaceScene.webOnlyRootElement);
+      flutterViewEmbedder.addSceneToSceneHost(surfaceScene.webOnlyRootElement as html.Element?);
     }
     frameTimingsOnRasterFinish();
   }
diff --git a/lib/web_ui/lib/src/engine/semantics/semantics.dart b/lib/web_ui/lib/src/engine/semantics/semantics.dart
index 9745699..4ac038f 100644
--- a/lib/web_ui/lib/src/engine/semantics/semantics.dart
+++ b/lib/web_ui/lib/src/engine/semantics/semantics.dart
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:html' as html;
 import 'dart:math' as math;
 import 'dart:typed_data';
 
@@ -1786,7 +1787,7 @@
     if (_rootSemanticsElement == null) {
       final SemanticsObject root = _semanticsTree[0]!;
       _rootSemanticsElement = root.element;
-      flutterViewEmbedder.semanticsHostElement!.append(root.element);
+      flutterViewEmbedder.semanticsHostElement!.append(root.element as html.Node);
     }
 
     _finalizeTree();
diff --git a/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart b/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart
index 7ba45ad..fdab6ad 100644
--- a/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart
@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../dom.dart';
-import '../safe_browser_api.dart';
+import 'dart:html' as html;
+
 import 'text_editing.dart';
 
 /// Provides default functionality for listening to HTML composition events.
@@ -29,12 +29,9 @@
   /// The name of the browser composition event type that triggers on ending a composition.
   static const String _kCompositionEnd = 'compositionend';
 
-  late final DomEventListener _compositionStartListener =
-      allowInterop(_handleCompositionStart);
-  late final DomEventListener _compositionUpdateListener =
-      allowInterop(_handleCompositionUpdate);
-  late final DomEventListener _compositionEndListener =
-      allowInterop(_handleCompositionEnd);
+  late final html.EventListener _compositionStartListener = _handleCompositionStart;
+  late final html.EventListener _compositionUpdateListener = _handleCompositionUpdate;
+  late final html.EventListener _compositionEndListener = _handleCompositionEnd;
 
   /// The currently composing text in the `domElement`.
   ///
@@ -43,29 +40,29 @@
   /// so it is safe to reference it to get the current composingText.
   String? composingText;
 
-  void addCompositionEventHandlers(DomHTMLElement domElement) {
+  void addCompositionEventHandlers(html.HtmlElement domElement) {
     domElement.addEventListener(_kCompositionStart, _compositionStartListener);
     domElement.addEventListener(_kCompositionUpdate, _compositionUpdateListener);
     domElement.addEventListener(_kCompositionEnd, _compositionEndListener);
   }
 
-  void removeCompositionEventHandlers(DomHTMLElement domElement) {
+  void removeCompositionEventHandlers(html.HtmlElement domElement) {
     domElement.removeEventListener(_kCompositionStart, _compositionStartListener);
     domElement.removeEventListener(_kCompositionUpdate, _compositionUpdateListener);
     domElement.removeEventListener(_kCompositionEnd, _compositionEndListener);
   }
 
-  void _handleCompositionStart(DomEvent event) {
+  void _handleCompositionStart(html.Event event) {
     composingText = null;
   }
 
-  void _handleCompositionUpdate(DomEvent event) {
-    if (domInstanceOfString(event, 'CompositionEvent')) {
-      composingText = (event as DomCompositionEvent).data;
+  void _handleCompositionUpdate(html.Event event) {
+    if (event is html.CompositionEvent) {
+      composingText = event.data;
     }
   }
 
-  void _handleCompositionEnd(DomEvent event) {
+  void _handleCompositionEnd(html.Event event) {
     composingText = null;
   }
 
diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index 3e1a6e2..658c864 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:html' as html;
 import 'dart:math' as math;
 import 'dart:typed_data';
 
@@ -1217,7 +1218,7 @@
     activeDomElement.addEventListener('beforeinput',
         allowInterop(handleBeforeInput));
 
-    addCompositionEventHandlers(activeDomElement);
+    addCompositionEventHandlers(activeDomElement as html.HtmlElement);
 
     // Refocus on the activeDomElement after blur, so that user can keep editing the
     // text field.
@@ -1257,7 +1258,7 @@
       subscriptions[i].cancel();
     }
     subscriptions.clear();
-    removeCompositionEventHandlers(activeDomElement);
+    removeCompositionEventHandlers(activeDomElement as html.HtmlElement);
 
     // If focused element is a part of a form, it needs to stay on the DOM
     // until the autofill context of the form is finalized.
@@ -1507,7 +1508,7 @@
     activeDomElement.addEventListener('beforeinput',
         allowInterop(handleBeforeInput));
 
-    addCompositionEventHandlers(activeDomElement);
+    addCompositionEventHandlers(activeDomElement as html.HtmlElement);
 
     // Position the DOM element after it is focused.
     subscriptions.add(DomSubscription(activeDomElement, 'focus',
@@ -1660,7 +1661,7 @@
     activeDomElement.addEventListener('beforeinput',
         allowInterop(handleBeforeInput));
 
-    addCompositionEventHandlers(activeDomElement);
+    addCompositionEventHandlers(activeDomElement as html.HtmlElement);
 
     subscriptions.add(
         DomSubscription(activeDomElement, 'blur',
@@ -1722,7 +1723,7 @@
     activeDomElement.addEventListener('beforeinput',
         allowInterop(handleBeforeInput));
 
-    addCompositionEventHandlers(activeDomElement);
+    addCompositionEventHandlers(activeDomElement as html.HtmlElement);
 
     // Detects changes in text selection.
     //
diff --git a/lib/web_ui/test/canvaskit/embedded_views_test.dart b/lib/web_ui/test/canvaskit/embedded_views_test.dart
index 945a0d8..d9b2cf4 100644
--- a/lib/web_ui/test/canvaskit/embedded_views_test.dart
+++ b/lib/web_ui/test/canvaskit/embedded_views_test.dart
@@ -42,11 +42,9 @@
       // as a child of the glassPane, and the slot lives in the glassPane
       // shadow root. The slot is the one that has pointer events auto.
       final html.Element contents =
-          flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')! as
-          html.Element;
+          flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')!;
       final html.Element slot =
-          flutterViewEmbedder.sceneElement!.querySelector('slot')! as
-          html.Element;
+          flutterViewEmbedder.sceneElement!.querySelector('slot')!;
       final html.Element contentsHost = contents.parent!;
       final html.Element slotHost = slot.parent!;
 
@@ -121,8 +119,7 @@
 
       // Transformations happen on the slot element.
       final html.Element slotHost =
-          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!
-          as html.Element;
+          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!;
 
       expect(
         slotHost.style.transform,
@@ -147,8 +144,7 @@
       dispatcher.rasterizer!.draw(sb.build().layerTree);
 
       final html.Element slotHost =
-          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!
-          as html.Element;
+          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!;
       final html.CssStyleDeclaration style = slotHost.style;
 
       expect(style.transform, 'matrix(1, 0, 0, 1, 3, 4)');
@@ -193,8 +189,7 @@
 
       // Transformations happen on the slot element.
       html.Element slotHost =
-          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!
-          as html.Element;
+          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!;
 
       expect(
         getTransformChain(slotHost),
@@ -215,8 +210,7 @@
 
       // Transformations happen on the slot element.
       slotHost =
-          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!
-          as html.Element;
+          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!;
 
       expect(
         getTransformChain(slotHost),
@@ -247,8 +241,7 @@
 
       // Transformations happen on the slot element.
       final html.Element slotHost =
-          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!
-          as html.Element;
+          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!;
 
       expect(
         getTransformChain(slotHost),
@@ -277,8 +270,7 @@
 
       // Transformations happen on the slot element.
       final html.Element slotHost =
-          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!
-          as html.Element;
+          flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!;
 
       expect(
         getTransformChain(slotHost),
@@ -569,8 +561,7 @@
       }
 
       final html.Node skPathDefs =
-          flutterViewEmbedder.sceneElement!.querySelector('#sk_path_defs')! as
-          html.Node;
+          flutterViewEmbedder.sceneElement!.querySelector('#sk_path_defs')!;
 
       expect(skPathDefs.childNodes, hasLength(0));
 
diff --git a/lib/web_ui/test/canvaskit/h5vcc_test.dart b/lib/web_ui/test/canvaskit/h5vcc_test.dart
index d18ee25..b5b4608 100644
--- a/lib/web_ui/test/canvaskit/h5vcc_test.dart
+++ b/lib/web_ui/test/canvaskit/h5vcc_test.dart
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:html' as html;
+
 import 'package:js/js.dart';
 import 'package:js/js_util.dart' as js_util;
 import 'package:test/bootstrap/browser.dart';
@@ -57,7 +59,7 @@
 
       // No <canvas> element should be created.
       expect(
-        flutterViewEmbedder.glassPaneElement!.querySelectorAll('canvas'),
+        flutterViewEmbedder.glassPaneElement!.querySelectorAll<html.Element>('canvas'),
         isEmpty,
       );
     });
diff --git a/lib/web_ui/test/composition_test.dart b/lib/web_ui/test/composition_test.dart
index ed4f463..54c543d 100644
--- a/lib/web_ui/test/composition_test.dart
+++ b/lib/web_ui/test/composition_test.dart
@@ -9,7 +9,6 @@
 import 'package:test/test.dart';
 import 'package:ui/src/engine/browser_detection.dart';
 
-import 'package:ui/src/engine/dom.dart';
 import 'package:ui/src/engine/initialization.dart';
 import 'package:ui/src/engine/text_editing/composition_aware_mixin.dart';
 import 'package:ui/src/engine/text_editing/input_type.dart';
@@ -69,8 +68,7 @@
         final _MockWithCompositionAwareMixin mockWithCompositionAwareMixin =
             _MockWithCompositionAwareMixin();
         mockWithCompositionAwareMixin.composingText = fakeComposingText;
-        mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement
-            as DomHTMLElement);
+        mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement);
 
         _inputElement.dispatchEvent(html.Event(_MockWithCompositionAwareMixin._kCompositionEnd));
 
@@ -83,8 +81,7 @@
         final _MockWithCompositionAwareMixin mockWithCompositionAwareMixin =
             _MockWithCompositionAwareMixin();
         mockWithCompositionAwareMixin.composingText = fakeComposingText;
-        mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement
-            as DomHTMLElement);
+        mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement);
 
         _inputElement.dispatchEvent(html.Event(_MockWithCompositionAwareMixin._kCompositionStart));
 
@@ -98,8 +95,7 @@
         final _MockWithCompositionAwareMixin mockWithCompositionAwareMixin =
             _MockWithCompositionAwareMixin();
         mockWithCompositionAwareMixin.composingText = fakeComposingText;
-        mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement
-            as DomHTMLElement);
+        mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement);
 
         _inputElement.dispatchEvent(html.CompositionEvent(
             _MockWithCompositionAwareMixin._kCompositionUpdate,
diff --git a/lib/web_ui/test/embedder_test.dart b/lib/web_ui/test/embedder_test.dart
index d227b0f..528b93f 100644
--- a/lib/web_ui/test/embedder_test.dart
+++ b/lib/web_ui/test/embedder_test.dart
@@ -80,11 +80,11 @@
   test('should add/remove global resource', () {
     final FlutterViewEmbedder embedder = FlutterViewEmbedder();
     final html.DivElement resource = html.DivElement();
-    embedder.addResource(resource as DomHTMLDivElement);
+    embedder.addResource(resource);
     final html.Element? resourceRoot = resource.parent;
     expect(resourceRoot, isNotNull);
     expect(resourceRoot!.childNodes.length, 1);
-    embedder.removeResource(resource as DomHTMLDivElement);
+    embedder.removeResource(resource);
     expect(resourceRoot.childNodes.length, 0);
   });
 
@@ -92,7 +92,7 @@
     final FlutterViewEmbedder embedder = FlutterViewEmbedder();
     final html.InputElement regularTextField = html.InputElement();
     regularTextField.placeholder = 'Now you see me';
-    embedder.addResource(regularTextField as DomHTMLInputElement);
+    embedder.addResource(regularTextField);
 
     regularTextField.focus();
     html.CssStyleDeclaration? style = domWindow.getComputedStyle(
@@ -104,7 +104,7 @@
     final html.InputElement textField = html.InputElement();
     textField.placeholder = 'Now you dont';
     textField.classes.add('flt-text-editing');
-    embedder.addResource(textField as DomHTMLInputElement);
+    embedder.addResource(textField);
 
     textField.focus();
     style = domWindow.getComputedStyle(
diff --git a/lib/web_ui/test/engine/pointer_binding_test.dart b/lib/web_ui/test/engine/pointer_binding_test.dart
index f2f4611..d5b6742 100644
--- a/lib/web_ui/test/engine/pointer_binding_test.dart
+++ b/lib/web_ui/test/engine/pointer_binding_test.dart
@@ -46,8 +46,7 @@
 
 void testMain() {
   ensureFlutterViewEmbedderInitialized();
-  final html.Element glassPane = flutterViewEmbedder.glassPaneElement! as
-      html.Element;
+  final html.Element glassPane = flutterViewEmbedder.glassPaneElement!;
   double dpi = 1.0;
 
   setUp(() {
diff --git a/lib/web_ui/test/engine/semantics/semantics_test.dart b/lib/web_ui/test/engine/semantics/semantics_test.dart
index 972d24e..701c157 100644
--- a/lib/web_ui/test/engine/semantics/semantics_test.dart
+++ b/lib/web_ui/test/engine/semantics/semantics_test.dart
@@ -1888,9 +1888,7 @@
     expect(child3Rect.right, 20);
     expect(child3Rect.bottom, 60);
 
-    final html.Element platformViewElement =
-        flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')! as
-        html.Element;
+    final html.Element platformViewElement = flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')!;
     final html.Rectangle<num> platformViewRect = platformViewElement.getBoundingClientRect();
     expect(platformViewRect.left, 0);
     expect(platformViewRect.top, 15);
diff --git a/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart b/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart
index 6b3567f..049611f 100644
--- a/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart
+++ b/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart
@@ -39,7 +39,7 @@
   setUp(() async {
     SurfaceSceneBuilder.debugForgetFrameScene();
     for (final html.Node scene in
-        flutterViewEmbedder.sceneHostElement!.querySelectorAll('flt-scene').cast<html.Node>()) {
+        flutterViewEmbedder.sceneHostElement!.querySelectorAll('flt-scene')) {
       scene.remove();
     }
     initWebGl();
@@ -163,7 +163,8 @@
   builder.addPicture(Offset.zero, circles2);
   builder.pop();
 
-  flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement!);
+  flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement!
+      as html.Element);
 }
 
 Picture _drawTestPictureWithText(
@@ -219,5 +220,6 @@
   builder.addPicture(Offset.zero, textPicture2);
   builder.pop();
 
-  flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement!);
+  flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement!
+      as html.Element);
 }
diff --git a/lib/web_ui/test/matchers.dart b/lib/web_ui/test/matchers.dart
index 4cf4622..be7310c 100644
--- a/lib/web_ui/test/matchers.dart
+++ b/lib/web_ui/test/matchers.dart
@@ -461,7 +461,7 @@
 
 /// Currently rendered HTML DOM as an HTML string.
 String get currentHtml {
-  return flutterViewEmbedder.sceneElement?.outerHTML ?? '';
+  return flutterViewEmbedder.sceneElement?.outerHtml ?? '';
 }
 
 class SceneTester {