From 55dc0b9ce66fd8a9beefb3e423b374492879aa17 Mon Sep 17 00:00:00 2001
From: Ahmed Fwela <afwela@inpro.sa>
Date: Tue, 11 Jun 2024 12:35:36 +0300
Subject: [PATCH] Initial migration

---
 .github/workflows/dart.yml                    | 228 +++++++++++++-----
 .idea/runConfigurations/melos_bootstrap.xml   |   2 +-
 .idea/runConfigurations/melos_clean.xml       |   2 +-
 .vscode/settings.json                         |   3 +
 _tests/lib/matchers.dart                      |  15 +-
 _tests/pubspec.yaml                           |   4 +-
 _tests/test/bootstrap/run_app_test.dart       |  19 +-
 _tests/test/common/directives/for_test.dart   |   4 +-
 _tests/test/common/directives/if_test.dart    |  18 +-
 .../test/common/directives/ng_class_test.dart | 134 +++++-----
 .../test/common/directives/ng_style_test.dart |  14 +-
 .../invalid_late_fields_test.dart             |   8 +-
 _tests/test/core/application_ref_test.dart    |   9 +-
 .../detect_host_changes_test.dart             |  10 +-
 .../on_push_embedded_view_test.dart           |  20 +-
 .../test/core/directive_inheritance_test.dart |   2 +-
 _tests/test/core/event_handler_test.dart      |  28 +--
 _tests/test/core/exports_test.dart            |  11 +-
 _tests/test/core/host_annotation_test.dart    |  19 +-
 _tests/test/core/i18n_escape_test.dart        |   3 +-
 _tests/test/core/i18n_test.dart               |   7 +-
 .../core/linker/component_loader_test.dart    |   4 +-
 .../core/linker/component_selector_test.dart  |  46 ++--
 .../core/linker/implicit_static_test.dart     |   3 +-
 .../integration/binding_integration_test.dart |  19 +-
 .../directive_integration_test.dart           |   4 +-
 .../core/linker/integration/misc_test.dart    |   5 +-
 .../linker/integration/ng_container_test.dart |  24 +-
 .../core/linker/integration/on_push_test.dart |  14 +-
 .../core/linker/integration/outputs_test.dart |  12 +-
 .../integration/reference_binding_test.dart   |   5 +-
 .../linker/integration/template_test.dart     |  13 +-
 .../integration/view_creation_test.dart       |  43 ++--
 .../core/linker/query_integration_test.dart   |   7 +-
 .../linker/security_integration_test.dart     |  23 +-
 .../core/linker/style_encapsulation_test.dart |  22 +-
 _tests/test/core/query_html_element_test.dart |  13 +-
 .../styling/clear_component_styles_test.dart  |   3 +-
 _tests/test/core/styling/shim_test.dart       |   3 +-
 .../view/projection_integration_test.dart     |  15 +-
 _tests/test/core/view/projection_test.dart    |  47 ++--
 .../core/view/view_child_regression_test.dart |   3 +-
 _tests/test/devtools/inspector_test.dart      |  23 +-
 .../ng_for_content_projection_test.dart       |  27 +--
 _tests/test/integration/query_view_test.dart  |   6 +-
 .../platform/dom/events/key_events_test.dart  |  11 +-
 .../test/security/safe_inner_html_test.dart   |   4 +-
 .../templates/additional_expression_test.dart |  13 +-
 goldens/pubspec.yaml                          |   2 +-
 .../boolean_coerced_inputs.dart               |   2 +-
 ...oolean_coerced_inputs.template.dart.golden |   2 +-
 .../change_detection_link.dart                |   2 +-
 ...change_detection_link.template.dart.golden |   2 +-
 goldens/test/change_detection/default.dart    |   2 +-
 .../default.template.dart.golden              |   2 +-
 .../directive_change_detector.dart            |   2 +-
 ...ctive_change_detector.template.dart.golden |   2 +-
 goldens/test/change_detection/on_push.dart    |   2 +-
 .../on_push.template.dart.golden              |   2 +-
 .../eager_existing_providers.dart             |   2 +-
 ...er_existing_providers.template.dart.golden |   2 +-
 .../generated_injector_large.dart             |   2 +-
 ...erated_injector_large.template.dart.golden |   2 +-
 .../generated_injector_small.dart             |   2 +-
 ...erated_injector_small.template.dart.golden |   2 +-
 .../injector_get_internal.dart                |   2 +-
 ...injector_get_internal.template.dart.golden |   2 +-
 .../inlined_providers.dart                    |   2 +-
 .../inlined_providers.template.dart.golden    |   2 +-
 .../dependency_injection/opaque_token.dart    |   2 +-
 .../opaque_token.template.dart.golden         |   2 +-
 .../visibility.template.dart.golden           |   2 +-
 goldens/test/devtools/inputs.dart             |   2 +-
 .../test/devtools/inputs.template.dart.golden |   2 +-
 goldens/test/dom_bindings/events.dart         |   2 +-
 .../dom_bindings/events.template.dart.golden  |   2 +-
 .../test/dom_bindings/host_annotations.dart   |   2 +-
 .../host_annotations.template.dart.golden     |   2 +-
 .../test/dom_bindings/html_properties.dart    |   2 +-
 goldens/test/dom_bindings/interpolate.dart    |   2 +-
 .../interpolate.template.dart.golden          |   2 +-
 .../test/lifecycle_hooks/after_changes.dart   |   2 +-
 .../after_changes.template.dart.golden        |   2 +-
 .../test/lifecycle_hooks/after_queries.dart   |   2 +-
 .../after_queries.template.dart.golden        |   2 +-
 goldens/test/lifecycle_hooks/do_check.dart    |   2 +-
 .../do_check.template.dart.golden             |   2 +-
 .../lifecycle_hooks/on_init_and_destroy.dart  |   2 +-
 .../on_init_and_destroy.template.dart.golden  |   2 +-
 .../nnbd/hello_world.template.dart.golden     |   2 +-
 .../test/templates/directive_star_syntax.dart |   2 +-
 ...directive_star_syntax.template.dart.golden |   2 +-
 goldens/test/templates/encapsulation.dart     |   2 +-
 .../encapsulation.template.dart.golden        |   2 +-
 .../test/templates/generic_directives.dart    |   2 +-
 .../generic_directives.template.dart.golden   |   2 +-
 .../test/templates/i18n.template.dart.golden  |   2 +-
 goldens/test/templates/large_templates.dart   |   2 +-
 .../large_templates.template.dart.golden      |   2 +-
 .../nested_structural_directives.dart         |   2 +-
 ...structural_directives.template.dart.golden |   2 +-
 goldens/test/templates/pipes.dart             |   2 +-
 .../test/templates/pipes.template.dart.golden |   2 +-
 goldens/test/templates/queries.dart           |   4 +-
 .../templates/queries.template.dart.golden    |   2 +-
 .../type_inference.template.dart.golden       |   2 +-
 goldens/test/templates/whitespace.dart        |   2 +-
 .../templates/whitespace.template.dart.golden |   2 +-
 .../lib/v1/src/angular_compiler/outliner.dart |   4 +-
 .../lib/v1/src/compiler/analyzed_class.dart   |  28 +--
 ngcompiler/pubspec.yaml                       |   4 +-
 ngdart/lib/angular.dart                       |   1 +
 .../lib/src/common/directives/ng_class.dart   |   5 +-
 .../lib/src/common/directives/ng_style.dart   |   6 +-
 ngdart/lib/src/core/application_ref.dart      |   2 +-
 .../directive_change_detector.dart            |   3 +-
 ngdart/lib/src/core/exception_handler.dart    |   8 +-
 .../lib/src/core/linker/app_view_utils.dart   |   9 +-
 .../src/core/linker/component_factory.dart    |   3 +-
 .../src/core/linker/style_encapsulation.dart  |   5 +-
 .../lib/src/core/linker/view_container.dart   |   3 +-
 ngdart/lib/src/core/linker/view_fragment.dart |   3 +-
 ngdart/lib/src/core/linker/view_ref.dart      |   2 +-
 .../src/core/linker/views/component_view.dart |   2 +-
 .../src/core/linker/views/dynamic_view.dart   |   3 +-
 .../src/core/linker/views/embedded_view.dart  |   2 +-
 .../lib/src/core/linker/views/host_view.dart  |   3 +-
 .../src/core/linker/views/render_view.dart    |   2 +-
 ngdart/lib/src/core/linker/views/view.dart    |   3 +-
 ngdart/lib/src/devtools.dart                  |  20 +-
 ngdart/lib/src/devtools/inspector.dart        |  32 ++-
 ngdart/lib/src/meta/directives.dart           |   2 +-
 ngdart/lib/src/runtime/dom_events.dart        |  17 +-
 ngdart/lib/src/runtime/dom_helpers.dart       |  38 ++-
 ngdart/lib/src/runtime/text_binding.dart      |   3 +-
 ngdart/lib/src/security/html_sanitizer.dart   |   8 +-
 ngdart/lib/src/security/safe_inner_html.dart  |  12 +-
 ngdart/lib/src/testability/js_api.dart        |  14 +-
 ngdart/lib/src/testability/js_impl.dart       |  22 +-
 ngdart/lib/src/testability/testability.dart   |   6 +-
 ngdart/lib/src/utilities.dart                 |   1 +
 ngdart/lib/src/utilities/iterables.dart       |  31 +++
 ngdart/pubspec.yaml                           |   6 +-
 ngforms/lib/src/directives/abstract_form.dart |   2 +-
 .../directives/checkbox_value_accessor.dart   |   7 +-
 .../directives/default_value_accessor.dart    |   2 +-
 .../src/directives/number_value_accessor.dart |   8 +-
 .../radio_control_value_accessor.dart         |   2 +-
 .../select_control_value_accessor.dart        |  11 +-
 ngforms/lib/src/directives/shared.dart        |   3 +-
 ngforms/pubspec.yaml                          |   1 +
 ngforms/test/accessor_test.dart               |   2 +-
 ngforms/test/directives_test.dart             |  15 +-
 ngforms/test/integration_test.dart            | 127 ++++++----
 ngforms/test/ng_control_group_test.dart       |   5 +-
 ngforms/test/ng_control_name_test.dart        |   5 +-
 ngforms/test/ng_control_repeated_test.dart    |   2 +-
 ngforms/test/ng_form_control_test.dart        |   5 +-
 ngforms/test/ng_form_test.dart                |   9 +-
 .../router_link_active_directive.dart         |  27 ++-
 .../src/directives/router_link_directive.dart |   5 +-
 ngrouter/lib/src/location/base_href.dart      |   6 +-
 .../location/browser_platform_location.dart   |  19 +-
 .../src/location/hash_location_strategy.dart  |   5 +-
 .../lib/src/location/location_strategy.dart   |   6 +-
 .../src/location/path_location_strategy.dart  |   5 +-
 .../lib/src/location/platform_location.dart   |   6 +-
 .../testing/mock_location_strategy.dart       |   4 +-
 ngrouter/pubspec.yaml                         |   1 +
 .../router_link_active_directive_test.dart    |  14 +-
 .../router_link_directive_test.dart           |  29 +--
 .../regression/empty_active_link_test.dart    |   2 +-
 .../hash_location_strategy_test.dart          |   4 +-
 .../regression/routing_state_crash_test.dart  |  15 +-
 ngrouter/test/revert_popstate_test.dart       |   3 +-
 ngtest/lib/src/bootstrap.dart                 |   2 +-
 ngtest/lib/src/frontend/bed.dart              |   4 +-
 ngtest/lib/src/frontend/fixture.dart          |   7 +-
 ngtest/pubspec.yaml                           |   1 +
 ngtest/test/bootstrap_test.dart               |  21 +-
 ngtest/test/frontend/bed_error_test.dart      |   7 +-
 ngtest/test/frontend/bed_lifecycle_test.dart  |  15 +-
 ngtest/test/frontend/compatibility_test.dart  |  21 +-
 tool/package_versions.yaml                    |   2 +-
 184 files changed, 1040 insertions(+), 804 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 ngdart/lib/src/utilities/iterables.dart

diff --git a/.github/workflows/dart.yml b/.github/workflows/dart.yml
index e8a9ccf335..7d697fbc49 100644
--- a/.github/workflows/dart.yml
+++ b/.github/workflows/dart.yml
@@ -41,16 +41,16 @@ jobs:
       - name: mono_repo self validate
         run: dart pub global run mono_repo generate --validate
   job_002:
-    name: "analyze; Dart 3.1.0; PKGS: ngast, ngcompiler, ngdart, ngforms, ngrouter, ngtest; `dart analyze --fatal-infos .`"
+    name: "analyze; Dart 3.1.0; PKGS: ngast, ngcompiler, ngforms, ngrouter, ngtest; `dart analyze --fatal-infos .`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
         uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84
         with:
           path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngdart-ngforms-ngrouter-ngtest;commands:analyze"
+          key: "os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngforms-ngrouter-ngtest;commands:analyze"
           restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngdart-ngforms-ngrouter-ngtest
+            os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngforms-ngrouter-ngtest
             os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0
             os:ubuntu-latest;pub-cache-hosted
             os:ubuntu-latest
@@ -79,15 +79,6 @@ jobs:
         run: dart analyze --fatal-infos .
         if: "always() && steps.ngcompiler_pub_upgrade.conclusion == 'success'"
         working-directory: ngcompiler
-      - id: ngdart_pub_upgrade
-        name: ngdart; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngdart
-      - name: "ngdart; dart analyze --fatal-infos ."
-        run: dart analyze --fatal-infos .
-        if: "always() && steps.ngdart_pub_upgrade.conclusion == 'success'"
-        working-directory: ngdart
       - id: ngforms_pub_upgrade
         name: ngforms; dart pub upgrade
         run: dart pub upgrade
@@ -118,16 +109,16 @@ jobs:
     needs:
       - job_001
   job_003:
-    name: "analyze; Dart 3.1.0; PKGS: ngast, ngcompiler, ngdart, ngforms, ngrouter, ngtest; `dart format --output=none --set-exit-if-changed .`"
+    name: "analyze; Dart 3.1.0; PKGS: ngast, ngcompiler, ngforms, ngrouter, ngtest; `dart format --output=none --set-exit-if-changed .`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
         uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84
         with:
           path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngdart-ngforms-ngrouter-ngtest;commands:format"
+          key: "os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngforms-ngrouter-ngtest;commands:format"
           restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngdart-ngforms-ngrouter-ngtest
+            os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0;packages:ngast-ngcompiler-ngforms-ngrouter-ngtest
             os:ubuntu-latest;pub-cache-hosted;sdk:3.1.0
             os:ubuntu-latest;pub-cache-hosted
             os:ubuntu-latest
@@ -156,15 +147,6 @@ jobs:
         run: "dart format --output=none --set-exit-if-changed ."
         if: "always() && steps.ngcompiler_pub_upgrade.conclusion == 'success'"
         working-directory: ngcompiler
-      - id: ngdart_pub_upgrade
-        name: ngdart; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngdart
-      - name: "ngdart; dart format --output=none --set-exit-if-changed ."
-        run: "dart format --output=none --set-exit-if-changed ."
-        if: "always() && steps.ngdart_pub_upgrade.conclusion == 'success'"
-        working-directory: ngdart
       - id: ngforms_pub_upgrade
         name: ngforms; dart pub upgrade
         run: dart pub upgrade
@@ -195,6 +177,70 @@ jobs:
     needs:
       - job_001
   job_004:
+    name: "analyze; Dart 3.3.0; PKG: ngdart; `dart analyze --fatal-infos .`"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cache Pub hosted dependencies
+        uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84
+        with:
+          path: "~/.pub-cache/hosted"
+          key: "os:ubuntu-latest;pub-cache-hosted;sdk:3.3.0;packages:ngdart;commands:analyze"
+          restore-keys: |
+            os:ubuntu-latest;pub-cache-hosted;sdk:3.3.0;packages:ngdart
+            os:ubuntu-latest;pub-cache-hosted;sdk:3.3.0
+            os:ubuntu-latest;pub-cache-hosted
+            os:ubuntu-latest
+      - name: Setup Dart SDK
+        uses: dart-lang/setup-dart@b64355ae6ca0b5d484f0106a033dd1388965d06d
+        with:
+          sdk: "3.3.0"
+      - id: checkout
+        name: Checkout repository
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+      - id: ngdart_pub_upgrade
+        name: ngdart; dart pub upgrade
+        run: dart pub upgrade
+        if: "always() && steps.checkout.conclusion == 'success'"
+        working-directory: ngdart
+      - name: "ngdart; dart analyze --fatal-infos ."
+        run: dart analyze --fatal-infos .
+        if: "always() && steps.ngdart_pub_upgrade.conclusion == 'success'"
+        working-directory: ngdart
+    needs:
+      - job_001
+  job_005:
+    name: "analyze; Dart 3.3.0; PKG: ngdart; `dart format --output=none --set-exit-if-changed .`"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cache Pub hosted dependencies
+        uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84
+        with:
+          path: "~/.pub-cache/hosted"
+          key: "os:ubuntu-latest;pub-cache-hosted;sdk:3.3.0;packages:ngdart;commands:format"
+          restore-keys: |
+            os:ubuntu-latest;pub-cache-hosted;sdk:3.3.0;packages:ngdart
+            os:ubuntu-latest;pub-cache-hosted;sdk:3.3.0
+            os:ubuntu-latest;pub-cache-hosted
+            os:ubuntu-latest
+      - name: Setup Dart SDK
+        uses: dart-lang/setup-dart@b64355ae6ca0b5d484f0106a033dd1388965d06d
+        with:
+          sdk: "3.3.0"
+      - id: checkout
+        name: Checkout repository
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+      - id: ngdart_pub_upgrade
+        name: ngdart; dart pub upgrade
+        run: dart pub upgrade
+        if: "always() && steps.checkout.conclusion == 'success'"
+        working-directory: ngdart
+      - name: "ngdart; dart format --output=none --set-exit-if-changed ."
+        run: "dart format --output=none --set-exit-if-changed ."
+        if: "always() && steps.ngdart_pub_upgrade.conclusion == 'success'"
+        working-directory: ngdart
+    needs:
+      - job_001
+  job_006:
     name: "analyze; Dart dev; PKGS: ngast, ngcompiler, ngdart, ngforms, ngrouter, ngtest; `dart analyze --fatal-infos .`"
     runs-on: ubuntu-latest
     steps:
@@ -271,7 +317,7 @@ jobs:
         working-directory: ngtest
     needs:
       - job_001
-  job_005:
+  job_007:
     name: "analyze; Dart stable; PKGS: ngast, ngcompiler, ngdart, ngforms, ngrouter, ngtest; `dart analyze --fatal-infos .`"
     runs-on: ubuntu-latest
     steps:
@@ -348,7 +394,7 @@ jobs:
         working-directory: ngtest
     needs:
       - job_001
-  job_006:
+  job_008:
     name: "build; Dart 3.1.0; PKG: _tests; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -384,7 +430,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_007:
+      - job_006
+      - job_007
+  job_009:
     name: "build; Dart 3.1.0; PKG: ngforms; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -420,7 +468,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_008:
+      - job_006
+      - job_007
+  job_010:
     name: "build; Dart 3.1.0; PKG: ngrouter; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -456,7 +506,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_009:
+      - job_006
+      - job_007
+  job_011:
     name: "build; Dart 3.1.0; PKG: ngtest; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -492,7 +544,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_010:
+      - job_006
+      - job_007
+  job_012:
     name: "build; Dart dev; PKG: _tests; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -528,7 +582,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_011:
+      - job_006
+      - job_007
+  job_013:
     name: "build; Dart dev; PKG: ngforms; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -564,7 +620,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_012:
+      - job_006
+      - job_007
+  job_014:
     name: "build; Dart dev; PKG: ngrouter; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -600,7 +658,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_013:
+      - job_006
+      - job_007
+  job_015:
     name: "build; Dart dev; PKG: ngtest; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -636,7 +696,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_014:
+      - job_006
+      - job_007
+  job_016:
     name: "build; Dart stable; PKG: _tests; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -672,7 +734,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_015:
+      - job_006
+      - job_007
+  job_017:
     name: "build; Dart stable; PKG: ngforms; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -708,7 +772,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_016:
+      - job_006
+      - job_007
+  job_018:
     name: "build; Dart stable; PKG: ngrouter; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -744,7 +810,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_017:
+      - job_006
+      - job_007
+  job_019:
     name: "build; Dart stable; PKG: ngtest; `dart run build_runner build --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
@@ -780,7 +848,9 @@ jobs:
       - job_003
       - job_004
       - job_005
-  job_018:
+      - job_006
+      - job_007
+  job_020:
     name: "unit_test; Dart 3.1.0; PKG: _tests; `dart run build_runner test --fail-on-severe -- -P browser`"
     runs-on: ubuntu-latest
     steps:
@@ -828,7 +898,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_019:
+      - job_018
+      - job_019
+  job_021:
     name: "unit_test; Dart 3.1.0; PKG: _tests; `dart test -P vm`"
     runs-on: ubuntu-latest
     steps:
@@ -876,7 +948,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_020:
+      - job_018
+      - job_019
+  job_022:
     name: "unit_test; Dart 3.1.0; PKG: ngast; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -924,7 +998,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_021:
+      - job_018
+      - job_019
+  job_023:
     name: "unit_test; Dart 3.1.0; PKG: ngcompiler; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -972,7 +1048,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_022:
+      - job_018
+      - job_019
+  job_024:
     name: "unit_test; Dart 3.1.0; PKG: ngforms; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1020,7 +1098,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_023:
+      - job_018
+      - job_019
+  job_025:
     name: "unit_test; Dart 3.1.0; PKG: ngrouter; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1068,7 +1148,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_024:
+      - job_018
+      - job_019
+  job_026:
     name: "unit_test; Dart 3.1.0; PKG: ngtest; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1116,7 +1198,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_025:
+      - job_018
+      - job_019
+  job_027:
     name: "unit_test; Dart dev; PKG: _tests; `dart run build_runner test --fail-on-severe -- -P browser`"
     runs-on: ubuntu-latest
     steps:
@@ -1164,7 +1248,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_026:
+      - job_018
+      - job_019
+  job_028:
     name: "unit_test; Dart dev; PKG: _tests; `dart test -P vm`"
     runs-on: ubuntu-latest
     steps:
@@ -1212,7 +1298,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_027:
+      - job_018
+      - job_019
+  job_029:
     name: "unit_test; Dart dev; PKG: ngast; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1260,7 +1348,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_028:
+      - job_018
+      - job_019
+  job_030:
     name: "unit_test; Dart dev; PKG: ngcompiler; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1308,7 +1398,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_029:
+      - job_018
+      - job_019
+  job_031:
     name: "unit_test; Dart dev; PKG: ngforms; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1356,7 +1448,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_030:
+      - job_018
+      - job_019
+  job_032:
     name: "unit_test; Dart dev; PKG: ngrouter; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1404,7 +1498,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_031:
+      - job_018
+      - job_019
+  job_033:
     name: "unit_test; Dart dev; PKG: ngtest; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1452,7 +1548,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_032:
+      - job_018
+      - job_019
+  job_034:
     name: "unit_test; Dart stable; PKG: _tests; `dart run build_runner test --fail-on-severe -- -P browser`"
     runs-on: ubuntu-latest
     steps:
@@ -1500,7 +1598,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_033:
+      - job_018
+      - job_019
+  job_035:
     name: "unit_test; Dart stable; PKG: _tests; `dart test -P vm`"
     runs-on: ubuntu-latest
     steps:
@@ -1548,7 +1648,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_034:
+      - job_018
+      - job_019
+  job_036:
     name: "unit_test; Dart stable; PKG: ngast; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1596,7 +1698,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_035:
+      - job_018
+      - job_019
+  job_037:
     name: "unit_test; Dart stable; PKG: ngcompiler; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1644,7 +1748,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_036:
+      - job_018
+      - job_019
+  job_038:
     name: "unit_test; Dart stable; PKG: ngforms; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1692,7 +1798,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_037:
+      - job_018
+      - job_019
+  job_039:
     name: "unit_test; Dart stable; PKG: ngrouter; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1740,7 +1848,9 @@ jobs:
       - job_015
       - job_016
       - job_017
-  job_038:
+      - job_018
+      - job_019
+  job_040:
     name: "unit_test; Dart stable; PKG: ngtest; `dart run build_runner test --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1788,3 +1898,5 @@ jobs:
       - job_015
       - job_016
       - job_017
+      - job_018
+      - job_019
diff --git a/.idea/runConfigurations/melos_bootstrap.xml b/.idea/runConfigurations/melos_bootstrap.xml
index d5715306fb..f040708433 100644
--- a/.idea/runConfigurations/melos_bootstrap.xml
+++ b/.idea/runConfigurations/melos_bootstrap.xml
@@ -2,7 +2,7 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="Melos -&gt; Bootstrap Workspace" type="ShConfigurationType">
     <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
-    <option name="SCRIPT_PATH" value="$USER_HOME$/.pub-cache/bin/melos" />
+    <option name="SCRIPT_PATH" value="$USER_HOME$/AppData/Local/Pub/Cache/bin/melos.bat" />
     <option name="SCRIPT_OPTIONS" value="bootstrap" />
     <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="false" />
     <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
diff --git a/.idea/runConfigurations/melos_clean.xml b/.idea/runConfigurations/melos_clean.xml
index f45d436249..452618ae5c 100644
--- a/.idea/runConfigurations/melos_clean.xml
+++ b/.idea/runConfigurations/melos_clean.xml
@@ -2,7 +2,7 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="Melos -&gt; Clean Workspace" type="ShConfigurationType">
     <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
-    <option name="SCRIPT_PATH" value="$USER_HOME$/.pub-cache/bin/melos" />
+    <option name="SCRIPT_PATH" value="$USER_HOME$/AppData/Local/Pub/Cache/bin/melos.bat" />
     <option name="SCRIPT_OPTIONS" value="clean" />
     <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="false" />
     <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..4ec39be75c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "cSpell.enabled": false
+}
\ No newline at end of file
diff --git a/_tests/lib/matchers.dart b/_tests/lib/matchers.dart
index 9309be769f..4cac98643e 100644
--- a/_tests/lib/matchers.dart
+++ b/_tests/lib/matchers.dart
@@ -1,7 +1,6 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 /// Matches textual content of an element including children.
 Matcher hasTextContent(String expected) => _HasTextContent(expected);
@@ -42,19 +41,19 @@ String? _elementText(Object? n) {
       return '';
     }
 
-    if (n is ContentElement) {
-      return _elementText(n.getDistributedNodes());
+    if (n is HTMLSlotElement) {
+      return _elementText(n.assignedNodes());
     }
 
     if (n is Element && n.shadowRoot != null) {
-      return _elementText(n.shadowRoot!.nodes);
+      return _elementText(n.shadowRoot!.childNodes);
     }
 
-    if (n.nodes.isNotEmpty) {
-      return _elementText(n.nodes);
+    if (n.childNodes.length > 0) {
+      return _elementText(n.childNodes);
     }
 
-    return n.text;
+    return n.textContent;
   } else {
     return '$n';
   }
diff --git a/_tests/pubspec.yaml b/_tests/pubspec.yaml
index 94ee886575..e756fc9288 100644
--- a/_tests/pubspec.yaml
+++ b/_tests/pubspec.yaml
@@ -10,14 +10,14 @@ dependencies:
   build_resolvers: ^2.4.1
   build_test: ^2.2.1
   collection: ^1.18.0
-  glob: ^2.1.2
-  js: ^0.6.7
+  glob: ^2.1.2  
   logging: ^1.2.0
   ngcompiler: ^3.0.0-dev.2
   ngdart: ^8.0.0-dev.3
   ngtest: ^5.0.0-dev.2
   source_gen: ^1.4.0
   test: ">=1.24.0 <1.25.0"
+  web: ^0.5.1
 
 dev_dependencies:
   analyzer: ^6.0.0
diff --git a/_tests/test/bootstrap/run_app_test.dart b/_tests/test/bootstrap/run_app_test.dart
index fcee2b14f2..9e41697b22 100644
--- a/_tests/test/bootstrap/run_app_test.dart
+++ b/_tests/test/bootstrap/run_app_test.dart
@@ -2,11 +2,11 @@
 library angular.test.bootstrap.run_app_test;
 
 import 'dart:async';
-import 'dart:html';
+import 'dart:js_interop';
 
-import 'package:js/js.dart';
 import 'package:ngdart/angular.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'run_app_test.template.dart' as ng;
 
@@ -27,9 +27,10 @@ void main() {
 
   /// Verify that the DOM of the page represents the component.
   void verifyDomAndStyles({String innerText = 'Hello World!'}) {
-    expect(rootDomContainer.text, innerText);
+    expect(rootDomContainer.textContent, innerText);
     final h1 = rootDomContainer.querySelector('h1');
-    expect(h1!.getComputedStyle().height, '100px');
+
+    expect(window.getComputedStyle(h1).height, '100px');
   }
 
   /// Verify the `Testability` interface is working for this application.
@@ -38,21 +39,21 @@ void main() {
   void verifyTestability() {
     expect(component.injector.get(Testability), isNotNull);
     var jsTestability = getAngularTestability(
-      rootDomContainer.children.first,
+      rootDomContainer.children.item(0),
     );
     expect(getAllAngularTestabilities(), isNot(hasLength(0)));
     expect(jsTestability.isStable(), isTrue, reason: 'Expected stability');
-    jsTestability.whenStable(allowInterop(expectAsync0(() {
+    jsTestability.whenStable((expectAsync0(() {
       Future(expectAsync0(() {
         verifyDomAndStyles(innerText: 'Hello Universe!');
       }));
-    })));
+    })).toJS);
     runInApp(() => HelloWorldComponent.doAsyncTaskAndThenRename('Universe'));
   }
 
   setUp(() {
-    rootDomContainer = DivElement()..id = 'test-root-dom';
-    rootDomContainer.append(Element.tag('hello-world'));
+    rootDomContainer = HTMLDivElement()..id = 'test-root-dom';
+    rootDomContainer.append(document.createElement('hello-world'));
     document.body!.append(rootDomContainer);
     HelloWorldComponent.name = 'World';
   });
diff --git a/_tests/test/common/directives/for_test.dart b/_tests/test/common/directives/for_test.dart
index b881721920..e1cffb62d1 100644
--- a/_tests/test/common/directives/for_test.dart
+++ b/_tests/test/common/directives/for_test.dart
@@ -380,8 +380,8 @@ void main() {
           ];
         });
         var endElements = testFixture.rootElement.querySelectorAll('p');
-        expect(startElements[0], endElements[1]);
-        expect(startElements[1], endElements[0]);
+        expect(startElements.item(0), endElements.item(1));
+        expect(startElements.item(1), endElements.item(0));
       });
 
       test(
diff --git a/_tests/test/common/directives/if_test.dart b/_tests/test/common/directives/if_test.dart
index 956a8b7028..27f36397cf 100644
--- a/_tests/test/common/directives/if_test.dart
+++ b/_tests/test/common/directives/if_test.dart
@@ -15,7 +15,7 @@ void main() {
       var testFixture = await testBed.create();
       var element = testFixture.rootElement;
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml, contains('hello2'));
+      expect(element.innerHTML, contains('hello2'));
     });
 
     test('should toggle node when condition changes', () async {
@@ -50,31 +50,31 @@ void main() {
         component.booleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect(element.innerHTML.contains('hello'), false);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.booleanCondition = true;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml!.contains('hello'), true);
+      expect(element.innerHTML.contains('hello'), true);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.nestedBooleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect(element.innerHTML.contains('hello'), false);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.nestedBooleanCondition = true;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml!.contains('hello'), true);
+      expect(element.innerHTML.contains('hello'), true);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.booleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect(element.innerHTML.contains('hello'), false);
     });
 
     test('should update multiple bindings', () async {
@@ -84,20 +84,20 @@ void main() {
       var element = testFixture.rootElement;
       // Check startup.
       expect(element.querySelectorAll('copy-me'), hasLength(3));
-      expect(element.text, 'helloNumberhelloStringhelloFunction');
+      expect(element.textContent, 'helloNumberhelloStringhelloFunction');
 
       await testFixture.update((NgIfMultiUpdateTestComponent component) {
         component.numberCondition = 0;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.text, 'helloString');
+      expect(element.textContent, 'helloString');
 
       await testFixture.update((NgIfMultiUpdateTestComponent component) {
         component.numberCondition = 1;
         component.stringCondition = 'bar';
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.text, 'helloNumber');
+      expect(element.textContent, 'helloNumber');
       await testFixture.update((NgIfMultiUpdateTestComponent component) {
         component.booleanCondition = false;
       });
diff --git a/_tests/test/common/directives/ng_class_test.dart b/_tests/test/common/directives/ng_class_test.dart
index 1692a5753b..5a9f88bab8 100644
--- a/_tests/test/common/directives/ng_class_test.dart
+++ b/_tests/test/common/directives/ng_class_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'ng_class_test.template.dart' as ng;
 
@@ -25,7 +24,7 @@ void main() {
         ];
       });
       expect(
-        testFixture.rootElement.querySelector('div')!.classes,
+        testFixture.rootElement.querySelector('div')!.classList.asIterable(),
         equals(['1']),
       );
     });
@@ -35,7 +34,7 @@ void main() {
       var testBed = NgTestBed<ClassWithNames>(ng.createClassWithNamesFactory());
       var testFixture = await testBed.create();
       expect(
-        testFixture.rootElement.querySelector('div')!.classes,
+        testFixture.rootElement.querySelector('div')!.classList.asIterable(),
         equals(['foo-bar', 'fooBar']),
       );
     });
@@ -45,30 +44,30 @@ void main() {
           NgTestBed<ConditionMapTest>(ng.createConditionMapTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((ConditionMapTest component) {
         component.condition = false;
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList.asIterable(), equals(['bar']));
     });
 
     test('should update classes based on changes to the map', () async {
       var testBed = NgTestBed<MapUpdateTest>(ng.createMapUpdateTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((MapUpdateTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar']));
       await testFixture.update((MapUpdateTest component) {
         component.map!['baz'] = true;
       });
-      expect(content.classes, equals(['foo', 'bar', 'baz']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar', 'baz']));
       await testFixture.update((MapUpdateTest component) {
         component.map!.remove('bar');
       });
-      expect(content.classes, equals(['foo', 'baz']));
+      expect(content.classList.asIterable(), equals(['foo', 'baz']));
     });
 
     test('should update classes based on reference changes to the map',
@@ -76,30 +75,30 @@ void main() {
       var testBed = NgTestBed<MapUpdateTest>(ng.createMapUpdateTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'foo': true, 'bar': true};
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar']));
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'baz': true};
       });
-      expect(content.classes, equals(['baz']));
+      expect(content.classList.asIterable(), equals(['baz']));
     });
 
     test('should remove classes when expression is null', () async {
       var testBed = NgTestBed<MapUpdateTest>(ng.createMapUpdateTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((MapUpdateTest component) {
         component.map = null;
       });
-      expect(content.classes, isEmpty);
+      expect(content.classList.asIterable(), isEmpty);
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'foo': false, 'bar': true};
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList.asIterable(), equals(['bar']));
     });
 
     test('should allow multiple classes per expression', () async {
@@ -109,11 +108,12 @@ void main() {
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'bar baz': true, 'bar1 baz1': true};
       });
-      expect(content.classes, equals(['bar', 'baz', 'bar1', 'baz1']));
+      expect(content.classList.asIterable(),
+          equals(['bar', 'baz', 'bar1', 'baz1']));
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'bar baz': false, 'bar1 baz1': true};
       });
-      expect(content.classes, equals(['bar1', 'baz1']));
+      expect(content.classList.asIterable(), equals(['bar1', 'baz1']));
     });
 
     test('should split by one or more spaces between classes', () async {
@@ -123,37 +123,37 @@ void main() {
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'foo bar     baz': true};
       });
-      expect(content.classes, equals(['foo', 'bar', 'baz']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar', 'baz']));
     });
 
     test('should update classes based on changes to the list', () async {
       var testBed = NgTestBed<ListUpdateTest>(ng.createListUpdateTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((ListUpdateTest component) {
         component.list.add('bar');
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar']));
       await testFixture.update((ListUpdateTest component) {
         component.list[1] = 'baz';
       });
-      expect(content.classes, equals(['foo', 'baz']));
+      expect(content.classList.asIterable(), equals(['foo', 'baz']));
       await testFixture.update((ListUpdateTest component) {
         component.list.remove('baz');
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
     });
 
     test('should update classes when list reference changes', () async {
       var testBed = NgTestBed<ListUpdateTest>(ng.createListUpdateTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((ListUpdateTest component) {
         component.list = ['bar'];
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList.asIterable(), equals(['bar']));
     });
 
     test('should take initial classes into account when a reference changes',
@@ -162,11 +162,11 @@ void main() {
           ng.createListUpdateWithInitialTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((ListUpdateWithInitialTest component) {
         component.list = ['bar'];
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar']));
     });
 
     test('should ignore empty or blank class names', () async {
@@ -177,7 +177,7 @@ void main() {
       await testFixture.update((ListUpdateWithInitialTest component) {
         component.list = ['', '  '];
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
     });
 
     test('should trim blanks from class names', () async {
@@ -188,7 +188,7 @@ void main() {
       await testFixture.update((ListUpdateWithInitialTest component) {
         component.list = [' bar  '];
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar']));
     });
 
     test('should allow multiple classes per item in lists', () async {
@@ -198,12 +198,13 @@ void main() {
       await testFixture.update((ListUpdateTest component) {
         component.list = ['foo bar baz', 'foo1 bar1   baz1'];
       });
-      expect(content.classes,
+      expect(content.classList.asIterable(),
           equals(['foo', 'bar', 'baz', 'foo1', 'bar1', 'baz1']));
       await testFixture.update((ListUpdateTest component) {
         component.list = ['foo bar   baz foobar'];
       });
-      expect(content.classes, equals(['foo', 'bar', 'baz', 'foobar']));
+      expect(content.classList.asIterable(),
+          equals(['foo', 'bar', 'baz', 'foobar']));
     });
 
     test('should update classes if the set instance changes', () async {
@@ -215,13 +216,13 @@ void main() {
       await testFixture.update((SetUpdateTest component) {
         component.set = set;
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList.asIterable(), equals(['bar']));
       set = <String>{};
       set.add('baz');
       await testFixture.update((SetUpdateTest component) {
         component.set = set;
       });
-      expect(content.classes, equals(['baz']));
+      expect(content.classList.asIterable(), equals(['baz']));
     });
 
     test('should add classes specified in a string literal', () async {
@@ -229,7 +230,8 @@ void main() {
           NgTestBed<StringLiteralTest>(ng.createStringLiteralTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo', 'bar', 'foo-bar', 'fooBar']));
+      expect(content.classList.asIterable(),
+          equals(['foo', 'bar', 'foo-bar', 'fooBar']));
     });
 
     test('should update classes based on changes to the string', () async {
@@ -237,15 +239,15 @@ void main() {
           NgTestBed<StringUpdateTest>(ng.createStringUpdateTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((StringUpdateTest component) {
         component.string = 'foo bar';
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['foo', 'bar']));
       await testFixture.update((StringUpdateTest component) {
         component.string = 'baz';
       });
-      expect(content.classes, equals(['baz']));
+      expect(content.classList.asIterable(), equals(['baz']));
     });
 
     test('should remove active classes when switching from string to null',
@@ -254,11 +256,11 @@ void main() {
           NgTestBed<StringUpdateTest>(ng.createStringUpdateTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((StringUpdateTest component) {
         component.string = null;
       });
-      expect(content.classes, isEmpty);
+      expect(content.classList.asIterable(), isEmpty);
     });
 
     test(
@@ -268,11 +270,11 @@ void main() {
           ng.createStringUpdateWithInitialTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture.update((StringUpdateWithInitialTest component) {
         component.string = null;
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
     });
 
     test('should ignore empty and blank strings', () async {
@@ -283,7 +285,7 @@ void main() {
       await testFixture.update((StringUpdateWithInitialTest component) {
         component.string = '';
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
     });
 
     test('should cooperate with the class attribute', () async {
@@ -294,15 +296,15 @@ void main() {
       await testFixture.update((MapUpdateWithInitialTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'foo', 'bar']));
       await testFixture.update((MapUpdateWithInitialTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'bar']));
       await testFixture.update((MapUpdateWithInitialTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList.asIterable(), equals(['init', 'foo']));
     });
 
     test('should cooperate with interpolated class attribute', () async {
@@ -314,17 +316,17 @@ void main() {
           .update((MapUpdateWithInitialInterpolationTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'foo', 'bar']));
       await testFixture
           .update((MapUpdateWithInitialInterpolationTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'bar']));
       await testFixture
           .update((MapUpdateWithInitialInterpolationTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList.asIterable(), equals(['init', 'foo']));
     });
 
     test('should cooperate with class attribute and binding to it', () async {
@@ -335,15 +337,15 @@ void main() {
       await testFixture.update((MapUpdateWithInitialBindingTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'foo', 'bar']));
       await testFixture.update((MapUpdateWithInitialBindingTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'bar']));
       await testFixture.update((MapUpdateWithInitialBindingTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList.asIterable(), equals(['init', 'foo']));
     });
 
     test('should cooperate with class attribute and class.name binding',
@@ -352,19 +354,20 @@ void main() {
           ng.createMapUpdateWithConditionBindingTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['init', 'foo', 'baz']));
+      expect(content.classList.asIterable(), equals(['init', 'foo', 'baz']));
       await testFixture.update((MapUpdateWithConditionBindingTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'baz', 'bar']));
+      expect(content.classList.asIterable(),
+          equals(['init', 'foo', 'baz', 'bar']));
       await testFixture.update((MapUpdateWithConditionBindingTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'baz', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'baz', 'bar']));
       await testFixture.update((MapUpdateWithConditionBindingTest component) {
         component.condition = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'bar']));
     });
 
     test(
@@ -374,19 +377,20 @@ void main() {
           ng.createMapUpdateWithStringBindingTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList.asIterable(), equals(['init', 'foo']));
       await testFixture.update((MapUpdateWithStringBindingTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList.asIterable(), equals(['init', 'foo', 'bar']));
       await testFixture.update((MapUpdateWithStringBindingTest component) {
         component.string = 'baz';
       });
-      expect(content.classes, equals(['init', 'bar', 'baz', 'foo']));
+      expect(content.classList.asIterable(),
+          equals(['init', 'bar', 'baz', 'foo']));
       await testFixture.update((MapUpdateWithStringBindingTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'baz']));
+      expect(content.classList.asIterable(), equals(['init', 'baz']));
     });
 
     test(
@@ -396,17 +400,17 @@ void main() {
           ng.createInterpolationWithConditionBindingTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo', 'baz']));
+      expect(content.classList.asIterable(), equals(['foo', 'baz']));
       await testFixture
           .update((InterpolationWithConditionBindingTest component) {
         component.condition = false;
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList.asIterable(), equals(['foo']));
       await testFixture
           .update((InterpolationWithConditionBindingTest component) {
         component.condition = true;
       });
-      expect(content.classes, equals(['foo', 'baz']));
+      expect(content.classList.asIterable(), equals(['foo', 'baz']));
     });
   });
 
@@ -682,7 +686,11 @@ class InterpolationWithConditionBindingTest extends Base {}
 
 extension _SumCssClasses on Element {
   Iterable<String> get allCssClasses {
-    return querySelectorAll('*').map((e) => e.classes).expand((c) => c);
+    return querySelectorAll('*')
+        .asIterable()
+        .whereType<Element>()
+        .map((e) => e.classList.asIterable())
+        .expand((c) => c);
   }
 }
 
diff --git a/_tests/test/common/directives/ng_style_test.dart b/_tests/test/common/directives/ng_style_test.dart
index 756dff719b..acc4a4bedb 100644
--- a/_tests/test/common/directives/ng_style_test.dart
+++ b/_tests/test/common/directives/ng_style_test.dart
@@ -1,7 +1,7 @@
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
-
+import 'package:web/web.dart';
 import 'ng_style_test.template.dart' as ng;
 
 void main() {
@@ -11,7 +11,8 @@ void main() {
     test('should update styles specified in an map literal', () async {
       var testBed = NgTestBed<MapUpdateTest>(ng.createMapUpdateTestFactory());
       var testFixture = await testBed.create();
-      var content = testFixture.rootElement.querySelector('div')!;
+      var content =
+          testFixture.rootElement.querySelector('div')! as HTMLElement;
       await testFixture.update((MapUpdateTest component) {
         component.map = {'max-width': '40px'};
       });
@@ -25,7 +26,8 @@ void main() {
     test('should remove styles when deleting a key in a map literal', () async {
       var testBed = NgTestBed<MapUpdateTest>(ng.createMapUpdateTestFactory());
       var testFixture = await testBed.create();
-      var content = testFixture.rootElement.querySelector('div')!;
+      var content =
+          testFixture.rootElement.querySelector('div')! as HTMLElement;
       await testFixture.update((MapUpdateTest component) {
         component.map = {'max-width': '40px'};
       });
@@ -40,7 +42,8 @@ void main() {
       var testBed = NgTestBed<MapUpdateWithDefaultTest>(
           ng.createMapUpdateWithDefaultTestFactory());
       var testFixture = await testBed.create();
-      var content = testFixture.rootElement.querySelector('div')!;
+      var content =
+          testFixture.rootElement.querySelector('div')! as HTMLElement;
       await testFixture.update((MapUpdateWithDefaultTest component) {
         component.map = {'max-width': '40px'};
       });
@@ -58,7 +61,8 @@ void main() {
       var testBed = NgTestBed<MapUpdateWithStyleExprTest>(
           ng.createMapUpdateWithStyleExprTestFactory());
       var testFixture = await testBed.create();
-      var content = testFixture.rootElement.querySelector('div')!;
+      var content =
+          testFixture.rootElement.querySelector('div')! as HTMLElement;
       await testFixture.update((MapUpdateWithStyleExprTest component) {
         component.map = {'max-width': '40px'};
       });
diff --git a/_tests/test/compiler_integration/invalid_late_fields_test.dart b/_tests/test/compiler_integration/invalid_late_fields_test.dart
index 01ea076e08..de0c2e166f 100644
--- a/_tests/test/compiler_integration/invalid_late_fields_test.dart
+++ b/_tests/test/compiler_integration/invalid_late_fields_test.dart
@@ -24,7 +24,7 @@ void main() {
 
   test('should refuse to compile non-nullable single child query', () async {
     await compilesExpecting("""
-      import 'dart:html';
+      import 'package:web/web.dart';
       import '$ngImport';
 
       @Component(
@@ -42,7 +42,7 @@ void main() {
 
   test('should refuse to compile late fields with a child query', () async {
     await compilesExpecting("""
-      import 'dart:html';
+      import 'package:web/web.dart';
       import '$ngImport';
 
       @Component(
@@ -60,7 +60,7 @@ void main() {
 
   test('should refuse to compile late fields with a children query', () async {
     await compilesExpecting("""
-      import 'dart:html';
+      import 'package:web/web.dart';
       import '$ngImport';
 
       @Component(
@@ -78,7 +78,7 @@ void main() {
 
   test('should compile non-nullable fields with a children query', () async {
     await compilesNormally("""
-      import 'dart:html';
+      import 'package:web/web.dart';
       import '$ngImport';
 
       @Component(
diff --git a/_tests/test/core/application_ref_test.dart b/_tests/test/core/application_ref_test.dart
index 13a68cd6b8..ed77d42f47 100644
--- a/_tests/test/core/application_ref_test.dart
+++ b/_tests/test/core/application_ref_test.dart
@@ -1,11 +1,11 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/application_ref.dart';
 import 'package:ngdart/src/core/linker/app_view_utils.dart';
 import 'package:ngdart/src/runtime/dom_events.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'application_ref_test.template.dart' as ng;
 
@@ -55,11 +55,12 @@ void main() {
 
   group('bootstrap should', () {
     test('replace an existing element if in the DOM', () {
-      final existing = Element.tag('hello-component')..text = 'Loading...';
+      final existing = document.createElement('hello-component')
+        ..textContent = 'Loading...';
       document.body!.append(existing);
       final comp =
           appRef.bootstrap<HelloComponent>(ng.createHelloComponentFactory());
-      expect(comp.location.text, 'Hello World');
+      expect(comp.location.textContent, 'Hello World');
       expect(
         document.body!.querySelector('hello-component'),
         same(comp.location),
@@ -69,7 +70,7 @@ void main() {
     test('create a new element if missing from the DOM', () {
       final comp =
           appRef.bootstrap<HelloComponent>(ng.createHelloComponentFactory());
-      expect(comp.location.text, 'Hello World');
+      expect(comp.location.textContent, 'Hello World');
       expect(
         document.body!.querySelector('hello-component'),
         same(comp.location),
diff --git a/_tests/test/core/change_detection/detect_host_changes_test.dart b/_tests/test/core/change_detection/detect_host_changes_test.dart
index 6d349e1c1a..c6b4740612 100644
--- a/_tests/test/core/change_detection/detect_host_changes_test.dart
+++ b/_tests/test/core/change_detection/detect_host_changes_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'detect_host_changes_test.template.dart' as ng;
 
@@ -19,8 +18,9 @@ void main() {
     var testBed = NgTestBed<TestContainer>(ng.createTestContainerFactory());
     var testRoot = await testBed.create();
     var targetElement = testRoot.rootElement.querySelector('.mytarget')!;
-    expect(targetElement.firstChild!.text, 'ChildHello');
-    expect(targetElement.attributes['data-xyz'], 'abc');
+    expect(targetElement.firstChild!.textContent, 'ChildHello');
+    expect(
+        targetElement.attributes.getNamedItem('data-xyz')!.textContent, 'abc');
   });
 }
 
@@ -58,5 +58,5 @@ class SomeDirective {
   void handleClick(Event e) {}
 
   @HostListener('keypress')
-  void handleKeyPress(KeyEvent e) {}
+  void handleKeyPress(KeyboardEvent e) {}
 }
diff --git a/_tests/test/core/change_detection/on_push_embedded_view_test.dart b/_tests/test/core/change_detection/on_push_embedded_view_test.dart
index 48ec96ad90..189b6bf182 100644
--- a/_tests/test/core/change_detection/on_push_embedded_view_test.dart
+++ b/_tests/test/core/change_detection/on_push_embedded_view_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'on_push_embedded_view_test.template.dart' as ng;
 
@@ -39,25 +38,27 @@ void main() {
     test('when embedded within the OnPush component of origin', () async {
       final component = fixture.assertOnlyInstance;
 
-      expect(component.templateProducer!.text, isEmpty);
+      expect(component.templateProducer!.textContent, isEmpty);
 
       await fixture.update((component) {
         component.templateText = 'Hello template!';
       });
 
-      expect(component.templateProducer!.text, contains('Hello template!'));
+      expect(
+          component.templateProducer!.textContent, contains('Hello template!'));
 
       await fixture.update((component) {
         component.templateText = 'Goodbye template!';
       });
 
-      expect(component.templateProducer!.text, contains('Goodbye template!'));
+      expect(component.templateProducer!.textContent,
+          contains('Goodbye template!'));
     });
 
     test('when embedded within a separate OnPush component', () async {
       final component = fixture.assertOnlyInstance;
 
-      expect(component.templateConsumer!.text, isEmpty);
+      expect(component.templateConsumer!.textContent, isEmpty);
 
       await fixture.update((component) {
         component.templateText = 'Hello template!';
@@ -67,7 +68,7 @@ void main() {
       // views to be updated. Any templates that originated within its view that
       // are embedded in a foreign OnPush view don't receive these changes.
       expect(
-        component.templateConsumer!.text,
+        component.templateConsumer!.textContent,
         contains('Hello template!'),
         skip: 'b/130433627',
       );
@@ -79,13 +80,14 @@ void main() {
       // The above change that was previously expected is now observed in the
       // template embedded in a foreign view container with an OnPush parent.
       expect(
-        component.templateConsumer!.text,
+        component.templateConsumer!.textContent,
         contains('Hello template!'),
         reason: 'Unrelated change to view container parent triggers change '
             'detection of nested views which delivers an old change from the '
             'template parent to the embedded view.',
       );
-      expect(component.templateConsumer!.text, contains('Hello consumer!'));
+      expect(
+          component.templateConsumer!.textContent, contains('Hello consumer!'));
     });
   });
 }
diff --git a/_tests/test/core/directive_inheritance_test.dart b/_tests/test/core/directive_inheritance_test.dart
index 696e9c61a6..05a637153e 100644
--- a/_tests/test/core/directive_inheritance_test.dart
+++ b/_tests/test/core/directive_inheritance_test.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'directive_inheritance_test.template.dart' as ng;
 
diff --git a/_tests/test/core/event_handler_test.dart b/_tests/test/core/event_handler_test.dart
index d942fd34b9..ff6b66987e 100644
--- a/_tests/test/core/event_handler_test.dart
+++ b/_tests/test/core/event_handler_test.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'event_handler_test.template.dart' as ng;
 
@@ -55,7 +55,7 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button')! as HTMLElement).click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -66,7 +66,7 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button')! as HTMLElement).click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -77,7 +77,7 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button')! as HTMLElement).click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -88,7 +88,7 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLElement).click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -99,7 +99,7 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLElement).click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -110,7 +110,7 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLElement).click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -123,7 +123,7 @@ void main() {
     final fixture = await testBed.create();
     overrideTopLevelDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLElement).click();
     });
   }, skip: 'https://github.com/angulardart/angular/issues/1670');
 
@@ -134,7 +134,7 @@ void main() {
     final fixture = await testBed.create();
     overrideTopLevelDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLElement).click();
     });
   });
 
@@ -145,7 +145,7 @@ void main() {
     final fixture = await testBed.create();
     TestStaticMethods.overrideDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLElement).click();
     });
   });
 
@@ -156,7 +156,7 @@ void main() {
     final fixture = await testBed.create();
     TestStaticMethodsDirect.overrideDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLElement).click();
     });
   });
 
@@ -167,7 +167,7 @@ void main() {
     final fixture = await testBed.create();
     fixture.assertOnlyInstance.bar.overrideDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLElement).click();
     });
   }, skip: 'https://github.com/angulardart/angular/issues/1670');
 
@@ -178,7 +178,7 @@ void main() {
     final fixture = await testBed.create();
     fixture.assertOnlyInstance.bar.overrideDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLElement).click();
     });
   });
 
@@ -188,7 +188,7 @@ void main() {
         ng.createComponentWithHostEventThatThrowsFactory());
     final fixture = await testBed.create();
     expect(
-      fixture.update((_) => fixture.rootElement.click()),
+      fixture.update((_) => (fixture.rootElement as HTMLElement).click()),
       throwsIntentional,
     );
   });
diff --git a/_tests/test/core/exports_test.dart b/_tests/test/core/exports_test.dart
index 837a6df42d..ecad56e818 100644
--- a/_tests/test/core/exports_test.dart
+++ b/_tests/test/core/exports_test.dart
@@ -1,6 +1,7 @@
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'exports_statics.dart' as lib;
 import 'exports_statics.dart';
@@ -54,7 +55,7 @@ void main() {
       var testBed = NgTestBed<StaticEventHandlerTest>(
           ng.createStaticEventHandlerTestFactory());
       var fixture = await testBed.create();
-      var div = fixture.rootElement.querySelector('div')!;
+      var div = fixture.rootElement.querySelector('div')! as HTMLElement;
       clickHandled = false;
       await fixture.update((_) {
         div.click();
@@ -66,7 +67,7 @@ void main() {
       var testBed = NgTestBed<StaticEventHandlerTargetTest>(
           ng.createStaticEventHandlerTargetTestFactory());
       var fixture = await testBed.create();
-      var div = fixture.rootElement.querySelector('div')!;
+      var div = fixture.rootElement.querySelector('div')! as HTMLElement;
       MyClass.clickHandled = false;
       await fixture.update((_) {
         div.click();
@@ -78,7 +79,7 @@ void main() {
       var testBed = NgTestBed<StaticEventHandlerArgTest>(
           ng.createStaticEventHandlerArgTestFactory());
       var fixture = await testBed.create();
-      var div = fixture.rootElement.querySelector('div')!;
+      var div = fixture.rootElement.querySelector('div')! as HTMLElement;
       late List<Object> listArg;
       await fixture.update((StaticEventHandlerArgTest component) {
         component.clickHandler = (list) {
@@ -103,11 +104,11 @@ void main() {
       var testBed = NgTestBed<SelfReferHostBindingTest>(
           ng.createSelfReferHostBindingTestFactory());
       var fixture = await testBed.create();
-      expect(fixture.rootElement.title, 'hello');
+      expect((fixture.rootElement as HTMLElement).title, 'hello');
       await fixture.update((_) {
         SelfReferHostBindingTest.staticField = 'goodbye';
       });
-      expect(fixture.rootElement.title, 'goodbye');
+      expect((fixture.rootElement as HTMLElement).title, 'goodbye');
     });
 
     group('can be prefixed', () {
diff --git a/_tests/test/core/host_annotation_test.dart b/_tests/test/core/host_annotation_test.dart
index 92b9142996..59ac2ea739 100644
--- a/_tests/test/core/host_annotation_test.dart
+++ b/_tests/test/core/host_annotation_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'host_annotation_test.template.dart' as ng;
 
@@ -10,11 +9,13 @@ void main() {
   tearDown(disposeAnyRunningTest);
 
   /// Returns the root [Element] created by initializing [component].
-  Future<Element> rootElementOf<T extends Object>(
+  Future<HTMLElement> rootElementOf<T extends Object>(
     ComponentFactory<T> component,
   ) {
     final testBed = NgTestBed(component);
-    return testBed.create().then((fixture) => fixture.rootElement);
+    return testBed
+        .create()
+        .then((fixture) => fixture.rootElement as HTMLElement);
   }
 
   group('@HostBinding', () {
@@ -116,13 +117,13 @@ void main() {
       );
       final fixture = await testBed.create();
       final element = fixture.rootElement;
-      expect(element.classes, isNot(contains('fancy')));
+      expect(element.classList.asIterable(), isNot(contains('fancy')));
 
       await fixture.update((c) => c.fancy = true);
-      expect(element.classes, contains('fancy'));
+      expect(element.classList.asIterable(), contains('fancy'));
 
       await fixture.update((c) => c.fancy = false);
-      expect(element.classes, isNot(contains('fancy')));
+      expect(element.classList.asIterable(), isNot(contains('fancy')));
     });
 
     test('should support multiple annotations on a single field', () async {
@@ -139,7 +140,7 @@ void main() {
           NgTestBed<HostListenerClick>(ng.createHostListenerClickFactory());
       final fixture = await testBed.create();
       fixture.assertOnlyInstance.clickHandler = expectAsync0(() {});
-      await fixture.update((_) => fixture.rootElement.click());
+      await fixture.update((_) => (fixture.rootElement as HTMLElement).click());
     });
 
     test('should support click through inheritance', () async {
@@ -147,7 +148,7 @@ void main() {
           ng.createHostListenerInheritedClickFactory());
       final fixture = await testBed.create();
       fixture.assertOnlyInstance.clickHandler = expectAsync0(() {});
-      await fixture.update((_) => fixture.rootElement.click());
+      await fixture.update((_) => (fixture.rootElement as HTMLElement).click());
     });
 
     test('should support multiple annotations on a single field', () async {
diff --git a/_tests/test/core/i18n_escape_test.dart b/_tests/test/core/i18n_escape_test.dart
index 3896dfd2a2..0037545c6f 100644
--- a/_tests/test/core/i18n_escape_test.dart
+++ b/_tests/test/core/i18n_escape_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'i18n_escape_test.template.dart' as ng;
 
diff --git a/_tests/test/core/i18n_test.dart b/_tests/test/core/i18n_test.dart
index e3f54808c8..8af9f7f931 100644
--- a/_tests/test/core/i18n_test.dart
+++ b/_tests/test/core/i18n_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'i18n_test.template.dart' as ng;
 
@@ -32,7 +31,7 @@ void main() {
     final lineBreaks = testFixture.rootElement.querySelectorAll('br');
     expect(lineBreaks, hasLength(1));
     final strongElement = testFixture.rootElement.querySelector('strong')!;
-    expect(strongElement.text, 'emphasis!');
+    expect(strongElement.textContent, 'emphasis!');
   });
 
   test('should render message with unsafe HTML', () async {
@@ -57,7 +56,7 @@ void main() {
     final testFixture = await testBed.create();
     expect(testFixture.text, 'Italic, not <i>italic</i>.');
     final italicElement = testFixture.rootElement.querySelector('i')!;
-    expect(italicElement.text, 'Italic');
+    expect(italicElement.textContent, 'Italic');
   });
 
   // This test ensures none of our Intl.message() parameters are invalid.
diff --git a/_tests/test/core/linker/component_loader_test.dart b/_tests/test/core/linker/component_loader_test.dart
index 44de40109d..915daf0957 100644
--- a/_tests/test/core/linker/component_loader_test.dart
+++ b/_tests/test/core/linker/component_loader_test.dart
@@ -48,7 +48,7 @@ void main() {
           ng.createDynamicCompFactory(),
           injector: logInjector(comp.context),
         );
-        expect(ref.location.text, 'Dynamic');
+        expect(ref.location.textContent, 'Dynamic');
       });
     });
 
@@ -149,7 +149,7 @@ void main() {
           ng.createDynamicOnPushCompFactory(),
           injector: logInjector(comp.context),
         );
-        expect(ref.location.text, 'Dynamic');
+        expect(ref.location.textContent, 'Dynamic');
       });
     });
 
diff --git a/_tests/test/core/linker/component_selector_test.dart b/_tests/test/core/linker/component_selector_test.dart
index 766490f6fe..3d8e21dfc0 100644
--- a/_tests/test/core/linker/component_selector_test.dart
+++ b/_tests/test/core/linker/component_selector_test.dart
@@ -22,9 +22,9 @@ void main() {
           ng.createExactAttributeSelectorTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('[foo]')!.text, isEmpty);
-      expect(select('[foo=bar]')!.text, 'Matched!');
-      expect(select('[foo=barbaz]')!.text, isEmpty);
+      expect(select('[foo]')!.textContent, isEmpty);
+      expect(select('[foo=bar]')!.textContent, 'Matched!');
+      expect(select('[foo=barbaz]')!.textContent, isEmpty);
     });
 
     test('should support hypen attribute selector', () async {
@@ -32,9 +32,9 @@ void main() {
           ng.createHyphenAttributeSelectorTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('[foo=bar]')!.text, 'Matched!');
-      expect(select('[foo="bar-baz"]')!.text, 'Matched!');
-      expect(select('[foo=barbaz]')!.text, isEmpty);
+      expect(select('[foo=bar]')!.textContent, 'Matched!');
+      expect(select('[foo="bar-baz"]')!.textContent, 'Matched!');
+      expect(select('[foo=barbaz]')!.textContent, isEmpty);
     });
 
     test('should support list attribute selector', () async {
@@ -42,10 +42,10 @@ void main() {
           ng.createListAttributeSelectorTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('[foo=bar]')!.text, 'Matched!');
-      expect(select('[foo="bar baz"]')!.text, 'Matched!');
-      expect(select('[foo="baz bar qux"]')!.text, 'Matched!');
-      expect(select('[foo=barbaz]')!.text, isEmpty);
+      expect(select('[foo=bar]')!.textContent, 'Matched!');
+      expect(select('[foo="bar baz"]')!.textContent, 'Matched!');
+      expect(select('[foo="baz bar qux"]')!.textContent, 'Matched!');
+      expect(select('[foo=barbaz]')!.textContent, isEmpty);
     });
 
     test('should support prefix attribute selector', () async {
@@ -53,9 +53,9 @@ void main() {
           ng.createPrefixAttributeSelectorTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('[foo=bar]')!.text, 'Matched!');
-      expect(select('[foo=barbaz]')!.text, 'Matched!');
-      expect(select('[foo=bazbar]')!.text, isEmpty);
+      expect(select('[foo=bar]')!.textContent, 'Matched!');
+      expect(select('[foo=barbaz]')!.textContent, 'Matched!');
+      expect(select('[foo=bazbar]')!.textContent, isEmpty);
     });
 
     test('should support set attribute selector', () async {
@@ -63,10 +63,10 @@ void main() {
           ng.createSetAttributeSelectorTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('div')!.text, isEmpty);
-      expect(select('[foo]')!.text, 'Matched!');
-      expect(select('[foo=""]')!.text, 'Matched!');
-      expect(select('[foo="bar"]')!.text, 'Matched!');
+      expect(select('div')!.textContent, isEmpty);
+      expect(select('[foo]')!.textContent, 'Matched!');
+      expect(select('[foo=""]')!.textContent, 'Matched!');
+      expect(select('[foo="bar"]')!.textContent, 'Matched!');
     });
 
     test('should support substring attribute selector', () async {
@@ -74,9 +74,9 @@ void main() {
           ng.createSubstringAttributeSelectorTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('[foo=bar]')!.text, 'Matched!');
-      expect(select('[foo=barbaz]')!.text, 'Matched!');
-      expect(select('[foo=bazbar]')!.text, 'Matched!');
+      expect(select('[foo=bar]')!.textContent, 'Matched!');
+      expect(select('[foo=barbaz]')!.textContent, 'Matched!');
+      expect(select('[foo=bazbar]')!.textContent, 'Matched!');
     });
 
     test('should support suffix attribute selector', () async {
@@ -84,9 +84,9 @@ void main() {
           ng.createSuffixAttributeSelectorTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('[foo=bar]')!.text, 'Matched!');
-      expect(select('[foo=barbaz]')!.text, isEmpty);
-      expect(select('[foo=bazbar]')!.text, 'Matched!');
+      expect(select('[foo=bar]')!.textContent, 'Matched!');
+      expect(select('[foo=barbaz]')!.textContent, isEmpty);
+      expect(select('[foo=bazbar]')!.textContent, 'Matched!');
     });
   });
 }
diff --git a/_tests/test/core/linker/implicit_static_test.dart b/_tests/test/core/linker/implicit_static_test.dart
index 2c08723484..406fb02f5e 100644
--- a/_tests/test/core/linker/implicit_static_test.dart
+++ b/_tests/test/core/linker/implicit_static_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'implicit_static_test.template.dart' as ng;
 
diff --git a/_tests/test/core/linker/integration/binding_integration_test.dart b/_tests/test/core/linker/integration/binding_integration_test.dart
index a882af18c4..d5abc37063 100644
--- a/_tests/test/core/linker/integration/binding_integration_test.dart
+++ b/_tests/test/core/linker/integration/binding_integration_test.dart
@@ -1,6 +1,7 @@
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'binding_integration_test.template.dart' as ng;
 
@@ -59,7 +60,7 @@ void main() {
     final testBed =
         NgTestBed<BoundStyleComponent>(ng.createBoundStyleComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.querySelector('div')!;
+    final div = testFixture.rootElement.querySelector('div')! as HTMLElement;
     expect(div.style.height, '10px');
     await testFixture.update((component) => component.height = null);
     expect(div.style.height, '');
@@ -69,7 +70,7 @@ void main() {
     final testBed = NgTestBed<BoundMismatchedPropertyComponent>(
         ng.createBoundMismatchedPropertyComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.querySelector('div')!;
+    final div = testFixture.rootElement.querySelector('div')! as HTMLElement;
     expect(div.tabIndex, 0);
     await testFixture.update((component) => component.index = 5);
     expect(div.tabIndex, 5);
@@ -79,7 +80,7 @@ void main() {
     final testBed = NgTestBed<BoundCamelCasePropertyComponent>(
         ng.createBoundCamelCasePropertyComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.querySelector('div')!;
+    final div = testFixture.rootElement.querySelector('div')! as HTMLElement;
     expect(div.tabIndex, 1);
     await testFixture.update((component) => component.index = 0);
     expect(div.tabIndex, 0);
@@ -89,11 +90,11 @@ void main() {
     final testBed = NgTestBed<BoundInnerHtmlComponent>(
         ng.createBoundInnerHtmlComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.querySelector('div')!;
-    expect(div.innerHtml, 'Initial <span>HTML</span>');
+    final div = testFixture.rootElement.querySelector('div')! as HTMLDivElement;
+    expect(div.innerHTML, 'Initial <span>HTML</span>');
     await testFixture
         .update((component) => component.html = 'New <div>HTML</div>');
-    expect(div.innerHtml, 'New <div>HTML</div>');
+    expect(div.innerHTML, 'New <div>HTML</div>');
   });
 
   test('should consume className binding using class alias', () async {
@@ -101,9 +102,9 @@ void main() {
         NgTestBed<BoundClassNameAlias>(ng.createBoundClassNameAliasFactory());
     final testFixture = await testBed.create();
     final div = testFixture.rootElement.querySelector('div')!;
-    expect(div.classes, contains('foo'));
-    expect(div.classes, contains('bar'));
-    expect(div.classes, isNot(contains('initial')));
+    expect(div.classList.contains('foo'), isTrue);
+    expect(div.classList.contains('bar'), isTrue);
+    expect(div.classList.contains('initial'), isFalse);
   });
 }
 
diff --git a/_tests/test/core/linker/integration/directive_integration_test.dart b/_tests/test/core/linker/integration/directive_integration_test.dart
index a34197f7f8..dfb7143bab 100644
--- a/_tests/test/core/linker/integration/directive_integration_test.dart
+++ b/_tests/test/core/linker/integration/directive_integration_test.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'directive_integration_test.template.dart' as ng;
 
@@ -204,7 +204,7 @@ class UnboundDirectiveInputComponent {}
 )
 class DuplicateDir {
   DuplicateDir(HtmlElement element) {
-    element.text = '${element.text}noduplicate';
+    element.text = '${element.textContent}noduplicate';
   }
 }
 
diff --git a/_tests/test/core/linker/integration/misc_test.dart b/_tests/test/core/linker/integration/misc_test.dart
index 14eb02b89b..e8f45a5beb 100644
--- a/_tests/test/core/linker/integration/misc_test.dart
+++ b/_tests/test/core/linker/integration/misc_test.dart
@@ -1,6 +1,7 @@
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'misc_test.template.dart' as ng;
 
@@ -18,7 +19,7 @@ void main() {
     final testBed = NgTestBed<HostAttributeFromDirectiveComponent>(
         ng.createHostAttributeFromDirectiveComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.children.first;
+    final div = testFixture.rootElement.children.item(0) as HTMLElement;
     expect(div.attributes, containsPair('role', 'button'));
   });
 
@@ -26,7 +27,7 @@ void main() {
     final testBed = NgTestBed<HostPropertyFromDirectiveComponent>(
         ng.createHostPropertyFromDirectiveComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.children.first;
+    final div = testFixture.rootElement.children.item(0) as HTMLElement;
     expect(div.id, 'one');
     await testFixture.update((component) => component.directive!.id = 'two');
     expect(div.id, 'two');
diff --git a/_tests/test/core/linker/integration/ng_container_test.dart b/_tests/test/core/linker/integration/ng_container_test.dart
index 403a836a16..e04315d4c5 100644
--- a/_tests/test/core/linker/integration/ng_container_test.dart
+++ b/_tests/test/core/linker/integration/ng_container_test.dart
@@ -18,25 +18,25 @@ void main() {
     final testBed =
         NgTestBed<RendersChildren>(ng.createRendersChildrenFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml, html);
+    expect(testFixture.rootElement.innerHTML, html);
   });
 
   test('supports *ngFor', () async {
     final testBed = NgTestBed<SupportsNgFor>(ng.createSupportsNgForFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml, anchorHtml);
+    expect(testFixture.rootElement.innerHTML, anchorHtml);
     final values = ['a', 'b', 'c'];
     final html = values.join();
     await testFixture.update((component) => component.values.addAll(values));
-    expect(testFixture.rootElement.innerHtml, '$anchorHtml$html');
+    expect(testFixture.rootElement.innerHTML, '$anchorHtml$html');
   });
 
   test('supports *ngIf', () async {
     final testBed = NgTestBed<SupportsNgIf>(ng.createSupportsNgIfFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml, anchorHtml);
+    expect(testFixture.rootElement.innerHTML, anchorHtml);
     await testFixture.update((component) => component.visible = true);
-    expect(testFixture.rootElement.innerHtml, '$anchorHtml$html');
+    expect(testFixture.rootElement.innerHTML, '$anchorHtml$html');
   });
 
   test('supports *ngTemplateOutlet', () async {
@@ -44,7 +44,7 @@ void main() {
         ng.createSupportsNgTemplateOutletFactory());
     final testFixture = await testBed.create();
     expect(
-        testFixture.rootElement.innerHtml,
+        testFixture.rootElement.innerHTML,
         '$anchorHtml ' // <template #ref> anchor
         '$anchorHtml' // <template> and ViewContainerRef anchor for *-directive
         '${testFixture.assertOnlyInstance.context['message']}');
@@ -54,10 +54,10 @@ void main() {
     final testBed =
         NgTestBed<SupportsNesting>(ng.createSupportsNestingFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml, anchorHtml);
+    expect(testFixture.rootElement.innerHTML, anchorHtml);
     await testFixture.update((component) => component.integers = [1, 2, 3]);
     expect(
-        testFixture.rootElement.innerHtml,
+        testFixture.rootElement.innerHTML,
         '$anchorHtml' // NgFor
         '$anchorHtml' // NgIf true
         '<li>1</li>'
@@ -67,7 +67,7 @@ void main() {
         '<li>3</li>');
     await testFixture.update((component) => component.filterOdd = true);
     expect(
-        testFixture.rootElement.innerHtml,
+        testFixture.rootElement.innerHTML,
         '$anchorHtml' // NgFor
         '$anchorHtml' // NgIf false
         '$anchorHtml' // NgIf true
@@ -79,10 +79,10 @@ void main() {
   test('can be projected', () async {
     final testBed = NgTestBed<CanBeProjected>(ng.createCanBeProjectedFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml,
+    expect(testFixture.rootElement.innerHTML,
         '<content-host>$anchorHtml$html</content-host>');
     await testFixture.update((component) => component.visible = false);
-    expect(testFixture.rootElement.innerHtml,
+    expect(testFixture.rootElement.innerHTML,
         '<content-host>$anchorHtml</content-host>');
   });
 
@@ -90,7 +90,7 @@ void main() {
     final testBed = NgTestBed<CanHostProjectedContent>(
         ng.createCanHostProjectedContentFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml,
+    expect(testFixture.rootElement.innerHTML,
         '<contained-content-host>$html</contained-content-host>');
   });
 }
diff --git a/_tests/test/core/linker/integration/on_push_test.dart b/_tests/test/core/linker/integration/on_push_test.dart
index 210dc613fc..af90834a05 100644
--- a/_tests/test/core/linker/integration/on_push_test.dart
+++ b/_tests/test/core/linker/integration/on_push_test.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'on_push_test.template.dart' as ng;
 
@@ -55,21 +55,25 @@ void main() {
         NgTestBed<PushCmpHostComponent>(ng.createPushCmpHostComponentFactory());
     final testFixture = await testBed.create();
     final cmp = testFixture.assertOnlyInstance.child!;
-    final cmpElement = testFixture.rootElement.children.first;
+    final cmpElement = testFixture.rootElement.children.item(0);
     expect(cmp.numberOfChecks, 1);
     // Regular element.
     await testFixture.update((_) {
-      cmpElement.children[0].dispatchEvent(MouseEvent('click'));
+      cmpElement?.children.item(1)?.dispatchEvent(MouseEvent('click'));
     });
     expect(cmp.numberOfChecks, 2);
     // Element inside an *ngIf.
     await testFixture.update((_) {
-      cmpElement.children[1].dispatchEvent(MouseEvent('click'));
+      cmpElement?.children.item(1)?.dispatchEvent(MouseEvent('click'));
     });
     expect(cmp.numberOfChecks, 3);
     // Element inside a child component.
     await testFixture.update((_) {
-      cmpElement.children[2].children[0].dispatchEvent(MouseEvent('click'));
+      cmpElement?.children
+          .item(2)
+          ?.children
+          .item(0)
+          ?.dispatchEvent(MouseEvent('click'));
     });
     expect(cmp.numberOfChecks, 4);
   });
diff --git a/_tests/test/core/linker/integration/outputs_test.dart b/_tests/test/core/linker/integration/outputs_test.dart
index 0a12118185..d23c565f87 100644
--- a/_tests/test/core/linker/integration/outputs_test.dart
+++ b/_tests/test/core/linker/integration/outputs_test.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'outputs_test.template.dart' as ng;
 
@@ -48,9 +48,9 @@ void main() {
     final testBed = NgTestBed<ElementWithDomEventComponent>(
         ng.createElementWithDomEventComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.children.first;
+    final div = testFixture.rootElement.children.item(0);
     final listener = testFixture.assertOnlyInstance.listener;
-    await testFixture.update((_) => div.dispatchEvent(Event('click')));
+    await testFixture.update((_) => div?.dispatchEvent(Event('click')));
     expect(listener!.eventTypes, ['click']);
   });
 
@@ -58,8 +58,10 @@ void main() {
     final testBed = NgTestBed<TestPreventDefaultComponent>(
         ng.createTestPreventDefaultComponentFactory());
     final testFixture = await testBed.create();
-    final inputPrevent = testFixture.rootElement.children[0] as InputElement;
-    final inputNoPrevent = testFixture.rootElement.children[1] as InputElement;
+    final inputPrevent =
+        testFixture.rootElement.children.item(0) as HTMLInputElement;
+    final inputNoPrevent =
+        testFixture.rootElement.children.item(1) as HTMLInputElement;
     final clickPrevent = MouseEvent('click');
     final clickNoPrevent = MouseEvent('click');
     inputPrevent.dispatchEvent(clickPrevent);
diff --git a/_tests/test/core/linker/integration/reference_binding_test.dart b/_tests/test/core/linker/integration/reference_binding_test.dart
index 95eee61bb0..881e7445d0 100644
--- a/_tests/test/core/linker/integration/reference_binding_test.dart
+++ b/_tests/test/core/linker/integration/reference_binding_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'reference_binding_test.template.dart' as ng;
 
@@ -29,7 +28,7 @@ void main() {
     final testFixture = await testBed.create();
     expect(
       testFixture.assertOnlyInstance.captured!.reference,
-      const TypeMatcher<DivElement>(),
+      const TypeMatcher<HTMLDivElement>(),
     );
   });
 
diff --git a/_tests/test/core/linker/integration/template_test.dart b/_tests/test/core/linker/integration/template_test.dart
index 42096ebe51..6b6f5d8b44 100644
--- a/_tests/test/core/linker/integration/template_test.dart
+++ b/_tests/test/core/linker/integration/template_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'template_test.template.dart' as ng;
 
@@ -15,17 +14,17 @@ void main() {
     final testFixture = await testBed.create();
     // 1 template + 2 copies.
     expect(testFixture.rootElement.childNodes, hasLength(3));
-    expect(testFixture.rootElement.childNodes[1].text, 'hello');
-    expect(testFixture.rootElement.childNodes[2].text, 'again');
+    expect(testFixture.rootElement.childNodes.item(1)?.textContent, 'hello');
+    expect(testFixture.rootElement.childNodes.item(2)?.textContent, 'again');
   });
 
   test('should not detach views when parent is destroyed', () async {
     final testBed = NgTestBed<DestroyParentViewComponent>(
         ng.createDestroyParentViewComponentFactory());
     final testFixture = await testBed.create();
-    final ngIfElement = testFixture.rootElement.children.first;
+    final ngIfElement = testFixture.rootElement.children.item(0);
     final someViewport = testFixture.assertOnlyInstance.viewport!;
-    expect(ngIfElement.children, hasLength(2));
+    expect(ngIfElement?.children, hasLength(2));
     expect(someViewport.container, hasLength(2));
     await testFixture.update((component) => component.visible = false);
     expect(testFixture.rootElement.children, hasLength(0));
@@ -38,7 +37,7 @@ void main() {
     final testFixture = await testBed.create();
     final childNodes = testFixture.rootElement.childNodes;
     expect(childNodes, hasLength(1));
-    expect(childNodes.first, TypeMatcher<Comment>());
+    expect(childNodes.item(1), TypeMatcher<Comment>());
   });
 
   test('should transplant TemplateRef into another ViewContainer', () async {
diff --git a/_tests/test/core/linker/integration/view_creation_test.dart b/_tests/test/core/linker/integration/view_creation_test.dart
index 7829e238c8..e5d7bbd82c 100644
--- a/_tests/test/core/linker/integration/view_creation_test.dart
+++ b/_tests/test/core/linker/integration/view_creation_test.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'view_creation_test.template.dart' as ng;
 
@@ -19,7 +19,7 @@ void main() {
   });
 
   test('should support moving embedded views', () async {
-    final template = TemplateElement()..append(DivElement());
+    final template = HTMLTemplateElement()..append(HTMLDivElement());
     final testBed = NgTestBed<MovesEmbeddedViewComponent>(
       ng.createMovesEmbeddedViewComponentFactory(),
     ).addInjector(
@@ -29,11 +29,11 @@ void main() {
     );
     final testFixture = await testBed.create();
     final viewport = testFixture.assertOnlyInstance.viewport!;
-    expect(viewport.anchor.text, '');
+    expect(viewport.anchor.textContent, '');
     await testFixture.update((component) => component.ctxBoolProp = true);
-    expect(viewport.anchor.text, 'hello');
+    expect(viewport.anchor.textContent, 'hello');
     await testFixture.update((component) => component.ctxBoolProp = false);
-    expect(viewport.anchor.text, '');
+    expect(viewport.anchor.textContent, '');
   });
 
   group('property bindings', () {
@@ -50,8 +50,9 @@ void main() {
         ng.createOverriddenPropertyComponentFactory(),
       );
       final testFixture = await testBed.create();
-      final span = testFixture.rootElement.querySelector('span');
-      expect(span!.title, isEmpty);
+      final span =
+          testFixture.rootElement.querySelector('span') as HTMLSpanElement;
+      expect(span.title, isEmpty);
     });
 
     test('should allow directive host property to update DOM', () async {
@@ -59,8 +60,9 @@ void main() {
         ng.createDirectiveUpdatesDomComponentFactory(),
       );
       final testFixture = await testBed.create();
-      final span = testFixture.rootElement.querySelector('span');
-      expect(span!.title, 'TITLE');
+      final span =
+          testFixture.rootElement.querySelector('span') as HTMLSpanElement;
+      expect(span.title, 'TITLE');
     });
   });
 
@@ -82,8 +84,8 @@ void main() {
       await testFixture.update((component) {
         component.directive!.myAttr = 'bar';
       });
-      final directiveElement = testFixture.rootElement.children.first;
-      expect(directiveElement.attributes, containsPair('my-attr', 'bar'));
+      final directiveElement = testFixture.rootElement.children.item(0);
+      expect(directiveElement?.attributes, containsPair('my-attr', 'bar'));
     });
 
     test('should support @Output', () async {
@@ -105,8 +107,8 @@ void main() {
       final testFixture = await testBed.create();
       final directive = testFixture.assertOnlyInstance.directive!;
       expect(directive.target, isNull);
-      final directiveElement = testFixture.rootElement.children.first;
-      directiveElement.dispatchEvent(MouseEvent('click'));
+      final directiveElement = testFixture.rootElement.children.item(0);
+      directiveElement?.dispatchEvent(MouseEvent('click'));
       await testFixture.update();
       expect(directive.target, directiveElement);
     });
@@ -117,17 +119,17 @@ void main() {
       ng.createSvgElementsComponentFactory(),
     );
     final testFixture = await testBed.create();
-    final svg = testFixture.rootElement.querySelector('svg')!;
-    expect(svg.namespaceUri, 'http://www.w3.org/2000/svg');
+    final svg = testFixture.rootElement.querySelector('svg')! as SVGElement;
+    expect(svg.namespaceURI, 'http://www.w3.org/2000/svg');
     final use = testFixture.rootElement.querySelector('use')!;
-    expect(use.namespaceUri, 'http://www.w3.org/2000/svg');
+    expect(use.namespaceURI, 'http://www.w3.org/2000/svg');
     final foreignObject =
         testFixture.rootElement.querySelector('foreignObject')!;
-    expect(foreignObject.namespaceUri, 'http://www.w3.org/2000/svg');
+    expect(foreignObject.namespaceURI, 'http://www.w3.org/2000/svg');
     final div = testFixture.rootElement.querySelector('div')!;
-    expect(div.namespaceUri, 'http://www.w3.org/1999/xhtml');
+    expect(div.namespaceURI, 'http://www.w3.org/1999/xhtml');
     final p = testFixture.rootElement.querySelector('p')!;
-    expect(p.namespaceUri, 'http://www.w3.org/1999/xhtml');
+    expect(p.namespaceURI, 'http://www.w3.org/1999/xhtml');
   });
 
   group('namespace attributes', () {
@@ -164,6 +166,7 @@ class SimpleImperativeViewComponent {
   }
 }
 
+// ignore: constant_identifier_names
 const ANCHOR_ELEMENT = OpaqueToken('AnchorElement');
 
 @Directive(
@@ -173,7 +176,7 @@ class SomeImperativeViewport {
   ViewContainerRef vc;
   TemplateRef templateRef;
   EmbeddedViewRef? view;
-  TemplateElement anchor;
+  HTMLTemplateElement anchor;
 
   SomeImperativeViewport(
       this.vc, this.templateRef, @Inject(ANCHOR_ELEMENT) this.anchor);
diff --git a/_tests/test/core/linker/query_integration_test.dart b/_tests/test/core/linker/query_integration_test.dart
index d9c3681139..de4ac21e94 100644
--- a/_tests/test/core/linker/query_integration_test.dart
+++ b/_tests/test/core/linker/query_integration_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'query_integration_test.template.dart' as ng;
 
@@ -227,7 +226,7 @@ void main() {
 
       while (divIt.moveNext()) {
         itemIt.moveNext();
-        expect(divIt.current.text, itemIt.current);
+        expect(divIt.current.textContent, itemIt.current);
       }
 
       expect(itemIt.moveNext(), false);
@@ -250,7 +249,7 @@ void main() {
       await testFixture.update((component) {
         component.showEmbeddedViews = true;
       });
-      expect(testFixture.assertOnlyInstance.div?.text, 'First');
+      expect(testFixture.assertOnlyInstance.div?.textContent, 'First');
     });
   });
 }
diff --git a/_tests/test/core/linker/security_integration_test.dart b/_tests/test/core/linker/security_integration_test.dart
index 7af9b66df6..4f58548788 100644
--- a/_tests/test/core/linker/security_integration_test.dart
+++ b/_tests/test/core/linker/security_integration_test.dart
@@ -1,11 +1,10 @@
 @TestOn('browser')
 
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/security/dom_sanitization_service.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'security_integration_test.template.dart' as ng;
 
@@ -17,7 +16,7 @@ void main() {
     final testBed = NgTestBed<UnsafeAttributeComponent>(
         ng.createUnsafeAttributeComponentFactory());
     final testFixture = await testBed.create();
-    final a = testFixture.rootElement.querySelector('a') as AnchorElement;
+    final a = testFixture.rootElement.querySelector('a') as HTMLAnchorElement;
     expect(a.href, matches(r'.*/hello$'));
     await testFixture.update((component) {
       component.href = unsafeUrl;
@@ -29,7 +28,7 @@ void main() {
     final testBed = NgTestBed<TrustedValueComponent>(
         ng.createTrustedValueComponentFactory());
     final testFixture = await testBed.create();
-    final a = testFixture.rootElement.querySelector('a') as AnchorElement;
+    final a = testFixture.rootElement.querySelector('a') as HTMLAnchorElement;
     expect(a.href, 'javascript:alert(1)');
   });
 
@@ -43,37 +42,37 @@ void main() {
     final testBed =
         NgTestBed<UnsafeStyleComponent>(ng.createUnsafeStyleComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.querySelector('div');
-    expect(div?.style.background, matches('red'));
+    final div = testFixture.rootElement.querySelector('div') as HTMLDivElement;
+    expect(div.style.background, matches('red'));
     await testFixture.update((component) {
       component.backgroundStyle = 'url(javascript:evil())';
     });
-    expect(div?.style.background, isNot(contains('javascript')));
+    expect(div.style.background, isNot(contains('javascript')));
   });
 
   test('should escape unsafe HTML', () async {
     final testBed =
         NgTestBed<UnsafeHtmlComponent>(ng.createUnsafeHtmlComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.querySelector('div');
-    expect(div?.innerHtml, 'some <p>text</p>');
+    final div = testFixture.rootElement.querySelector('div') as HTMLDivElement;
+    expect(div.innerHTML, 'some <p>text</p>');
     await testFixture.update((component) {
       var c = component;
       c.html = 'ha <script>evil()</script>';
     });
-    expect(div?.innerHtml, 'ha ');
+    expect(div.innerHTML, 'ha ');
     await testFixture.update((component) {
       var c = component;
       c.html = 'also <img src="x" onerror="evil()"> evil';
     });
-    expect(div?.innerHtml, 'also <img src="x"> evil');
+    expect(div.innerHTML, 'also <img src="x"> evil');
     await testFixture.update((component) {
       final srcdoc = '<div></div><script></script>';
       var c = component;
       c.html = 'also <iframe srcdoc="$srcdoc"> content</iframe>';
     });
     expect(
-      div?.innerHtml,
+      div.innerHTML,
       'also <iframe> content</iframe>',
     );
   });
diff --git a/_tests/test/core/linker/style_encapsulation_test.dart b/_tests/test/core/linker/style_encapsulation_test.dart
index bf794313a5..681ac6962c 100644
--- a/_tests/test/core/linker/style_encapsulation_test.dart
+++ b/_tests/test/core/linker/style_encapsulation_test.dart
@@ -1,30 +1,32 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'style_encapsulation_test.template.dart' as ng;
 
 void main() {
   tearDown(() {
-    document.head!.querySelectorAll('style').forEach((e) => e.remove());
+    document.head!
+        .querySelectorAll('style')
+        .asIterable()
+        .forEach((e) => e.parentNode?.removeChild(e));
     return disposeAnyRunningTest();
   });
 
   String failureReason(Element target) {
-    final lastStyles = document.head!.querySelectorAll('style');
-    final styleText = lastStyles.map((e) => e.text).join('\n');
-    return 'HTML:\n\n${target.outerHtml}\nCSS:\n\n$styleText';
+    final lastStyles = document.head!.querySelectorAll('style').asIterable();
+    final styleText = lastStyles.map((e) => e.textContent).join('\n');
+    return 'HTML:\n\n${target.outerHTML}\nCSS:\n\n$styleText';
   }
 
   test('should encapsulate usages of [class]=', () async {
     final testBed =
         NgTestBed<TestSetClassProperty>(ng.createTestSetClassPropertyFactory());
     final fixture = await testBed.create();
-    final element = fixture.rootElement.querySelector('div')!;
+    final element = fixture.rootElement.querySelector('div')! as HTMLDivElement;
     expect(
-      element.getComputedStyle().position,
+      window.getComputedStyle(element).position,
       'absolute',
       reason: failureReason(element),
     );
@@ -36,7 +38,7 @@ void main() {
     final fixture = await testBed.create();
     final element = fixture.rootElement.querySelector('div')!;
     expect(
-      element.getComputedStyle().position,
+      window.getComputedStyle(element).position,
       'absolute',
       reason: failureReason(element),
     );
@@ -48,7 +50,7 @@ void main() {
     final fixture = await testBed.create();
     final element = fixture.rootElement.querySelector('button')!;
     expect(
-      element.getComputedStyle().textTransform,
+      window.getComputedStyle(element).textTransform,
       isNot('uppercase'),
       reason: failureReason(element),
     );
diff --git a/_tests/test/core/query_html_element_test.dart b/_tests/test/core/query_html_element_test.dart
index c28bd8eb60..bfe9ed7362 100644
--- a/_tests/test/core/query_html_element_test.dart
+++ b/_tests/test/core/query_html_element_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'query_html_element_test.template.dart' as ng;
 
@@ -12,28 +11,30 @@ void main() {
   test('should support @ViewChild with Element', () async {
     final fixture =
         await NgTestBed<UsesElement>(ng.createUsesElementFactory()).create();
-    expect(fixture.assertOnlyInstance.element!.text, '1');
+    expect(fixture.assertOnlyInstance.element!.textContent, '1');
   });
 
   test('should support @ViewChild with HtmlElement', () async {
     final fixture =
         await NgTestBed<UsesHtmlElement>(ng.createUsesHtmlElementFactory())
             .create();
-    expect(fixture.assertOnlyInstance.element!.text, '2');
+    expect(fixture.assertOnlyInstance.element!.textContent, '2');
   });
 
   test('should support @ViewChildren with Element', () async {
     final fixture =
         await NgTestBed<UsesListOfElement>(ng.createUsesListOfElementFactory())
             .create();
-    expect(fixture.assertOnlyInstance.elements!.map((e) => e.text), ['1', '2']);
+    expect(fixture.assertOnlyInstance.elements!.map((e) => e.textContent),
+        ['1', '2']);
   });
 
   test('should support @ViewChildren with HtmlElement', () async {
     final fixture = await NgTestBed<UsesListOfHtmlElement>(
             ng.createUsesListOfHtmlElementFactory())
         .create();
-    expect(fixture.assertOnlyInstance.elements!.map((e) => e.text), ['1', '2']);
+    expect(fixture.assertOnlyInstance.elements!.map((e) => e.textContent),
+        ['1', '2']);
   });
 }
 
diff --git a/_tests/test/core/styling/clear_component_styles_test.dart b/_tests/test/core/styling/clear_component_styles_test.dart
index 7eb4a4ab02..620ebd3b92 100644
--- a/_tests/test/core/styling/clear_component_styles_test.dart
+++ b/_tests/test/core/styling/clear_component_styles_test.dart
@@ -1,6 +1,7 @@
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'clear_component_styles_test.template.dart' as ng;
 
@@ -32,7 +33,7 @@ Future<void> expectTextFontStyle(
   final testBed = NgTestBed(componentFactory);
   final testFixture = await testBed.create();
   final text = testFixture.rootElement.querySelector('.text');
-  expect(text!.getComputedStyle().getPropertyValue('font-style'), fontStyle);
+  expect(window.getComputedStyle(text).fontStyle, fontStyle);
   return testFixture.dispose();
 }
 
diff --git a/_tests/test/core/styling/shim_test.dart b/_tests/test/core/styling/shim_test.dart
index 535b356f90..8ad51f8eb9 100644
--- a/_tests/test/core/styling/shim_test.dart
+++ b/_tests/test/core/styling/shim_test.dart
@@ -1,10 +1,9 @@
 library angular2.test.common.styling.shim_test;
 
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'shim_test.template.dart' as ng;
 
diff --git a/_tests/test/core/view/projection_integration_test.dart b/_tests/test/core/view/projection_integration_test.dart
index 965f5a95c9..e4fd31a18d 100644
--- a/_tests/test/core/view/projection_integration_test.dart
+++ b/_tests/test/core/view/projection_integration_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'projection_integration_test.template.dart' as ng;
 
@@ -53,11 +52,15 @@ void main() {
       var fixture = await testBed.create();
       expect(fixture.text, '(, B)');
       await fixture.update((LightDomChangeTest component) {
-        component.viewports!.forEach((d) => d.show());
+        for (var d in component.viewports!) {
+          d.show();
+        }
       });
       expect(fixture.text, '(A1, B)');
       await fixture.update((LightDomChangeTest component) {
-        component.viewports!.forEach((d) => d.hide());
+        for (var d in component.viewports!) {
+          d.hide();
+        }
       });
       expect(fixture.text, '(, B)');
     });
@@ -194,7 +197,7 @@ void main() {
           NgTestBed<SwitchOrderTest>(ng.createSwitchOrderTestFactory());
       var fixture = await testBed.create();
       expect(
-          fixture.rootElement.innerHtml,
+          fixture.rootElement.innerHTML,
           '<cmp-a><cmp-b><cmp-d><d>cmp-d</d></cmp-d></cmp-b>'
           '<cmp-c><c>cmp-c</c></cmp-c></cmp-a>');
     });
@@ -203,7 +206,7 @@ void main() {
           NgTestBed<CorrectOrderTest>(ng.createCorrectOrderTestFactory());
       var fixture = await testBed.create();
       expect(
-          fixture.rootElement.innerHtml,
+          fixture.rootElement.innerHTML,
           '<cmp-a1>a1<cmp-b11>b11</cmp-b11><cmp-b12>b12</cmp-b12></cmp-a1>'
           '<cmp-a2>a2<cmp-b21>b21</cmp-b21><cmp-b22>b22</cmp-b22></cmp-a2>');
     });
diff --git a/_tests/test/core/view/projection_test.dart b/_tests/test/core/view/projection_test.dart
index a4cd7430fa..de78a8d2d2 100644
--- a/_tests/test/core/view/projection_test.dart
+++ b/_tests/test/core/view/projection_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:_tests/matchers.dart';
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'projection_test.template.dart' as ng;
 
@@ -74,7 +73,7 @@ void main() {
           ng.createContainerWithStyleNotEmulatedFactory());
       var testFixture = await testBed.create();
       var mainEl = testFixture.rootElement;
-      var div1 = mainEl.children.first;
+      var div1 = mainEl.children.asIterable().first;
       var div2 = document.createElement('div');
       div2.className = 'redStyle';
       mainEl.append(div2);
@@ -87,7 +86,7 @@ void main() {
           ng.createContainerWithStyleEmulatedFactory());
       var testFixture = await testBed.create();
       var mainEl = testFixture.rootElement;
-      var div1 = mainEl.children.first;
+      var div1 = mainEl.children.asIterable().first;
       var div2 = document.createElement('div');
       div2.className = 'blueStyle';
       mainEl.append(div2);
@@ -107,8 +106,9 @@ void main() {
           ng.createSelectExactAttributeTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
 
     test('should support hypen attribute selector', () async {
@@ -116,8 +116,9 @@ void main() {
           ng.createSelectHyphenAttributeTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
 
     test('should support list attribute selector', () async {
@@ -125,8 +126,9 @@ void main() {
           ng.createSelectListAttributeTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
 
     test('should support prefix attribute selector', () async {
@@ -134,8 +136,9 @@ void main() {
           ng.createSelectPrefixAttributeTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
 
     test('should support set attribute selector', () async {
@@ -143,8 +146,9 @@ void main() {
           ng.createSelectSetAttributeTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
 
     test('should support substring attribute selector', () async {
@@ -152,8 +156,9 @@ void main() {
           ng.createSelectSubstringAttributeTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
 
     test('should support suffix attribute selector', () async {
@@ -161,8 +166,9 @@ void main() {
           ng.createSelectSuffixAttributeTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
 
     test('should support multiple levels with ngProjectAs', () async {
@@ -170,8 +176,9 @@ void main() {
           ng.createNgProjectAsTestComponentFactory());
       final testFixture = await testBed.create();
       final select = testFixture.rootElement.querySelector;
-      expect(select('.selected')!.text!.trim(), 'Should be selected.');
-      expect(select('.rejected')!.text!.trim(), "Shouldn't be selected.");
+      expect(select('.selected')!.textContent!.trim(), 'Should be selected.');
+      expect(
+          select('.rejected')!.textContent!.trim(), "Shouldn't be selected.");
     });
   });
 }
diff --git a/_tests/test/core/view/view_child_regression_test.dart b/_tests/test/core/view/view_child_regression_test.dart
index 1b326b27f9..a4cef6df95 100644
--- a/_tests/test/core/view/view_child_regression_test.dart
+++ b/_tests/test/core/view/view_child_regression_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'view_child_regression_test.template.dart' as ng;
 
diff --git a/_tests/test/devtools/inspector_test.dart b/_tests/test/devtools/inspector_test.dart
index c5a559340a..f6836029eb 100644
--- a/_tests/test/devtools/inspector_test.dart
+++ b/_tests/test/devtools/inspector_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html' as html;
-
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/devtools.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart' as web;
 
 import 'inspector_test.template.dart' as ng;
 
@@ -263,7 +262,7 @@ void main() {
     });
 
     group('external content root', () {
-      late html.Element container;
+      late web.Element container;
       late NgTestFixture<TestExternalContentRoots> testFixture;
 
       setUp(() async {
@@ -358,8 +357,8 @@ void main() {
       final testBed = NgTestBed<TestExternalContentRoots>(
           ng.createTestExternalContentRootsFactory());
       final testFixture = await testBed.create();
-      final childContainer = html.DivElement();
-      final parentContainer = testFixture.rootElement.parent!
+      final childContainer = web.HTMLDivElement();
+      final parentContainer = testFixture.rootElement.parentElement!
         ..append(childContainer);
       registerContentRoot(childContainer);
       registerContentRoot(parentContainer);
@@ -628,7 +627,7 @@ void main() {
     });
 
     group('external content root', () {
-      late html.Element container;
+      late web.Element container;
       late NgTestFixture<TestExternalContentRoots> testFixture;
 
       setUp(() async {
@@ -723,8 +722,8 @@ void main() {
       final testBed = NgTestBed<TestExternalContentRoots>(
           ng.createTestExternalContentRootsFactory());
       final testFixture = await testBed.create();
-      final childContainer = html.DivElement();
-      final parentContainer = testFixture.rootElement.parent!
+      final childContainer = web.HTMLDivElement();
+      final parentContainer = testFixture.rootElement.parentElement!
         ..append(childContainer);
       registerContentRoot(childContainer);
       registerContentRoot(parentContainer);
@@ -963,9 +962,9 @@ void main() {
   });
 }
 
-html.Element createContentRoot({html.Element? parent}) {
-  final root = html.DivElement();
-  (parent ?? html.document.body!).append(root);
+web.Element createContentRoot({web.Element? parent}) {
+  final root = web.HTMLDivElement();
+  (parent ?? web.document.body!).append(root);
   registerContentRoot(root);
   return root;
 }
@@ -1188,7 +1187,7 @@ class TestExternalContentRoots {
   @ViewChild('multiple')
   TemplateRef? multipleComponentTemplateRef;
 
-  void initExternalContent(html.Element container, TemplateRef content) {
+  void initExternalContent(web.Element container, TemplateRef content) {
     final viewRef = _viewContainerRef.createEmbeddedView(content);
     for (final node in viewRef.rootNodes) {
       container.append(node);
diff --git a/_tests/test/directives/ng_for_content_projection_test.dart b/_tests/test/directives/ng_for_content_projection_test.dart
index eb054fe885..4718bd7774 100644
--- a/_tests/test/directives/ng_for_content_projection_test.dart
+++ b/_tests/test/directives/ng_for_content_projection_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'ng_for_content_projection_test.template.dart' as ng;
 
@@ -26,12 +25,12 @@ void main() {
       );
 
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '2', '3'],
       );
       await forceReorder132();
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '3', '2'],
       );
     });
@@ -44,12 +43,12 @@ void main() {
       );
 
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '2', '3'],
       );
       await forceReorder132();
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '3', '2'],
       );
     });
@@ -62,12 +61,12 @@ void main() {
       );
 
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '2', '3'],
       );
       await forceReorder132();
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         // TODO(b/129297484): Should be "['1', '3', '2']".
         ['1', '2', '3'],
       );
@@ -81,12 +80,12 @@ void main() {
       );
 
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '2', '3'],
       );
       await forceReorder132();
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '3', '2'],
       );
     });
@@ -99,12 +98,12 @@ void main() {
       );
 
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '2', '3'],
       );
       await forceReorder132();
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '3', '2'],
       );
     });
@@ -117,12 +116,12 @@ void main() {
       );
 
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         ['1', '2', '3'],
       );
       await forceReorder132();
       expect(
-        fixture.assertOnlyInstance.children!.map((h) => h.text),
+        fixture.assertOnlyInstance.children!.map((h) => h.textContent),
         // TODO(b/129297484): Should be "['1', '3', '2']".
         ['1', '2', '3'],
       );
diff --git a/_tests/test/integration/query_view_test.dart b/_tests/test/integration/query_view_test.dart
index 8254a5e5e8..c00bfd572e 100644
--- a/_tests/test/integration/query_view_test.dart
+++ b/_tests/test/integration/query_view_test.dart
@@ -1,10 +1,10 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:_tests/query_tests.dart';
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'query_view_test.template.dart' as ng;
 
@@ -38,7 +38,7 @@ void main() {
           ng.createTestNestedNgForQueriesListFactory());
       final fixture = await testBed.create();
       expect(
-        fixture.assertOnlyInstance.taggedDivs!.map((e) => e.text),
+        fixture.assertOnlyInstance.taggedDivs!.map((e) => e.textContent),
         ['1', '2', '3'],
       );
     });
@@ -49,7 +49,7 @@ void main() {
           ng.createTestNestedAndStaticNgForQueriesListFactory());
       final fixture = await testBed.create();
       expect(
-        fixture.assertOnlyInstance.taggedDivs!.map((e) => e.text),
+        fixture.assertOnlyInstance.taggedDivs!.map((e) => e.textContent),
         ['1', '2', '3', '4', '5', '6', '7'],
       );
     });
diff --git a/_tests/test/platform/dom/events/key_events_test.dart b/_tests/test/platform/dom/events/key_events_test.dart
index f8918f56eb..189449d5e1 100644
--- a/_tests/test/platform/dom/events/key_events_test.dart
+++ b/_tests/test/platform/dom/events/key_events_test.dart
@@ -1,9 +1,12 @@
-import 'dart:html';
-import 'dart:js';
+// ignore_for_file: constant_identifier_names
+
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'key_events_test.template.dart' as ng;
 
@@ -205,13 +208,13 @@ Event createKeyboardEvent(
   bool shiftKey = false,
   bool metaKey = false,
 }) {
-  if (!context.hasProperty(CREATE_KEYBOARD_EVENT_NAME)) {
+  if (!globalContext.hasProperty(CREATE_KEYBOARD_EVENT_NAME).toDart) {
     var script = document.createElement('script')
       ..setAttribute('type', 'text/javascript')
       ..text = CREATE_KEYBOARD_EVENT_SCRIPT;
     document.body!.append(script);
   }
-  return context.callMethod(CREATE_KEYBOARD_EVENT_NAME, [
+  return globalContext.callMethod(CREATE_KEYBOARD_EVENT_NAME, [
     type,
     keyCode,
     ctrlKey,
diff --git a/_tests/test/security/safe_inner_html_test.dart b/_tests/test/security/safe_inner_html_test.dart
index b643a33df1..2f7e6cf7f7 100644
--- a/_tests/test/security/safe_inner_html_test.dart
+++ b/_tests/test/security/safe_inner_html_test.dart
@@ -45,9 +45,9 @@ void main() {
       final testBed =
           NgTestBed(ng.createInterpolatedTrustedInnerHtmlTestFactory());
       final testRoot = await testBed.create();
-      print(testRoot.rootElement.innerHtml);
+      print(testRoot.rootElement.innerHTML);
       await testRoot.update();
-      print(testRoot.rootElement.innerHtml);
+      print(testRoot.rootElement.innerHTML);
       expect(testRoot.text, contains('(Unsafe)'));
     },
         skip:
diff --git a/_tests/test/templates/additional_expression_test.dart b/_tests/test/templates/additional_expression_test.dart
index df2cffcb18..8c865068a1 100644
--- a/_tests/test/templates/additional_expression_test.dart
+++ b/_tests/test/templates/additional_expression_test.dart
@@ -1,6 +1,7 @@
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'additional_expression_lib.dart' as lib;
 import 'additional_expression_test.template.dart' as ng;
@@ -39,7 +40,9 @@ void main() {
       expect(fixture.assertOnlyInstance.a, isNull);
 
       await fixture.update(
-        (_) => fixture.rootElement.querySelectorAll('button')[0].click(),
+        (_) => (fixture.rootElement.querySelectorAll('button').item(0)
+                as HTMLElement)
+            .click(),
       );
 
       expect(fixture.assertOnlyInstance.a, isNotNull);
@@ -50,7 +53,9 @@ void main() {
       expect(fixture.assertOnlyInstance.b, isNull);
 
       await fixture.update(
-        (_) => fixture.rootElement.querySelectorAll('button')[1].click(),
+        (_) => (fixture.rootElement.querySelectorAll('button').item(1)
+                as HTMLElement)
+            .click(),
       );
 
       expect(fixture.assertOnlyInstance.a, isNotNull);
@@ -62,7 +67,9 @@ void main() {
       expect(fixture.assertOnlyInstance.b, isNull);
 
       await fixture.update(
-        (_) => fixture.rootElement.querySelectorAll('button')[2].click(),
+        (_) => (fixture.rootElement.querySelectorAll('button').item(2)
+                as HTMLElement)
+            .click(),
       );
 
       expect(fixture.assertOnlyInstance.a, isNotNull);
diff --git a/goldens/pubspec.yaml b/goldens/pubspec.yaml
index 6e299fdf32..e006df3676 100644
--- a/goldens/pubspec.yaml
+++ b/goldens/pubspec.yaml
@@ -6,9 +6,9 @@ environment:
   sdk: ">=3.1.0 <4.0.0"
 
 dependencies:
-  js: ^0.6.7
   meta: ^1.11.0
   ngdart: ^8.0.0-dev.4
+  web: ^0.5.1
 
 dev_dependencies:
   build_runner: ^2.4.6
diff --git a/goldens/test/change_detection/boolean_coerced_inputs.dart b/goldens/test/change_detection/boolean_coerced_inputs.dart
index 09a955df0c..49257330b3 100644
--- a/goldens/test/change_detection/boolean_coerced_inputs.dart
+++ b/goldens/test/change_detection/boolean_coerced_inputs.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'boolean_coerced_inputs.template.dart' as ng;
diff --git a/goldens/test/change_detection/boolean_coerced_inputs.template.dart.golden b/goldens/test/change_detection/boolean_coerced_inputs.template.dart.golden
index 2e01d8fc8c..909a933e45 100644
--- a/goldens/test/change_detection/boolean_coerced_inputs.template.dart.golden
+++ b/goldens/test/change_detection/boolean_coerced_inputs.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/src/runtime/check_binding.dart' as import9;
diff --git a/goldens/test/change_detection/change_detection_link.dart b/goldens/test/change_detection/change_detection_link.dart
index b964d7b535..cb017c96c5 100644
--- a/goldens/test/change_detection/change_detection_link.dart
+++ b/goldens/test/change_detection/change_detection_link.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/experimental.dart';
 
diff --git a/goldens/test/change_detection/change_detection_link.template.dart.golden b/goldens/test/change_detection/change_detection_link.template.dart.golden
index a1028b9b79..ae26790c0a 100644
--- a/goldens/test/change_detection/change_detection_link.template.dart.golden
+++ b/goldens/test/change_detection/change_detection_link.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 import 'package:ngdart/src/core/linker/view_container.dart';
diff --git a/goldens/test/change_detection/default.dart b/goldens/test/change_detection/default.dart
index d14971e52e..c3b2234706 100644
--- a/goldens/test/change_detection/default.dart
+++ b/goldens/test/change_detection/default.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'default.template.dart' as ng;
diff --git a/goldens/test/change_detection/default.template.dart.golden b/goldens/test/change_detection/default.template.dart.golden
index 17218b1b07..d43ee768b2 100644
--- a/goldens/test/change_detection/default.template.dart.golden
+++ b/goldens/test/change_detection/default.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/check_binding.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/angular.dart';
diff --git a/goldens/test/change_detection/directive_change_detector.dart b/goldens/test/change_detection/directive_change_detector.dart
index 697095664e..1fe6d118d1 100644
--- a/goldens/test/change_detection/directive_change_detector.dart
+++ b/goldens/test/change_detection/directive_change_detector.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'directive_change_detector.template.dart' as ng;
diff --git a/goldens/test/change_detection/directive_change_detector.template.dart.golden b/goldens/test/change_detection/directive_change_detector.template.dart.golden
index 7ec46bbccd..7c5f11a99a 100644
--- a/goldens/test/change_detection/directive_change_detector.template.dart.golden
+++ b/goldens/test/change_detection/directive_change_detector.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/src/runtime/check_binding.dart' as import9;
diff --git a/goldens/test/change_detection/on_push.dart b/goldens/test/change_detection/on_push.dart
index bd3d6abd15..a5da7fe1a2 100644
--- a/goldens/test/change_detection/on_push.dart
+++ b/goldens/test/change_detection/on_push.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'on_push.template.dart' as ng;
diff --git a/goldens/test/change_detection/on_push.template.dart.golden b/goldens/test/change_detection/on_push.template.dart.golden
index d16b20014b..aff759a35b 100644
--- a/goldens/test/change_detection/on_push.template.dart.golden
+++ b/goldens/test/change_detection/on_push.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/check_binding.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/angular.dart';
diff --git a/goldens/test/dependency_injection/eager_existing_providers.dart b/goldens/test/dependency_injection/eager_existing_providers.dart
index e46dc2b980..0297c37ba6 100644
--- a/goldens/test/dependency_injection/eager_existing_providers.dart
+++ b/goldens/test/dependency_injection/eager_existing_providers.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'eager_existing_providers.template.dart' as ng;
diff --git a/goldens/test/dependency_injection/eager_existing_providers.template.dart.golden b/goldens/test/dependency_injection/eager_existing_providers.template.dart.golden
index b8603f5ad5..bd4aed67fc 100644
--- a/goldens/test/dependency_injection/eager_existing_providers.template.dart.golden
+++ b/goldens/test/dependency_injection/eager_existing_providers.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 import 'package:ngdart/src/di/errors.dart' as import9;
diff --git a/goldens/test/dependency_injection/generated_injector_large.dart b/goldens/test/dependency_injection/generated_injector_large.dart
index 2d5f2e3e45..f127523f47 100644
--- a/goldens/test/dependency_injection/generated_injector_large.dart
+++ b/goldens/test/dependency_injection/generated_injector_large.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'generated_injector_large.template.dart' as ng;
diff --git a/goldens/test/dependency_injection/generated_injector_large.template.dart.golden b/goldens/test/dependency_injection/generated_injector_large.template.dart.golden
index 97f3d7e857..1615cc2fe9 100644
--- a/goldens/test/dependency_injection/generated_injector_large.template.dart.golden
+++ b/goldens/test/dependency_injection/generated_injector_large.template.dart.golden
@@ -11,7 +11,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 
diff --git a/goldens/test/dependency_injection/generated_injector_small.dart b/goldens/test/dependency_injection/generated_injector_small.dart
index b95e24b561..306fb3fc31 100644
--- a/goldens/test/dependency_injection/generated_injector_small.dart
+++ b/goldens/test/dependency_injection/generated_injector_small.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'generated_injector_small.template.dart' as ng;
diff --git a/goldens/test/dependency_injection/generated_injector_small.template.dart.golden b/goldens/test/dependency_injection/generated_injector_small.template.dart.golden
index 35bf6c7698..ae1fb7851e 100644
--- a/goldens/test/dependency_injection/generated_injector_small.template.dart.golden
+++ b/goldens/test/dependency_injection/generated_injector_small.template.dart.golden
@@ -12,7 +12,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 
diff --git a/goldens/test/dependency_injection/injector_get_internal.dart b/goldens/test/dependency_injection/injector_get_internal.dart
index e3a0265c8a..60485e6002 100644
--- a/goldens/test/dependency_injection/injector_get_internal.dart
+++ b/goldens/test/dependency_injection/injector_get_internal.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'injector_get_internal.template.dart' as ng;
diff --git a/goldens/test/dependency_injection/injector_get_internal.template.dart.golden b/goldens/test/dependency_injection/injector_get_internal.template.dart.golden
index 002d84dfd3..b2e4a9ba5d 100644
--- a/goldens/test/dependency_injection/injector_get_internal.template.dart.golden
+++ b/goldens/test/dependency_injection/injector_get_internal.template.dart.golden
@@ -10,7 +10,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import3;
 import 'package:ngdart/src/core/linker/views/view.dart' as import4;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import5;
 import 'package:ngdart/src/utilities.dart' as import6;
-import 'dart:html' as import7;
+import 'package:web/web.dart' as import7;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import8;
 import 'package:ngdart/src/devtools.dart' as import9;
 import 'package:ngdart/src/meta/di_tokens.dart' as import10;
diff --git a/goldens/test/dependency_injection/inlined_providers.dart b/goldens/test/dependency_injection/inlined_providers.dart
index 19d9dfb9c6..a3adb62b3e 100644
--- a/goldens/test/dependency_injection/inlined_providers.dart
+++ b/goldens/test/dependency_injection/inlined_providers.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'inlined_providers.template.dart' as ng;
diff --git a/goldens/test/dependency_injection/inlined_providers.template.dart.golden b/goldens/test/dependency_injection/inlined_providers.template.dart.golden
index a6ace8adad..ea011403d2 100644
--- a/goldens/test/dependency_injection/inlined_providers.template.dart.golden
+++ b/goldens/test/dependency_injection/inlined_providers.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/angular.dart';
diff --git a/goldens/test/dependency_injection/opaque_token.dart b/goldens/test/dependency_injection/opaque_token.dart
index c93d4e4d08..7d35367fe7 100644
--- a/goldens/test/dependency_injection/opaque_token.dart
+++ b/goldens/test/dependency_injection/opaque_token.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'opaque_token.template.dart' as ng;
diff --git a/goldens/test/dependency_injection/opaque_token.template.dart.golden b/goldens/test/dependency_injection/opaque_token.template.dart.golden
index 325817f3f7..f677799aad 100644
--- a/goldens/test/dependency_injection/opaque_token.template.dart.golden
+++ b/goldens/test/dependency_injection/opaque_token.template.dart.golden
@@ -12,7 +12,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 import 'dart:core';
diff --git a/goldens/test/dependency_injection/visibility.template.dart.golden b/goldens/test/dependency_injection/visibility.template.dart.golden
index 7b8364d11b..f7403881b5 100644
--- a/goldens/test/dependency_injection/visibility.template.dart.golden
+++ b/goldens/test/dependency_injection/visibility.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 
diff --git a/goldens/test/devtools/inputs.dart b/goldens/test/devtools/inputs.dart
index e79f19c280..cf33597f67 100644
--- a/goldens/test/devtools/inputs.dart
+++ b/goldens/test/devtools/inputs.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'inputs.template.dart' as ng;
diff --git a/goldens/test/devtools/inputs.template.dart.golden b/goldens/test/devtools/inputs.template.dart.golden
index 4a3d965aaa..ac115f32c4 100644
--- a/goldens/test/devtools/inputs.template.dart.golden
+++ b/goldens/test/devtools/inputs.template.dart.golden
@@ -10,7 +10,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import3;
 import 'package:ngdart/src/core/linker/views/view.dart' as import4;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import5;
 import 'package:ngdart/src/utilities.dart' as import6;
-import 'dart:html' as import7;
+import 'package:web/web.dart' as import7;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import8;
 import 'package:ngdart/src/devtools.dart' as import9;
 import 'package:ngdart/src/runtime/check_binding.dart' as import10;
diff --git a/goldens/test/dom_bindings/events.dart b/goldens/test/dom_bindings/events.dart
index 54aa0377d0..f6c4e1ec09 100644
--- a/goldens/test/dom_bindings/events.dart
+++ b/goldens/test/dom_bindings/events.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'events.template.dart' as ng;
diff --git a/goldens/test/dom_bindings/events.template.dart.golden b/goldens/test/dom_bindings/events.template.dart.golden
index 7b3d43e77f..ba6f58b102 100644
--- a/goldens/test/dom_bindings/events.template.dart.golden
+++ b/goldens/test/dom_bindings/events.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import9;
diff --git a/goldens/test/dom_bindings/host_annotations.dart b/goldens/test/dom_bindings/host_annotations.dart
index 45ca9bd456..bf286d3c6f 100644
--- a/goldens/test/dom_bindings/host_annotations.dart
+++ b/goldens/test/dom_bindings/host_annotations.dart
@@ -3,7 +3,7 @@ library golden;
 
 import 'dart:async';
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'host_annotations.template.dart' as ng;
diff --git a/goldens/test/dom_bindings/host_annotations.template.dart.golden b/goldens/test/dom_bindings/host_annotations.template.dart.golden
index 125a5e9944..688ce37484 100644
--- a/goldens/test/dom_bindings/host_annotations.template.dart.golden
+++ b/goldens/test/dom_bindings/host_annotations.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/src/core/linker/app_view_utils.dart' as import9;
diff --git a/goldens/test/dom_bindings/html_properties.dart b/goldens/test/dom_bindings/html_properties.dart
index dfe78a9820..e9ac4366ec 100644
--- a/goldens/test/dom_bindings/html_properties.dart
+++ b/goldens/test/dom_bindings/html_properties.dart
@@ -1,7 +1,7 @@
 // @JS()
 // library golden;
 
-// import 'package:js/js.dart';
+// import 'dart:js_interop';
 // import 'package:safe_html/safe_html.dart';
 // import 'package:ngdart/angular.dart';
 
diff --git a/goldens/test/dom_bindings/interpolate.dart b/goldens/test/dom_bindings/interpolate.dart
index 7ea35484b8..fe85f54092 100644
--- a/goldens/test/dom_bindings/interpolate.dart
+++ b/goldens/test/dom_bindings/interpolate.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'interpolate.template.dart' as ng;
diff --git a/goldens/test/dom_bindings/interpolate.template.dart.golden b/goldens/test/dom_bindings/interpolate.template.dart.golden
index d2184c4d47..260a0b04f3 100644
--- a/goldens/test/dom_bindings/interpolate.template.dart.golden
+++ b/goldens/test/dom_bindings/interpolate.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/check_binding.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/angular.dart';
diff --git a/goldens/test/lifecycle_hooks/after_changes.dart b/goldens/test/lifecycle_hooks/after_changes.dart
index ae1638e8cd..3b54c95fc3 100644
--- a/goldens/test/lifecycle_hooks/after_changes.dart
+++ b/goldens/test/lifecycle_hooks/after_changes.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'after_changes.template.dart' as ng;
diff --git a/goldens/test/lifecycle_hooks/after_changes.template.dart.golden b/goldens/test/lifecycle_hooks/after_changes.template.dart.golden
index dedcbb9e9e..966a6d2f8c 100644
--- a/goldens/test/lifecycle_hooks/after_changes.template.dart.golden
+++ b/goldens/test/lifecycle_hooks/after_changes.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/check_binding.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/angular.dart';
diff --git a/goldens/test/lifecycle_hooks/after_queries.dart b/goldens/test/lifecycle_hooks/after_queries.dart
index 43823826f9..6290789deb 100644
--- a/goldens/test/lifecycle_hooks/after_queries.dart
+++ b/goldens/test/lifecycle_hooks/after_queries.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'after_queries.template.dart' as ng;
diff --git a/goldens/test/lifecycle_hooks/after_queries.template.dart.golden b/goldens/test/lifecycle_hooks/after_queries.template.dart.golden
index 1edaf89609..a72258739e 100644
--- a/goldens/test/lifecycle_hooks/after_queries.template.dart.golden
+++ b/goldens/test/lifecycle_hooks/after_queries.template.dart.golden
@@ -11,7 +11,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import4;
 import 'package:ngdart/src/core/linker/views/view.dart' as import5;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import6;
 import 'package:ngdart/src/utilities.dart' as import7;
-import 'dart:html' as import8;
+import 'package:web/web.dart' as import8;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import9;
 import 'package:ngdart/src/core/linker/template_ref.dart';
 import 'package:ngdart/src/devtools.dart' as import11;
diff --git a/goldens/test/lifecycle_hooks/do_check.dart b/goldens/test/lifecycle_hooks/do_check.dart
index 61cdb9b8ef..30caa08145 100644
--- a/goldens/test/lifecycle_hooks/do_check.dart
+++ b/goldens/test/lifecycle_hooks/do_check.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'do_check.template.dart' as ng;
diff --git a/goldens/test/lifecycle_hooks/do_check.template.dart.golden b/goldens/test/lifecycle_hooks/do_check.template.dart.golden
index 29e7242580..fbc636ca25 100644
--- a/goldens/test/lifecycle_hooks/do_check.template.dart.golden
+++ b/goldens/test/lifecycle_hooks/do_check.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/check_binding.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/angular.dart';
diff --git a/goldens/test/lifecycle_hooks/on_init_and_destroy.dart b/goldens/test/lifecycle_hooks/on_init_and_destroy.dart
index 3930844b63..2d2fd0e9c3 100644
--- a/goldens/test/lifecycle_hooks/on_init_and_destroy.dart
+++ b/goldens/test/lifecycle_hooks/on_init_and_destroy.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'on_init_and_destroy.template.dart' as ng;
diff --git a/goldens/test/lifecycle_hooks/on_init_and_destroy.template.dart.golden b/goldens/test/lifecycle_hooks/on_init_and_destroy.template.dart.golden
index 9897e42334..8b5d64395e 100644
--- a/goldens/test/lifecycle_hooks/on_init_and_destroy.template.dart.golden
+++ b/goldens/test/lifecycle_hooks/on_init_and_destroy.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/check_binding.dart' as import7;
 import 'package:ngdart/src/devtools.dart' as import8;
 import 'package:ngdart/angular.dart';
diff --git a/goldens/test/nnbd/hello_world.template.dart.golden b/goldens/test/nnbd/hello_world.template.dart.golden
index 2ae72cf41f..f232257718 100644
--- a/goldens/test/nnbd/hello_world.template.dart.golden
+++ b/goldens/test/nnbd/hello_world.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import7;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import9;
diff --git a/goldens/test/templates/directive_star_syntax.dart b/goldens/test/templates/directive_star_syntax.dart
index b70b134964..0ee2190c04 100644
--- a/goldens/test/templates/directive_star_syntax.dart
+++ b/goldens/test/templates/directive_star_syntax.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'directive_star_syntax.template.dart' as ng;
diff --git a/goldens/test/templates/directive_star_syntax.template.dart.golden b/goldens/test/templates/directive_star_syntax.template.dart.golden
index 480808a114..17976ae9b6 100644
--- a/goldens/test/templates/directive_star_syntax.template.dart.golden
+++ b/goldens/test/templates/directive_star_syntax.template.dart.golden
@@ -12,7 +12,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import5;
 import 'package:ngdart/src/core/linker/views/view.dart' as import6;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import7;
 import 'package:ngdart/src/utilities.dart' as import8;
-import 'dart:html' as import9;
+import 'package:web/web.dart' as import9;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import10;
 import 'package:ngdart/src/core/linker/template_ref.dart';
 import 'package:ngdart/src/devtools.dart' as import12;
diff --git a/goldens/test/templates/encapsulation.dart b/goldens/test/templates/encapsulation.dart
index a2040df0f4..24aee81333 100644
--- a/goldens/test/templates/encapsulation.dart
+++ b/goldens/test/templates/encapsulation.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'encapsulation.template.dart' as ng;
diff --git a/goldens/test/templates/encapsulation.template.dart.golden b/goldens/test/templates/encapsulation.template.dart.golden
index 45b95e8069..9568ce4b55 100644
--- a/goldens/test/templates/encapsulation.template.dart.golden
+++ b/goldens/test/templates/encapsulation.template.dart.golden
@@ -5,7 +5,7 @@
 import 'encapsulation.dart';
 import 'package:ngdart/src/core/linker/views/component_view.dart' as import0;
 import 'encapsulation.dart' as import1;
-import 'dart:html' as import2;
+import 'package:web/web.dart' as import2;
 import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import3;
 import 'package:ngdart/src/core/linker/views/view.dart' as import4;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import5;
diff --git a/goldens/test/templates/generic_directives.dart b/goldens/test/templates/generic_directives.dart
index 9b0b7719d9..cd2095ebce 100644
--- a/goldens/test/templates/generic_directives.dart
+++ b/goldens/test/templates/generic_directives.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'generic_directives.template.dart' as ng;
diff --git a/goldens/test/templates/generic_directives.template.dart.golden b/goldens/test/templates/generic_directives.template.dart.golden
index ea129ccb92..eb291b848c 100644
--- a/goldens/test/templates/generic_directives.template.dart.golden
+++ b/goldens/test/templates/generic_directives.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 import 'package:ngdart/src/runtime/check_binding.dart' as import9;
diff --git a/goldens/test/templates/i18n.template.dart.golden b/goldens/test/templates/i18n.template.dart.golden
index 5658984b6e..29e28532e9 100644
--- a/goldens/test/templates/i18n.template.dart.golden
+++ b/goldens/test/templates/i18n.template.dart.golden
@@ -10,7 +10,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import3;
 import 'package:ngdart/src/core/linker/views/view.dart' as import4;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import5;
 import 'package:ngdart/src/utilities.dart' as import6;
-import 'dart:html' as import7;
+import 'package:web/web.dart' as import7;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import8;
 import 'package:ngdart/src/core/linker/app_view_utils.dart' as import9;
 import 'package:ngdart/src/devtools.dart' as import10;
diff --git a/goldens/test/templates/large_templates.dart b/goldens/test/templates/large_templates.dart
index 7ba6696d8b..3efb3ffc1e 100644
--- a/goldens/test/templates/large_templates.dart
+++ b/goldens/test/templates/large_templates.dart
@@ -4,7 +4,7 @@ library golden;
 // This code is roughly intended to reflect large-internal clients, i.e.
 // https://source.corp.google.com/piper///depot/google3/ads/awapps2/cm/client/overview/root/lib/overview.template.dart
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'large_templates.template.dart' as ng;
diff --git a/goldens/test/templates/large_templates.template.dart.golden b/goldens/test/templates/large_templates.template.dart.golden
index fb4b10b70b..6e50c1b133 100644
--- a/goldens/test/templates/large_templates.template.dart.golden
+++ b/goldens/test/templates/large_templates.template.dart.golden
@@ -11,7 +11,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import4;
 import 'package:ngdart/src/core/linker/views/view.dart' as import5;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import6;
 import 'package:ngdart/src/utilities.dart' as import7;
-import 'dart:html' as import8;
+import 'package:web/web.dart' as import8;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import9;
 import 'package:ngdart/src/core/linker/template_ref.dart';
 import 'package:ngdart/src/devtools.dart' as import11;
diff --git a/goldens/test/templates/nested_structural_directives.dart b/goldens/test/templates/nested_structural_directives.dart
index 9515ec6af4..441c4b21f1 100644
--- a/goldens/test/templates/nested_structural_directives.dart
+++ b/goldens/test/templates/nested_structural_directives.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'nested_structural_directives.template.dart' as ng;
diff --git a/goldens/test/templates/nested_structural_directives.template.dart.golden b/goldens/test/templates/nested_structural_directives.template.dart.golden
index 7a4c4f6c15..05300ea93a 100644
--- a/goldens/test/templates/nested_structural_directives.template.dart.golden
+++ b/goldens/test/templates/nested_structural_directives.template.dart.golden
@@ -11,7 +11,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import4;
 import 'package:ngdart/src/core/linker/views/view.dart' as import5;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import6;
 import 'package:ngdart/src/utilities.dart' as import7;
-import 'dart:html' as import8;
+import 'package:web/web.dart' as import8;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import9;
 import 'package:ngdart/src/core/linker/template_ref.dart';
 import 'package:ngdart/src/devtools.dart' as import11;
diff --git a/goldens/test/templates/pipes.dart b/goldens/test/templates/pipes.dart
index e80b2e9bcd..a4711d5252 100644
--- a/goldens/test/templates/pipes.dart
+++ b/goldens/test/templates/pipes.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'pipes.template.dart' as ng;
diff --git a/goldens/test/templates/pipes.template.dart.golden b/goldens/test/templates/pipes.template.dart.golden
index cd1e7eb3da..3efc15c639 100644
--- a/goldens/test/templates/pipes.template.dart.golden
+++ b/goldens/test/templates/pipes.template.dart.golden
@@ -11,7 +11,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import4;
 import 'package:ngdart/src/core/linker/views/view.dart' as import5;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import6;
 import 'package:ngdart/src/utilities.dart' as import7;
-import 'dart:html' as import8;
+import 'package:web/web.dart' as import8;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import9;
 import 'package:ngdart/src/runtime/proxies.dart' as import10;
 import 'package:ngdart/src/runtime/interpolate.dart' as import11;
diff --git a/goldens/test/templates/queries.dart b/goldens/test/templates/queries.dart
index b409fe5e9e..5b0fdf783c 100644
--- a/goldens/test/templates/queries.dart
+++ b/goldens/test/templates/queries.dart
@@ -1,10 +1,10 @@
 @JS()
 library golden;
 
-import 'dart:html';
+import 'dart:js_interop';
 
-import 'package:js/js.dart';
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart';
 
 import 'queries.template.dart' as ng;
 
diff --git a/goldens/test/templates/queries.template.dart.golden b/goldens/test/templates/queries.template.dart.golden
index db96fec558..fd323ead27 100644
--- a/goldens/test/templates/queries.template.dart.golden
+++ b/goldens/test/templates/queries.template.dart.golden
@@ -11,7 +11,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import4;
 import 'package:ngdart/src/core/linker/views/view.dart' as import5;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import6;
 import 'package:ngdart/src/utilities.dart' as import7;
-import 'dart:html' as import8;
+import 'package:web/web.dart' as import8;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import9;
 import 'package:ngdart/src/devtools.dart' as import10;
 import 'package:ngdart/src/core/linker/template_ref.dart';
diff --git a/goldens/test/templates/type_inference.template.dart.golden b/goldens/test/templates/type_inference.template.dart.golden
index a557d74659..8b7ef8cc81 100644
--- a/goldens/test/templates/type_inference.template.dart.golden
+++ b/goldens/test/templates/type_inference.template.dart.golden
@@ -12,7 +12,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import5;
 import 'package:ngdart/src/core/linker/views/view.dart' as import6;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import7;
 import 'package:ngdart/src/utilities.dart' as import8;
-import 'dart:html' as import9;
+import 'package:web/web.dart' as import9;
 import 'package:ngdart/src/runtime/dom_helpers.dart' as import10;
 import 'package:ngdart/src/core/linker/template_ref.dart';
 import 'package:ngdart/src/devtools.dart' as import12;
diff --git a/goldens/test/templates/whitespace.dart b/goldens/test/templates/whitespace.dart
index 5aa5fb16fb..d7ac10b7e4 100644
--- a/goldens/test/templates/whitespace.dart
+++ b/goldens/test/templates/whitespace.dart
@@ -1,7 +1,7 @@
 @JS()
 library golden;
 
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:ngdart/angular.dart';
 
 import 'whitespace.template.dart' as ng;
diff --git a/goldens/test/templates/whitespace.template.dart.golden b/goldens/test/templates/whitespace.template.dart.golden
index 98708752a7..1230fbafde 100644
--- a/goldens/test/templates/whitespace.template.dart.golden
+++ b/goldens/test/templates/whitespace.template.dart.golden
@@ -9,7 +9,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart' as import2;
 import 'package:ngdart/src/core/linker/views/view.dart' as import3;
 import 'package:ngdart/src/meta/change_detection_constants.dart' as import4;
 import 'package:ngdart/src/utilities.dart' as import5;
-import 'dart:html' as import6;
+import 'package:web/web.dart' as import6;
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/core/linker/views/host_view.dart' as import8;
 import 'package:intl/intl.dart' as import9;
diff --git a/ngcompiler/lib/v1/src/angular_compiler/outliner.dart b/ngcompiler/lib/v1/src/angular_compiler/outliner.dart
index 0df986d0c5..3352d8a1c9 100644
--- a/ngcompiler/lib/v1/src/angular_compiler/outliner.dart
+++ b/ngcompiler/lib/v1/src/angular_compiler/outliner.dart
@@ -6,7 +6,7 @@ import 'analyzer.dart';
 import 'outliner/collect_type_parameters.dart';
 
 const _angularImports = '''
-import 'dart:html' as _html;
+import 'package:web/web.dart' as _web;
 import 'package:ngdart/angular.dart' as _ng;
 import 'package:ngdart/src/core/change_detection/directive_change_detector.dart' as _ng;
 import 'package:ngdart/src/core/linker/views/component_view.dart' as _ng;
@@ -168,7 +168,7 @@ class $changeDetectorName$typeParameters extends _ng.DirectiveChangeDetector {
   external $directiveType get instance;
   external void deliverChanges();
   external $changeDetectorName($directiveType instance);
-  external void detectHostChanges(_ng.RenderView view, _html.Element hostElement);
+  external void detectHostChanges(_ng.RenderView view, _web.Element hostElement);
 }
 ''');
       }
diff --git a/ngcompiler/lib/v1/src/compiler/analyzed_class.dart b/ngcompiler/lib/v1/src/compiler/analyzed_class.dart
index 9edb63c26f..f9417c62ca 100644
--- a/ngcompiler/lib/v1/src/compiler/analyzed_class.dart
+++ b/ngcompiler/lib/v1/src/compiler/analyzed_class.dart
@@ -241,11 +241,11 @@ class _TypeResolver extends ast.AstVisitor<DartType, dynamic> {
         _implicitReceiverType = classElement.thisType;
 
   @override
-  DartType visitBinary(ast.Binary ast, _) {
+  DartType visitBinary(ast.Binary ast, context) {
     // Special case for adding two strings together.
     if (ast.operator == '+' &&
-        ast.left.visit(this, _) == _stringType &&
-        ast.right.visit(this, _) == _stringType) {
+        ast.left.visit(this, context) == _stringType &&
+        ast.right.visit(this, context) == _stringType) {
       return _stringType;
     }
     return _dynamicType;
@@ -264,13 +264,13 @@ class _TypeResolver extends ast.AstVisitor<DartType, dynamic> {
   DartType visitIfNull(ast.IfNull ast, _) => _dynamicType;
 
   @override
-  DartType visitImplicitReceiver(ast.ImplicitReceiver ast, _) =>
+  DartType visitImplicitReceiver(ast.ImplicitReceiver ast, context) =>
       _implicitReceiverType;
 
   @override
-  DartType visitInterpolation(ast.Interpolation ast, _) {
+  DartType visitInterpolation(ast.Interpolation ast, context) {
     if (ast.expressions.length == 1) {
-      final type = ast.expressions[0].visit(this, _);
+      final type = ast.expressions[0].visit(this, context);
       if (_isPrimitive(type)) {
         return type;
       }
@@ -290,8 +290,8 @@ class _TypeResolver extends ast.AstVisitor<DartType, dynamic> {
       ast.value is String ? _stringType : _dynamicType;
 
   @override
-  DartType visitMethodCall(ast.MethodCall ast, _) {
-    var receiverType = ast.receiver.visit(this, _);
+  DartType visitMethodCall(ast.MethodCall ast, context) {
+    var receiverType = ast.receiver.visit(this, context);
     return _lookupMethodReturnType(receiverType, ast.name);
   }
 
@@ -308,8 +308,8 @@ class _TypeResolver extends ast.AstVisitor<DartType, dynamic> {
   DartType visitPostfixNotNull(ast.PostfixNotNull ast, _) => _dynamicType;
 
   @override
-  DartType visitPropertyRead(ast.PropertyRead ast, _) {
-    var receiverType = ast.receiver.visit(this, _);
+  DartType visitPropertyRead(ast.PropertyRead ast, context) {
+    var receiverType = ast.receiver.visit(this, context);
     if (identical(receiverType, _implicitReceiverType)) {
       // This may be a local variable.
       for (var variableName in _variables.keys) {
@@ -325,14 +325,14 @@ class _TypeResolver extends ast.AstVisitor<DartType, dynamic> {
   DartType visitPropertyWrite(ast.PropertyWrite ast, _) => _dynamicType;
 
   @override
-  DartType visitSafeMethodCall(ast.SafeMethodCall ast, _) {
-    var receiverType = ast.receiver.visit(this, _);
+  DartType visitSafeMethodCall(ast.SafeMethodCall ast, context) {
+    var receiverType = ast.receiver.visit(this, context);
     return _lookupMethodReturnType(receiverType, ast.name);
   }
 
   @override
-  DartType visitSafePropertyRead(ast.SafePropertyRead ast, _) {
-    var receiverType = ast.receiver.visit(this, _);
+  DartType visitSafePropertyRead(ast.SafePropertyRead ast, context) {
+    var receiverType = ast.receiver.visit(this, context);
     return _lookupGetterReturnType(receiverType, ast.name);
   }
 
diff --git a/ngcompiler/pubspec.yaml b/ngcompiler/pubspec.yaml
index 46ae31bb4a..abba6ce7fe 100644
--- a/ngcompiler/pubspec.yaml
+++ b/ngcompiler/pubspec.yaml
@@ -27,6 +27,6 @@ dependencies:
 
 dev_dependencies:
   build_test: ^2.2.1
-  lints: ^2.1.0
+  lints: ^4.0.0
   package_config: ^2.1.0
-  test: ">=1.24.0 <1.25.0"
+  test: ^1.25.7
diff --git a/ngdart/lib/angular.dart b/ngdart/lib/angular.dart
index b8eecb2b2c..241449a75f 100644
--- a/ngdart/lib/angular.dart
+++ b/ngdart/lib/angular.dart
@@ -78,3 +78,4 @@ export 'src/runtime/check_binding.dart' show debugCheckBindings;
 // TODO(b/116697059): Move to a testonly=1 library.
 export 'src/testability.dart'
     show testabilityProvider, Testability, TestabilityRegistry;
+export 'src/utilities/iterables.dart';
diff --git a/ngdart/lib/src/common/directives/ng_class.dart b/ngdart/lib/src/common/directives/ng_class.dart
index 19ba422a90..90d93ff7bd 100644
--- a/ngdart/lib/src/common/directives/ng_class.dart
+++ b/ngdart/lib/src/common/directives/ng_class.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:ngdart/src/core/change_detection/differs/default_iterable_differ.dart';
 import 'package:ngdart/src/core/change_detection/differs/default_keyvalue_differ.dart';
 import 'package:ngdart/src/meta.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 /// The [NgClass] directive conditionally adds and removes CSS classes on an
 /// HTML element based on an expression's evaluation result.
@@ -173,7 +172,7 @@ class NgClass implements DoCheck, OnDestroy {
     className = className.trim();
     if (className.isEmpty) return;
     var el = _ngEl;
-    var classList = el.classes;
+    var classList = el.classList;
     if (className.contains(' ')) {
       var classes = className.split(_separator);
       for (var i = 0, len = classes.length; i < len; i++) {
diff --git a/ngdart/lib/src/common/directives/ng_style.dart b/ngdart/lib/src/common/directives/ng_style.dart
index 193ec5bf10..9e863db413 100644
--- a/ngdart/lib/src/common/directives/ng_style.dart
+++ b/ngdart/lib/src/common/directives/ng_style.dart
@@ -1,7 +1,7 @@
-import 'dart:html';
-
+// import 'package:web/web.dart';
 import 'package:ngdart/src/meta.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import '../../core/change_detection/differs/default_keyvalue_differ.dart';
 
@@ -58,7 +58,7 @@ import '../../core/change_detection/differs/default_keyvalue_differ.dart';
   selector: '[ngStyle]',
 )
 class NgStyle implements DoCheck {
-  final Element _ngElement;
+  final HTMLElement _ngElement;
   Map<String, String?>? _rawStyle;
   DefaultKeyValueDiffer? _differ;
 
diff --git a/ngdart/lib/src/core/application_ref.dart b/ngdart/lib/src/core/application_ref.dart
index a8fd36da7d..c9b9560333 100644
--- a/ngdart/lib/src/core/application_ref.dart
+++ b/ngdart/lib/src/core/application_ref.dart
@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:ngdart/src/core/exception_handler.dart';
@@ -7,6 +6,7 @@ import 'package:ngdart/src/devtools.dart';
 import 'package:ngdart/src/di/injector.dart';
 import 'package:ngdart/src/testability.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'change_detection/host.dart';
 import 'linker/component_factory.dart' show ComponentRef, ComponentFactory;
diff --git a/ngdart/lib/src/core/change_detection/directive_change_detector.dart b/ngdart/lib/src/core/change_detection/directive_change_detector.dart
index 51c1065831..7742deaed4 100644
--- a/ngdart/lib/src/core/change_detection/directive_change_detector.dart
+++ b/ngdart/lib/src/core/change_detection/directive_change_detector.dart
@@ -1,6 +1,5 @@
-import 'dart:html';
-
 import 'package:ngdart/src/core/linker/views/render_view.dart';
+import 'package:web/web.dart';
 
 /// Base class for helpers generated for some classes annotated with @Directive.
 ///
diff --git a/ngdart/lib/src/core/exception_handler.dart b/ngdart/lib/src/core/exception_handler.dart
index 918ac544cd..8c73bd25b3 100644
--- a/ngdart/lib/src/core/exception_handler.dart
+++ b/ngdart/lib/src/core/exception_handler.dart
@@ -1,4 +1,6 @@
-import 'dart:html';
+import 'dart:js_interop';
+
+import 'package:web/web.dart';
 
 /// Provides a hook for receiving unhandled errors/exceptions.
 ///
@@ -64,10 +66,10 @@ class ExceptionHandler {
     Object? stackTrace,
     @Deprecated('No longer supported. Remove this argument.') String? reason,
   ]) {
-    window.console.error(ExceptionHandler.exceptionToString(
+    console.error(ExceptionHandler.exceptionToString(
       exception,
       stackTrace,
       reason,
-    ));
+    ).toJS);
   }
 }
diff --git a/ngdart/lib/src/core/linker/app_view_utils.dart b/ngdart/lib/src/core/linker/app_view_utils.dart
index 4258326ea5..617483c19b 100644
--- a/ngdart/lib/src/core/linker/app_view_utils.dart
+++ b/ngdart/lib/src/core/linker/app_view_utils.dart
@@ -1,7 +1,6 @@
-import 'dart:html' show DocumentFragment, NodeTreeSanitizer;
-
 import 'package:ngdart/src/core/application_tokens.dart' as tokens show appId;
 import 'package:ngdart/src/runtime/dom_events.dart' show EventManager;
+import 'package:web/web.dart';
 
 /// Application wide view utilities.
 late AppViewUtils appViewUtils;
@@ -20,8 +19,6 @@ class AppViewUtils {
 
 /// Creates a document fragment from [trustedHtml].
 DocumentFragment createTrustedHtml(String trustedHtml) {
-  return DocumentFragment.html(
-    trustedHtml,
-    treeSanitizer: NodeTreeSanitizer.trusted,
-  );
+  //TODO: test this behavior
+  return document.createDocumentFragment()..textContent = trustedHtml;
 }
diff --git a/ngdart/lib/src/core/linker/component_factory.dart b/ngdart/lib/src/core/linker/component_factory.dart
index df43db9f59..61a0491053 100644
--- a/ngdart/lib/src/core/linker/component_factory.dart
+++ b/ngdart/lib/src/core/linker/component_factory.dart
@@ -1,11 +1,10 @@
-import 'dart:html';
-
 import 'package:meta/meta.dart';
 import 'package:ngdart/src/core/change_detection/change_detector_ref.dart';
 import 'package:ngdart/src/core/zone/ng_zone.dart';
 import 'package:ngdart/src/di/injector.dart';
 import 'package:ngdart/src/meta.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'view_ref.dart' show ViewRef;
 import 'views/host_view.dart';
diff --git a/ngdart/lib/src/core/linker/style_encapsulation.dart b/ngdart/lib/src/core/linker/style_encapsulation.dart
index 9f2fa41aaf..71768113c1 100644
--- a/ngdart/lib/src/core/linker/style_encapsulation.dart
+++ b/ngdart/lib/src/core/linker/style_encapsulation.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:ngdart/src/core/linker/app_view_utils.dart';
 import 'package:ngdart/src/runtime/dom_helpers.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 /// Clears all component styles from the DOM.
 ///
@@ -167,7 +166,7 @@ class ComponentStyles {
       target.add('/* From: $_componentUrl*/');
     }
     final styles = _flattenStyles(_styles, target, _componentId).join();
-    final styleElement = StyleElement()..text = styles;
+    final styleElement = HTMLStyleElement()..text = styles;
     if (isDevMode) {
       // Remove style element from the DOM on hot restart.
       debugOnClear(() {
diff --git a/ngdart/lib/src/core/linker/view_container.dart b/ngdart/lib/src/core/linker/view_container.dart
index f1f11280da..fe355e3fc2 100644
--- a/ngdart/lib/src/core/linker/view_container.dart
+++ b/ngdart/lib/src/core/linker/view_container.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:meta/meta.dart';
 import 'package:ngdart/src/di/injector.dart' show Injector;
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'component_factory.dart' show ComponentFactory, ComponentRef;
 import 'component_loader.dart';
diff --git a/ngdart/lib/src/core/linker/view_fragment.dart b/ngdart/lib/src/core/linker/view_fragment.dart
index 9a52fe19a2..410aa14dc5 100644
--- a/ngdart/lib/src/core/linker/view_fragment.dart
+++ b/ngdart/lib/src/core/linker/view_fragment.dart
@@ -1,7 +1,6 @@
-import 'dart:html';
-
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'view_container.dart';
 
diff --git a/ngdart/lib/src/core/linker/view_ref.dart b/ngdart/lib/src/core/linker/view_ref.dart
index a0d04317c3..5d10e69cdd 100644
--- a/ngdart/lib/src/core/linker/view_ref.dart
+++ b/ngdart/lib/src/core/linker/view_ref.dart
@@ -1,4 +1,4 @@
-import 'dart:html';
+import 'package:web/web.dart';
 
 /// An Angular view that can be created and destroyed dynamically.
 ///
diff --git a/ngdart/lib/src/core/linker/views/component_view.dart b/ngdart/lib/src/core/linker/views/component_view.dart
index bd9d050643..1d1594ead3 100644
--- a/ngdart/lib/src/core/linker/views/component_view.dart
+++ b/ngdart/lib/src/core/linker/views/component_view.dart
@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:meta/meta.dart';
@@ -8,6 +7,7 @@ import 'package:ngdart/src/core/linker/style_encapsulation.dart';
 import 'package:ngdart/src/devtools.dart';
 import 'package:ngdart/src/meta.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'render_view.dart';
 import 'view.dart';
diff --git a/ngdart/lib/src/core/linker/views/dynamic_view.dart b/ngdart/lib/src/core/linker/views/dynamic_view.dart
index fdadf47784..da08f96fd8 100644
--- a/ngdart/lib/src/core/linker/views/dynamic_view.dart
+++ b/ngdart/lib/src/core/linker/views/dynamic_view.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/src/core/linker/view_container.dart';
 import 'package:ngdart/src/core/linker/view_fragment.dart';
 import 'package:ngdart/src/core/linker/view_ref.dart';
+import 'package:web/web.dart';
 
 import 'view.dart';
 
diff --git a/ngdart/lib/src/core/linker/views/embedded_view.dart b/ngdart/lib/src/core/linker/views/embedded_view.dart
index 7809947be3..7e9ffa9d15 100644
--- a/ngdart/lib/src/core/linker/views/embedded_view.dart
+++ b/ngdart/lib/src/core/linker/views/embedded_view.dart
@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:meta/meta.dart';
@@ -11,6 +10,7 @@ import 'package:ngdart/src/core/linker/view_ref.dart';
 import 'package:ngdart/src/meta.dart';
 import 'package:ngdart/src/runtime/dom_helpers.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'dynamic_view.dart';
 import 'render_view.dart';
diff --git a/ngdart/lib/src/core/linker/views/host_view.dart b/ngdart/lib/src/core/linker/views/host_view.dart
index 5f481ceb5a..8f8b12a5ba 100644
--- a/ngdart/lib/src/core/linker/views/host_view.dart
+++ b/ngdart/lib/src/core/linker/views/host_view.dart
@@ -1,5 +1,3 @@
-import 'dart:html';
-
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:meta/meta.dart';
 import 'package:ngdart/src/core/change_detection/host.dart';
@@ -10,6 +8,7 @@ import 'package:ngdart/src/di/injector.dart';
 import 'package:ngdart/src/meta.dart';
 import 'package:ngdart/src/runtime/dom_helpers.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'component_view.dart';
 import 'dynamic_view.dart';
diff --git a/ngdart/lib/src/core/linker/views/render_view.dart b/ngdart/lib/src/core/linker/views/render_view.dart
index 40e2036a71..58dae44ea6 100644
--- a/ngdart/lib/src/core/linker/views/render_view.dart
+++ b/ngdart/lib/src/core/linker/views/render_view.dart
@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:ngdart/src/core/linker/app_view_utils.dart';
@@ -8,6 +7,7 @@ import 'package:ngdart/src/core/linker/view_container.dart';
 import 'package:ngdart/src/core/linker/view_fragment.dart';
 import 'package:ngdart/src/runtime/dom_helpers.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'view.dart';
 
diff --git a/ngdart/lib/src/core/linker/views/view.dart b/ngdart/lib/src/core/linker/views/view.dart
index b5898426d8..bd62e5d0a8 100644
--- a/ngdart/lib/src/core/linker/views/view.dart
+++ b/ngdart/lib/src/core/linker/views/view.dart
@@ -1,5 +1,3 @@
-import 'dart:html' show Element;
-
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:meta/meta.dart';
 import 'package:ngdart/src/core/change_detection/change_detection.dart';
@@ -8,6 +6,7 @@ import 'package:ngdart/src/di/errors.dart';
 import 'package:ngdart/src/di/injector.dart';
 import 'package:ngdart/src/meta.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart' show Element;
 
 /// The base implementation of all views.
 ///
diff --git a/ngdart/lib/src/devtools.dart b/ngdart/lib/src/devtools.dart
index 2a19b9322f..83318b8ff1 100644
--- a/ngdart/lib/src/devtools.dart
+++ b/ngdart/lib/src/devtools.dart
@@ -1,9 +1,9 @@
 @JS()
 library angular.src.devtools;
 
-import 'dart:html' as html;
+import 'dart:js_interop';
 
-import 'package:js/js.dart';
+import 'package:web/web.dart' as html;
 
 import 'devtools/inspector.dart';
 import 'utilities.dart';
@@ -23,12 +23,8 @@ bool _isDevToolsEnabled = false;
 void enableDevTools() {
   if (isDevMode) {
     _isDevToolsEnabled = true;
-    _getComponentElement = allowInterop(
-      Inspector.instance.getComponentElement,
-    );
-    _getComponentIdForNode = allowInterop(
-      Inspector.instance.getComponentIdForNode,
-    );
+    _getComponentElement = Inspector.instance.getComponentElement.toJS;
+    _getComponentIdForNode = Inspector.instance.getComponentIdForNode.toJS;
   }
 }
 
@@ -44,11 +40,7 @@ void registerContentRoot(html.Element element) {
 
 /// Specifies a function to look up an element by component ID in JavaScript.
 @JS('getAngularComponentElement')
-external set _getComponentElement(
-  html.HtmlElement Function(int) implementation,
-);
+external set _getComponentElement(JSFunction implementation);
 
 @JS('getAngularComponentIdForNode')
-external set _getComponentIdForNode(
-  void Function(html.Node, String) implementation,
-);
+external set _getComponentIdForNode(JSFunction implementation);
diff --git a/ngdart/lib/src/devtools/inspector.dart b/ngdart/lib/src/devtools/inspector.dart
index 69a7e0edf9..03c6c13c28 100644
--- a/ngdart/lib/src/devtools/inspector.dart
+++ b/ngdart/lib/src/devtools/inspector.dart
@@ -1,12 +1,15 @@
+// ignore_for_file: constant_identifier_names
+
 import 'dart:async';
 import 'dart:convert' show json;
 import 'dart:developer';
-import 'dart:html';
+import 'dart:js_interop';
 
 import 'package:built_collection/built_collection.dart';
 import 'package:built_value/serializer.dart';
 import 'package:meta/meta.dart';
 import 'package:stream_transform/stream_transform.dart';
+import 'package:web/web.dart';
 
 import '../core/application_ref.dart';
 import '../core/linker/views/component_view.dart';
@@ -69,10 +72,13 @@ class Inspector {
   /// inspecting another.
   void inspect(ApplicationRef applicationRef) {
     if (_applicationRef != null) {
-      window.console.error('''
+      console.error(
+        '''
 AngularDart DevTools does not yet support apps with multiple runApp()
 invocations. Please contact angulardart-eng@ if you encounter this error.
-''');
+'''
+            .toJS,
+      );
       return;
     }
 
@@ -247,7 +253,7 @@ invocations. Please contact angulardart-eng@ if you encounter this error.
       if (componentView != null) {
         return _referenceCounter.toId(componentView, groupName);
       }
-      current = current.parent;
+      current = current.parentNode;
     }
     return -1;
   }
@@ -280,7 +286,9 @@ invocations. Please contact angulardart-eng@ if you encounter this error.
   List<Map<String, Object>> getComponents(String groupName) {
     final json = <Map<String, Object>>[];
     for (final element in _contentRoots) {
-      final treeWalker = TreeWalker(element, NodeFilter.SHOW_ELEMENT);
+      final treeWalker =
+          //TODO:
+          document.createTreeWalker(element, NodeFilterExtensions.SHOW_ELEMENT);
       _collectJson(treeWalker, groupName, json);
     }
     return json;
@@ -295,8 +303,9 @@ invocations. Please contact angulardart-eng@ if you encounter this error.
     return BuiltList.build((b) {
       for (final element in _contentRoots) {
         // Structural directives can be anchored on comments.
-        final whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT;
-        final treeWalker = TreeWalker(element, whatToShow);
+        final whatToShow = NodeFilterExtensions.SHOW_ELEMENT |
+            NodeFilterExtensions.SHOW_COMMENT;
+        final treeWalker = document.createTreeWalker(element, whatToShow);
         _collectNodes(treeWalker, groupName, b);
       }
     });
@@ -410,3 +419,12 @@ class _InspectorNodeData {
   /// The directives applied to this node, if any.
   final directives = <Object>[];
 }
+
+/// See https://github.com/dart-lang/web/issues/252
+extension NodeFilterExtensions on NodeFilter {
+  static const SHOW_ALL = 0xFFFFFFFF;
+
+  static const SHOW_ELEMENT = 0x1;
+  static const SHOW_COMMENT = 0x80;
+  static const SHOW_TEXT = 0x4;
+}
diff --git a/ngdart/lib/src/meta/directives.dart b/ngdart/lib/src/meta/directives.dart
index de350e6552..ca247b568b 100644
--- a/ngdart/lib/src/meta/directives.dart
+++ b/ngdart/lib/src/meta/directives.dart
@@ -10,7 +10,7 @@ import 'visibility.dart';
 ///
 /// <?code-excerpt "docs/attribute-directives/lib/src/highlight_directive_1.dart"?>
 /// ```dart
-/// import 'dart:html';
+/// import 'package:web/web.dart';
 ///
 /// import 'package:ngdart/angular.dart';
 ///
diff --git a/ngdart/lib/src/runtime/dom_events.dart b/ngdart/lib/src/runtime/dom_events.dart
index 9bfc27de4d..5dc82083ca 100644
--- a/ngdart/lib/src/runtime/dom_events.dart
+++ b/ngdart/lib/src/runtime/dom_events.dart
@@ -1,6 +1,7 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 import 'package:ngdart/src/core/zone/ng_zone.dart';
+import 'package:web/web.dart';
 
 /// Provides a runtime implementation for "native" DOM events on elements.
 class EventManager {
@@ -33,7 +34,7 @@ class EventManager {
     // If the view compiler knows that a given event is a DOM event (i.e.
     // "click"), it will never be called into EventManager. But of course the
     // browser APIs change, so this is the final fallback.
-    element.addEventListener(name, callback);
+    element.addEventListener(name, callback.toJS);
   }
 }
 
@@ -85,11 +86,13 @@ class _KeyEventsHandler {
       return;
     }
 
-    element.addEventListener(parsed.domEventName, (event) {
-      if (event is KeyboardEvent && parsed.matches(event)) {
-        callback(event);
-      }
-    });
+    element.addEventListener(
+        parsed.domEventName,
+        (event) {
+          if (event is KeyboardEvent && parsed.matches(event)) {
+            callback(event);
+          }
+        }.toJS);
   }
 
   static _ParsedEvent? _parse(String name) {
diff --git a/ngdart/lib/src/runtime/dom_helpers.dart b/ngdart/lib/src/runtime/dom_helpers.dart
index aa702dc741..1018b107e5 100644
--- a/ngdart/lib/src/runtime/dom_helpers.dart
+++ b/ngdart/lib/src/runtime/dom_helpers.dart
@@ -4,12 +4,13 @@
 @JS()
 library angular.src.runtime.dom_helpers;
 
-import 'dart:html' hide document;
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
-import 'package:js/js.dart';
-import 'package:js/js_util.dart' as js;
+// import 'package:js/js_util.dart' as js;
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart' hide document;
 
 /// https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
 Text _createTextNode(String text) => Text(text);
@@ -42,11 +43,11 @@ var domRootRendererIsDirty = false;
 ///
 /// For [element]s not guaranteed to be HTML, see [updateClassBindingNonHtml].
 @dart2js.noInline
-void updateClassBinding(HtmlElement element, String className, bool isAdd) {
+void updateClassBinding(HTMLElement element, String className, bool isAdd) {
   if (isAdd) {
-    element.classes.add(className);
+    element.classList.add(className);
   } else {
-    element.classes.remove(className);
+    element.classList.remove(className);
   }
 }
 
@@ -60,9 +61,9 @@ void updateClassBinding(HtmlElement element, String className, bool isAdd) {
 @dart2js.noInline
 void updateClassBindingNonHtml(Element element, String className, bool isAdd) {
   if (isAdd) {
-    element.classes.add(className);
+    element.classList.add(className);
   } else {
-    element.classes.remove(className);
+    element.classList.remove(className);
   }
 }
 
@@ -126,7 +127,7 @@ void setProperty(
   String property,
   Object? value,
 ) {
-  js.setProperty(element, property, value);
+  element.setProperty(property.toJS, value?.toJSBox);
 }
 
 /// Creates a [Text] node with the provided [contents].
@@ -200,7 +201,7 @@ Comment appendAnchor(Node parent) {
 ///
 /// This is an optimization to reduce code size for a common operation.
 @dart2js.noInline
-DivElement appendDiv(Document doc, Node parent) {
+HTMLDivElement appendDiv(Document doc, Node parent) {
   return unsafeCast(parent.append(doc.createElement('div')));
 }
 
@@ -208,7 +209,7 @@ DivElement appendDiv(Document doc, Node parent) {
 ///
 /// This is an optimization to reduce code size for a common operation.
 @dart2js.noInline
-SpanElement appendSpan(Document doc, Node parent) {
+HTMLSpanElement appendSpan(Document doc, Node parent) {
   return unsafeCast(parent.append(doc.createElement('span')));
 }
 
@@ -267,10 +268,23 @@ void insertNodesAsSibling(List<Node> nodes, Node sibling) {
   if (nodes.isEmpty || parentOfSibling == null) {
     return;
   }
-  final nextSibling = sibling.nextNode;
+  final nextSibling = sibling.nextSibling;
   if (nextSibling == null) {
     appendNodes(nodes, parentOfSibling);
   } else {
     insertNodesBefore(nodes, parentOfSibling, nextSibling);
   }
 }
+
+extension NgNodeHelpers on Node {
+  //source: https://api.dart.dev/stable/2.19.5/dart-html/Node/remove.html
+  /// Removes this node from the DOM.
+  void remove() {
+    // TODO(jacobr): should we throw an exception if parent is already null?
+    // TODO(vsm): Use the native remove when available.
+    if (parentNode != null) {
+      final Node parent = parentNode!;
+      parent.removeChild(this);
+    }
+  }
+}
diff --git a/ngdart/lib/src/runtime/text_binding.dart b/ngdart/lib/src/runtime/text_binding.dart
index ece51b7083..da2e0989cf 100644
--- a/ngdart/lib/src/runtime/text_binding.dart
+++ b/ngdart/lib/src/runtime/text_binding.dart
@@ -1,7 +1,6 @@
-import 'dart:html';
-
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:ngdart/src/runtime/check_binding.dart';
+import 'package:web/web.dart';
 
 import 'interpolate.dart';
 
diff --git a/ngdart/lib/src/security/html_sanitizer.dart b/ngdart/lib/src/security/html_sanitizer.dart
index 336bbfb539..da7473b9c8 100644
--- a/ngdart/lib/src/security/html_sanitizer.dart
+++ b/ngdart/lib/src/security/html_sanitizer.dart
@@ -1,4 +1,4 @@
-import 'dart:html';
+import 'package:web/web.dart';
 
 final _inertFragment = DocumentFragment();
 
@@ -8,8 +8,8 @@ final _inertFragment = DocumentFragment();
 /// This function uses the builtin Dart innerHTML sanitization provided by
 /// NodeTreeSanitizer on an inert element.
 String? sanitizeHtmlInternal(String value) {
-  final inertFragment = _inertFragment..innerHtml = value;
-  final safeHtml = inertFragment.innerHtml;
-  inertFragment.children.clear();
+  final inertFragment = _inertFragment..textContent = value;
+  final safeHtml = inertFragment.textContent;
+  inertFragment.textContent = null;
   return safeHtml;
 }
diff --git a/ngdart/lib/src/security/safe_inner_html.dart b/ngdart/lib/src/security/safe_inner_html.dart
index 88b884f7ce..abf8cd8e8b 100644
--- a/ngdart/lib/src/security/safe_inner_html.dart
+++ b/ngdart/lib/src/security/safe_inner_html.dart
@@ -1,6 +1,5 @@
-import 'dart:html' show Element, NodeTreeSanitizer;
-
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart';
 
 import 'dom_sanitization_service.dart' show SafeHtml;
 
@@ -41,14 +40,11 @@ class SafeInnerHtmlDirective {
   SafeInnerHtmlDirective(this._element);
 
   @Input()
-  set safeInnerHtml(safeInnerHtml) {
+  set safeInnerHtml(dynamic safeInnerHtml) {
     if (safeInnerHtml is SafeHtml) {
-      _element.setInnerHtml(
-        safeInnerHtml.changingThisWillBypassSecurityTrust,
-        treeSanitizer: NodeTreeSanitizer.trusted,
-      );
+      _element.textContent = safeInnerHtml.changingThisWillBypassSecurityTrust;
     } else if (safeInnerHtml == null) {
-      _element.setInnerHtml('');
+      _element.textContent = '';
     } else {
       // A regular string is not allowed since a security audit needs to be able
       // to search for SafeHtml and identify all locations where we are
diff --git a/ngdart/lib/src/testability/js_api.dart b/ngdart/lib/src/testability/js_api.dart
index 1da4f644c4..258b7b8c15 100644
--- a/ngdart/lib/src/testability/js_api.dart
+++ b/ngdart/lib/src/testability/js_api.dart
@@ -1,9 +1,9 @@
 @JS()
 library angular.src.testability.js_api;
 
-import 'dart:html';
+import 'dart:js_interop';
 
-import 'package:js/js.dart';
+import 'package:web/web.dart';
 
 /// A JavaScript interface for interacting with AngularDart's `Testability` API.
 ///
@@ -12,8 +12,8 @@ import 'package:js/js.dart';
 @anonymous
 abstract class JsTestability {
   external factory JsTestability({
-    required bool Function() isStable,
-    required void Function(void Function()) whenStable,
+    required JSFunction isStable,
+    required JSFunction whenStable,
   });
 
   /// Returns whether the application is considered stable.
@@ -30,7 +30,7 @@ abstract class JsTestability {
   /// invoked, [callback] is invoked with a value of `false` for `didWork`,
   /// indicating that no asynchronous work was awaited before execution.
   /// Otherwise a value of `true` is passed.
-  void whenStable(void Function() callback);
+  void whenStable(JSFunction callback);
 }
 
 /// A JavaScript interface for interacting with AngularDart's `TestabilityRegistry` API.
@@ -40,8 +40,8 @@ abstract class JsTestability {
 @anonymous
 abstract class JsTestabilityRegistry {
   external factory JsTestabilityRegistry({
-    required JsTestability? Function(Element) getAngularTestability,
-    required List<JsTestability> Function() getAllAngularTestabilities,
+    required JSFunction getAngularTestability,
+    required JSFunction getAllAngularTestabilities,
   });
 
   /// Returns the registered testability instance for [appRoot], or `null`.
diff --git a/ngdart/lib/src/testability/js_impl.dart b/ngdart/lib/src/testability/js_impl.dart
index 3d9916effe..27a6834f3a 100644
--- a/ngdart/lib/src/testability/js_impl.dart
+++ b/ngdart/lib/src/testability/js_impl.dart
@@ -4,11 +4,10 @@ part of 'testability.dart';
 external List<JsTestabilityRegistry>? _ngJsTestabilityRegistries;
 
 @JS('getAngularTestability')
-external set _jsGetAngularTestability(
-    Object? Function(Element element) function);
+external set _jsGetAngularTestability(JSFunction function);
 
 @JS('getAllAngularTestabilities')
-external set _jsGetAllAngularTestabilities(List<Object> Function() function);
+external set _jsGetAllAngularTestabilities(JSFunction function);
 
 @JS('frameworkStabilizers')
 external List<Object?>? _jsFrameworkStabilizers;
@@ -22,10 +21,9 @@ class _JSTestabilityProxy implements _TestabilityProxy {
     if (registries == null) {
       registries = <JsTestabilityRegistry>[];
       _ngJsTestabilityRegistries = registries;
-      _jsGetAngularTestability = allowInterop(_getAngularTestability);
-      _jsGetAllAngularTestabilities = allowInterop(_getAllAngularTestabilities);
-      (_jsFrameworkStabilizers ??= <Object?>[])
-          .add(allowInterop(_whenAllStable));
+      _jsGetAngularTestability = _getAngularTestability.toJS;
+      _jsGetAllAngularTestabilities = _getAllAngularTestabilities.toJS;
+      (_jsFrameworkStabilizers ??= <Object?>[]).add(_whenAllStable.toJS);
     }
     registries.add(registry.asJsApi());
   }
@@ -73,7 +71,7 @@ class _JSTestabilityProxy implements _TestabilityProxy {
     }
 
     for (var i = 0; i < testabilities.length; i++) {
-      testabilities[i].whenStable(allowInterop(decrement));
+      testabilities[i].whenStable(decrement.toJS);
     }
   }
 }
@@ -81,8 +79,8 @@ class _JSTestabilityProxy implements _TestabilityProxy {
 extension on Testability {
   JsTestability asJsApi() {
     return JsTestability(
-      isStable: allowInterop(() => isStable),
-      whenStable: allowInterop(whenStable),
+      isStable: (() => isStable).toJS,
+      whenStable: whenStable.toJS,
     );
   }
 }
@@ -101,8 +99,8 @@ extension on TestabilityRegistry {
     }
 
     return JsTestabilityRegistry(
-      getAngularTestability: allowInterop(getAngularTestability),
-      getAllAngularTestabilities: allowInterop(getAllAngularTestabilities),
+      getAngularTestability: getAngularTestability.toJS,
+      getAllAngularTestabilities: getAllAngularTestabilities.toJS,
     );
   }
 }
diff --git a/ngdart/lib/src/testability/testability.dart b/ngdart/lib/src/testability/testability.dart
index 2895c9360a..9f10c0786b 100644
--- a/ngdart/lib/src/testability/testability.dart
+++ b/ngdart/lib/src/testability/testability.dart
@@ -2,11 +2,11 @@
 library angular.src.testability;
 
 import 'dart:async';
-import 'dart:html' show Element;
-import 'dart:html';
+import 'dart:js_interop';
 
-import 'package:js/js.dart';
 import 'package:meta/meta.dart';
+import 'package:web/web.dart' show Element;
+import 'package:web/web.dart';
 
 import '../../di.dart';
 import '../core/zone/ng_zone.dart';
diff --git a/ngdart/lib/src/utilities.dart b/ngdart/lib/src/utilities.dart
index ebe8dc08f5..f0f2bc4b15 100644
--- a/ngdart/lib/src/utilities.dart
+++ b/ngdart/lib/src/utilities.dart
@@ -1,3 +1,4 @@
 export 'utilities/is_dev_mode.dart';
 export 'utilities/is_primitive.dart';
+export 'utilities/iterables.dart';
 export 'utilities/unsafe_cast.dart';
diff --git a/ngdart/lib/src/utilities/iterables.dart b/ngdart/lib/src/utilities/iterables.dart
new file mode 100644
index 0000000000..cfe2882ea9
--- /dev/null
+++ b/ngdart/lib/src/utilities/iterables.dart
@@ -0,0 +1,31 @@
+import 'package:web/web.dart';
+
+extension DOMTokenListIterableExtensions on DOMTokenList {
+  Iterable<String> asIterable() sync* {
+    for (var i = 0; i < length; i++) {
+      yield item(i)!;
+    }
+  }
+}
+
+extension HTMLCollectionIterableExtensions on HTMLCollection {
+  Iterable<Element> asIterable() sync* {
+    for (var i = 0; i < length; i++) {
+      yield item(i)!;
+    }
+  }
+}
+
+extension NodeListIterableExtensions on NodeList {
+  Iterable<Node> asIterable() sync* {
+    for (var i = 0; i < length; i++) {
+      yield item(i)!;
+    }
+  }
+}
+
+extension ElementStyleExtensions on Element {
+  CSSStyleDeclaration getComputedStyle() {
+    return window.getComputedStyle(this);
+  }
+}
diff --git a/ngdart/pubspec.yaml b/ngdart/pubspec.yaml
index ad3285d394..332a04ba79 100644
--- a/ngdart/pubspec.yaml
+++ b/ngdart/pubspec.yaml
@@ -6,18 +6,18 @@ version: 8.0.0-dev.4
 repository: https://github.com/angulardart-community/angular
 
 environment:
-  sdk: ">=3.1.0 <4.0.0"
+  sdk: ">=3.3.0 <4.0.0"
 
 dependencies:
   build: ^2.4.1
   built_collection: ^5.1.1
   built_value: ^8.7.0
   collection: ^1.18.0
-  intl: ^0.18.1
-  js: ^0.6.7
+  intl: ^0.18.1  
   meta: ^1.11.0
   ngcompiler: ^3.0.0-dev.3
   stream_transform: ^2.1.0
+  web: ^0.5.1
 
 dev_dependencies:
   lints: ^2.1.0
diff --git a/ngforms/lib/src/directives/abstract_form.dart b/ngforms/lib/src/directives/abstract_form.dart
index 933b4cbfd4..e2d0a698c7 100644
--- a/ngforms/lib/src/directives/abstract_form.dart
+++ b/ngforms/lib/src/directives/abstract_form.dart
@@ -1,7 +1,7 @@
 import 'dart:async';
-import 'dart:html' show Event;
 
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart' show Event;
 
 import '../model.dart';
 import 'control_container.dart';
diff --git a/ngforms/lib/src/directives/checkbox_value_accessor.dart b/ngforms/lib/src/directives/checkbox_value_accessor.dart
index 9644196b9d..ccb50ba642 100644
--- a/ngforms/lib/src/directives/checkbox_value_accessor.dart
+++ b/ngforms/lib/src/directives/checkbox_value_accessor.dart
@@ -1,6 +1,5 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart';
 
 import 'control_value_accessor.dart'
     show ChangeHandler, ControlValueAccessor, ngValueAccessor, TouchHandler;
@@ -26,10 +25,10 @@ const checkboxValueAccessor = ExistingProvider.forToken(
 class CheckboxControlValueAccessor extends Object
     with TouchHandler, ChangeHandler<bool>
     implements ControlValueAccessor<bool> {
-  final InputElement _element;
+  final HTMLInputElement _element;
 
   CheckboxControlValueAccessor(HtmlElement element)
-      : _element = element as InputElement;
+      : _element = element as HTMLInputElement;
 
   @HostListener('change', ['\$event.target.checked'])
   void handleChange(bool checked) {
diff --git a/ngforms/lib/src/directives/default_value_accessor.dart b/ngforms/lib/src/directives/default_value_accessor.dart
index 0c28cdbee4..4238f826c0 100644
--- a/ngforms/lib/src/directives/default_value_accessor.dart
+++ b/ngforms/lib/src/directives/default_value_accessor.dart
@@ -1,8 +1,8 @@
-import 'dart:html';
 import 'dart:js_util' as js_util;
 
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/src/directives/shared.dart' show setElementDisabled;
+import 'package:web/web.dart';
 
 import 'control_value_accessor.dart';
 import 'ng_control_name.dart';
diff --git a/ngforms/lib/src/directives/number_value_accessor.dart b/ngforms/lib/src/directives/number_value_accessor.dart
index 1f93ad71b2..8c1199629a 100644
--- a/ngforms/lib/src/directives/number_value_accessor.dart
+++ b/ngforms/lib/src/directives/number_value_accessor.dart
@@ -1,6 +1,5 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart';
 
 import 'control_value_accessor.dart'
     show ChangeHandler, ControlValueAccessor, ngValueAccessor, TouchHandler;
@@ -25,9 +24,10 @@ const numberValueAccessor = ExistingProvider.forToken(
 class NumberValueAccessor extends Object
     with TouchHandler, ChangeHandler<double?>
     implements ControlValueAccessor<Object?> {
-  final InputElement _element;
+  final HTMLInputElement _element;
 
-  NumberValueAccessor(HtmlElement element) : _element = element as InputElement;
+  NumberValueAccessor(HtmlElement element)
+      : _element = element as HTMLInputElement;
 
   @HostListener('change', ['\$event.target.value'])
   @HostListener('input', ['\$event.target.value'])
diff --git a/ngforms/lib/src/directives/radio_control_value_accessor.dart b/ngforms/lib/src/directives/radio_control_value_accessor.dart
index 9f0d4657d0..3d1aef36fb 100644
--- a/ngforms/lib/src/directives/radio_control_value_accessor.dart
+++ b/ngforms/lib/src/directives/radio_control_value_accessor.dart
@@ -1,8 +1,8 @@
-import 'dart:html';
 import 'dart:js_util' as js_util;
 
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/src/directives/shared.dart' show setElementDisabled;
+import 'package:web/web.dart';
 
 import 'control_value_accessor.dart'
     show ChangeHandler, ControlValueAccessor, ngValueAccessor, TouchHandler;
diff --git a/ngforms/lib/src/directives/select_control_value_accessor.dart b/ngforms/lib/src/directives/select_control_value_accessor.dart
index 733fad76c1..5b733f4144 100644
--- a/ngforms/lib/src/directives/select_control_value_accessor.dart
+++ b/ngforms/lib/src/directives/select_control_value_accessor.dart
@@ -1,7 +1,6 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'control_value_accessor.dart'
     show ChangeHandler, ControlValueAccessor, ngValueAccessor, TouchHandler;
@@ -40,13 +39,13 @@ String _extractId(String valueString) => valueString.split(':')[0];
 class SelectControlValueAccessor extends Object
     with TouchHandler, ChangeHandler<dynamic>
     implements ControlValueAccessor<Object?> {
-  final SelectElement _element;
+  final HTMLSelectElement _element;
   Object? value;
   final Map<String, Object?> _optionMap = <String, Object?>{};
   num _idCounter = 0;
 
   SelectControlValueAccessor(HtmlElement element)
-      : _element = element as SelectElement;
+      : _element = element as HTMLSelectElement;
 
   @HostListener('change', ['\$event.target.value'])
   void handleChange(String value) {
@@ -91,11 +90,11 @@ class SelectControlValueAccessor extends Object
   selector: 'option',
 )
 class NgSelectOption implements OnDestroy {
-  final OptionElement _element;
+  final HTMLOptionElement _element;
   final SelectControlValueAccessor? _select;
   late final String id;
   NgSelectOption(HtmlElement element, @Optional() @Host() this._select)
-      : _element = element as OptionElement {
+      : _element = element as HTMLOptionElement {
     if (_select != null) id = _select!._registerOption();
   }
 
diff --git a/ngforms/lib/src/directives/shared.dart b/ngforms/lib/src/directives/shared.dart
index 748c510137..9609517c13 100644
--- a/ngforms/lib/src/directives/shared.dart
+++ b/ngforms/lib/src/directives/shared.dart
@@ -1,6 +1,7 @@
-import 'dart:html';
 import 'dart:js_util' as js_util;
 
+import 'package:web/web.dart';
+
 import '../model.dart' show Control, AbstractControlGroup;
 import '../validators.dart' show Validators;
 import 'abstract_control_directive.dart' show AbstractControlDirective;
diff --git a/ngforms/pubspec.yaml b/ngforms/pubspec.yaml
index 9edcc41a9c..0d9cdc8b30 100644
--- a/ngforms/pubspec.yaml
+++ b/ngforms/pubspec.yaml
@@ -11,6 +11,7 @@ environment:
 dependencies:
   meta: ^1.11.0
   ngdart: ^8.0.0-dev.4
+  web: ^0.5.1
 
 dev_dependencies:
   build_runner: ^2.4.6
diff --git a/ngforms/test/accessor_test.dart b/ngforms/test/accessor_test.dart
index bdbb8fb5e9..926b25001a 100644
--- a/ngforms/test/accessor_test.dart
+++ b/ngforms/test/accessor_test.dart
@@ -1,10 +1,10 @@
-import 'dart:html';
 import 'dart:js_util' as js_util;
 
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/ngforms.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'accessor_test.template.dart' as ng;
 
diff --git a/ngforms/test/directives_test.dart b/ngforms/test/directives_test.dart
index 01963b9fa8..1734385b78 100644
--- a/ngforms/test/directives_test.dart
+++ b/ngforms/test/directives_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:mockito/annotations.dart';
 import 'package:ngforms/ngforms.dart';
 import 'package:ngforms/src/directives/shared.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 @GenerateMocks([ControlValueAccessor])
 import 'directives_test.mocks.dart'; // ignore: uri_does_not_exist
@@ -41,7 +40,7 @@ void main() {
     late DefaultValueAccessor defaultAccessor;
 
     setUp(() {
-      defaultAccessor = DefaultValueAccessor(InputElement());
+      defaultAccessor = DefaultValueAccessor(HTMLInputElement());
     });
     test('should throw when given an empty array', () {
       expect(() => selectValueAccessor([]),
@@ -51,25 +50,25 @@ void main() {
       expect(selectValueAccessor([defaultAccessor]), defaultAccessor);
     });
     test('should return checkbox accessor when provided', () {
-      var checkboxAccessor = CheckboxControlValueAccessor(InputElement());
+      var checkboxAccessor = CheckboxControlValueAccessor(HTMLInputElement());
       expect(selectValueAccessor([defaultAccessor, checkboxAccessor]),
           checkboxAccessor);
     });
     test('should return select accessor when provided', () {
-      var selectAccessor = SelectControlValueAccessor(SelectElement());
+      var selectAccessor = SelectControlValueAccessor(HTMLInputElement());
       expect(selectValueAccessor([defaultAccessor, selectAccessor]),
           selectAccessor);
     });
     test('should throw when more than one build-in accessor is provided', () {
-      var checkboxAccessor = CheckboxControlValueAccessor(InputElement());
-      var selectAccessor = SelectControlValueAccessor(SelectElement());
+      var checkboxAccessor = CheckboxControlValueAccessor(HTMLInputElement());
+      var selectAccessor = SelectControlValueAccessor(HTMLInputElement());
       expect(() => selectValueAccessor([checkboxAccessor, selectAccessor]),
           throwsWith('More than one built-in value accessor matches'));
     });
     test('should return custom accessor when provided', () {
       // ignore: undefined_function
       var customAccessor = MockControlValueAccessor();
-      var checkboxAccessor = CheckboxControlValueAccessor(InputElement());
+      var checkboxAccessor = CheckboxControlValueAccessor(HTMLInputElement());
       expect(
           selectValueAccessor(
               [defaultAccessor, customAccessor, checkboxAccessor]),
diff --git a/ngforms/test/integration_test.dart b/ngforms/test/integration_test.dart
index 0bc4fd8023..3d7ed6982c 100644
--- a/ngforms/test/integration_test.dart
+++ b/ngforms/test/integration_test.dart
@@ -1,15 +1,15 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/ngforms.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'integration_test.template.dart' as ng;
 
 void dispatchEvent(Element element, String eventType) {
-  element.dispatchEvent(Event(eventType, canBubble: true));
+  element.dispatchEvent(Event(eventType, EventInit(bubbles: true)));
 }
 
 void main() {
@@ -22,7 +22,8 @@ void main() {
           beforeChangeDetection: (InputFormTest component) {
         component.form = ControlGroup({'login': Control('loginValue')});
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'loginValue');
     });
 
@@ -34,7 +35,8 @@ void main() {
         component.form = form;
       });
       await fixture.update((_) {
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         input.value = 'updatedValue';
         dispatchEvent(input, 'input');
       });
@@ -48,7 +50,8 @@ void main() {
           beforeChangeDetection: (InputFormTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       form.valueChanges.listen((_) {
         throw UnsupportedError('should not happen');
       });
@@ -81,7 +84,8 @@ void main() {
           beforeChangeDetection: (SingleControlTest component) {
         component.form = control;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'loginValue');
       await fixture.update((_) {
         input.value = 'updatedValue';
@@ -100,7 +104,8 @@ void main() {
       await fixture.update((InputFormTest component) {
         component.form = ControlGroup({'login': Control('newValue')});
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'newValue');
     });
 
@@ -116,7 +121,8 @@ void main() {
       await fixture.update((_) {
         login.updateValue('newValue');
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'newValue');
     });
 
@@ -145,7 +151,8 @@ void main() {
           beforeChangeDetection: (InputFormTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'old');
       await fixture.update((InputFormTest component) {
         input.value = 'new';
@@ -162,7 +169,8 @@ void main() {
           beforeChangeDetection: (InputWithoutTypeTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'old');
       await fixture.update((InputWithoutTypeTest component) {
         input.value = 'new';
@@ -179,7 +187,7 @@ void main() {
         component.form = form;
       });
       var textarea =
-          fixture.rootElement.querySelector('textarea') as TextAreaElement;
+          fixture.rootElement.querySelector('textarea') as HTMLTextAreaElement;
       expect(textarea.value, 'old');
       await fixture.update((_) {
         textarea.value = 'new';
@@ -195,7 +203,8 @@ void main() {
           await testBed.create(beforeChangeDetection: (CheckboxTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.checked, true);
       await fixture.update((_) {
         input.checked = false;
@@ -211,7 +220,8 @@ void main() {
           await testBed.create(beforeChangeDetection: (NumberTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, '10');
       await fixture.update((_) {
         input.value = '20';
@@ -229,7 +239,8 @@ void main() {
           beforeChangeDetection: (NumberRequiredTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       await fixture.update((_) {
         input.value = '';
         dispatchEvent(input, 'input');
@@ -254,7 +265,8 @@ void main() {
         component.form = form;
         component.data = '';
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, '');
     });
 
@@ -268,7 +280,8 @@ void main() {
           await testBed.create(beforeChangeDetection: (RadioTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.checked, false);
       await fixture.update((_) {
         dispatchEvent(input, 'change');
@@ -284,9 +297,9 @@ void main() {
             NgTestBed<BasicSelectTest>(ng.createBasicSelectTestFactory());
         var fixture = await testBed.create();
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
         var sfOption =
-            fixture.rootElement.querySelector('option') as OptionElement;
+            fixture.rootElement.querySelector('option') as HTMLOptionElement;
         expect(select.value, 'SF');
         expect(sfOption.selected, true);
       });
@@ -295,7 +308,7 @@ void main() {
         var testBed = NgTestBed<SelectForTest>(ng.createSelectForTestFactory());
         var fixture = await testBed.create();
         var sfOption =
-            fixture.rootElement.querySelector('option') as OptionElement;
+            fixture.rootElement.querySelector('option') as HTMLOptionElement;
         expect(sfOption.value, '0');
         await fixture.update((SelectForTest component) {
           component.cities.first['id'] = '2';
@@ -312,9 +325,9 @@ void main() {
           component.form = form;
         });
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
         var sfOption =
-            fixture.rootElement.querySelector('option') as OptionElement;
+            fixture.rootElement.querySelector('option') as HTMLOptionElement;
         expect(select.value, 'SF');
         expect(sfOption.selected, true);
         await fixture.update((_) {
@@ -330,7 +343,7 @@ void main() {
             ng.createSelectControlDynamicDataTestFactory());
         var fixture = await testBed.create();
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
         expect(select.value, 'NYC');
       });
 
@@ -342,9 +355,9 @@ void main() {
           component.selectedCity = component.cities[1];
         });
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
-        var nycOption =
-            fixture.rootElement.querySelectorAll('option')[1] as OptionElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
+        var nycOption = fixture.rootElement.querySelectorAll('option').item(1)
+            as HTMLOptionElement;
         expect(select.value, '1: Object');
         expect(nycOption.selected, true);
         await fixture.update((_) {
@@ -372,9 +385,9 @@ void main() {
           component.selectedCity = component.cities[2];
         });
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
-        var buffalo =
-            fixture.rootElement.querySelectorAll('option')[2] as OptionElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
+        var buffalo = fixture.rootElement.querySelectorAll('option').item(2)
+            as HTMLOptionElement;
         expect(select.value, '2: Object');
         expect(buffalo.selected, true);
       });
@@ -391,7 +404,7 @@ void main() {
           component.selectedCity = component.cities[1];
         });
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
         expect(select.value, '1: Object');
         await fixture.update((SelectOptionValueMapTest component) {
           component.cities.removeLast();
@@ -412,9 +425,9 @@ void main() {
           component.selectedCity = component.cities[1];
         });
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
-        var buffalo =
-            fixture.rootElement.querySelectorAll('option')[1] as OptionElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
+        var buffalo = fixture.rootElement.querySelectorAll('option').item(1)
+            as HTMLOptionElement;
         expect(select.value, '1: Buffalo');
         expect(buffalo.selected, true);
       });
@@ -435,9 +448,9 @@ void main() {
           component.selectedCity = component.cities[1];
         });
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
-        var firstSF =
-            fixture.rootElement.querySelectorAll('option')[1] as OptionElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
+        var firstSF = fixture.rootElement.querySelectorAll('option').item(1)
+            as HTMLOptionElement;
         expect(select.value, '1: Object');
         expect(firstSF.selected, true);
       });
@@ -459,9 +472,9 @@ void main() {
           component.selectedCity = component.cities[2];
         });
         var select =
-            fixture.rootElement.querySelector('select') as SelectElement;
-        var secondNYC =
-            fixture.rootElement.querySelectorAll('option')[2] as OptionElement;
+            fixture.rootElement.querySelector('select') as HTMLSelectElement;
+        var secondNYC = fixture.rootElement.querySelectorAll('option').item(2)
+            as HTMLOptionElement;
         expect(select.value, '2: Object');
         expect(secondNYC.selected, true);
       });
@@ -475,7 +488,8 @@ void main() {
           beforeChangeDetection: (CustomAccessorTest component) {
         component.form = form;
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, '!aa!');
       await fixture.update((_) {
         input.value = '!bb!';
@@ -513,11 +527,11 @@ void main() {
           component.form = form;
         });
         var required =
-            fixture.rootElement.querySelector('[required]') as InputElement;
+            fixture.rootElement.querySelector('[required]') as HTMLInputElement;
         var minLength = fixture.rootElement.querySelector('[ngControl=min]')
-            as InputElement;
+            as HTMLInputElement;
         var maxLength = fixture.rootElement.querySelector('[ngControl=max]')
-            as InputElement;
+            as HTMLInputElement;
         await fixture.update((_) {
           required.value = '';
           minLength.value = '1';
@@ -551,7 +565,7 @@ void main() {
         expect(form.valid, true);
         await fixture.update((_) {
           var input =
-              fixture.rootElement.querySelector('input') as InputElement;
+              fixture.rootElement.querySelector('input') as HTMLInputElement;
           input.value = '';
           dispatchEvent(input, 'input');
         });
@@ -564,7 +578,8 @@ void main() {
         var testBed =
             NgTestBed<NestedFormTest>(ng.createNestedFormTestFactory());
         var fixture = await testBed.create();
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         expect(input.value, 'value');
       });
 
@@ -572,7 +587,8 @@ void main() {
         var testBed =
             NgTestBed<NestedFormTest>(ng.createNestedFormTestFactory());
         var fixture = await testBed.create();
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         late ControlGroup form;
         await fixture.update((NestedFormTest component) {
           input.value = 'updatedValue';
@@ -594,7 +610,8 @@ void main() {
       await fixture.update((ComplexNgModelTest component) {
         component.name = 'oldValue';
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'oldValue');
       late ComplexNgModelTest comp;
       await fixture.update((ComplexNgModelTest component) {
@@ -612,7 +629,8 @@ void main() {
       await fixture.update((SingleFieldNgModelTest component) {
         component.name = 'oldValue';
       });
-      var input = fixture.rootElement.querySelector('input') as InputElement;
+      var input =
+          fixture.rootElement.querySelector('input') as HTMLInputElement;
       expect(input.value, 'oldValue');
 
       late SingleFieldNgModelTest comp;
@@ -702,7 +720,8 @@ void main() {
         await fixture.update((NgModelComplexTest component) {
           component.name = 'oldValue';
         });
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         expect(input.value, 'oldValue');
         late NgModelComplexTest comp;
         await fixture.update((NgModelComplexTest component) {
@@ -720,7 +739,8 @@ void main() {
         await fixture.update((NgModelSingleFieldTest component) {
           component.name = 'oldValue';
         });
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         expect(input.value, 'oldValue');
         late NgModelSingleFieldTest comp;
         await fixture.update((NgModelSingleFieldTest component) {
@@ -744,7 +764,8 @@ void main() {
             beforeChangeDetection: (TemplateRadioTest component) {
           component.data = data;
         });
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         expect(input.checked, false);
         await fixture.update((_) {
           dispatchEvent(input, 'change');
@@ -766,7 +787,8 @@ void main() {
         var testBed = NgTestBed<NgModelInitialViewTest>(
             ng.createNgModelInitialViewTestFactory());
         var fixture = await testBed.create();
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         await fixture.update((_) {
           input.value = 'aa';
           input.selectionStart = 1;
@@ -784,7 +806,8 @@ void main() {
         await fixture.update((NgModelRevertViewTest component) {
           component.name = '';
         });
-        var input = fixture.rootElement.querySelector('input') as InputElement;
+        var input =
+            fixture.rootElement.querySelector('input') as HTMLInputElement;
         late NgModelRevertViewTest comp;
         await fixture.update((NgModelRevertViewTest component) {
           input.value = 'aa';
diff --git a/ngforms/test/ng_control_group_test.dart b/ngforms/test/ng_control_group_test.dart
index de85190fb3..3c12ab4f1d 100644
--- a/ngforms/test/ng_control_group_test.dart
+++ b/ngforms/test/ng_control_group_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/ngforms.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'ng_control_group_test.template.dart' as ng;
 
@@ -65,7 +64,7 @@ class NgControlGroupTest {
   NgControlGroup? controlGroup;
 
   @ViewChild('input')
-  InputElement? inputElement;
+  HTMLInputElement? inputElement;
 
   bool disabled = false;
 
diff --git a/ngforms/test/ng_control_name_test.dart b/ngforms/test/ng_control_name_test.dart
index 8d09a19fa2..17dc68f164 100644
--- a/ngforms/test/ng_control_name_test.dart
+++ b/ngforms/test/ng_control_name_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/ngforms.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'ng_control_name_test.template.dart' as ng;
 
@@ -91,7 +90,7 @@ class NgControlNameTest {
   NgControlName? controlName;
 
   @ViewChild('input')
-  InputElement? inputElement;
+  HTMLInputElement? inputElement;
 
   String? loginValue;
 
diff --git a/ngforms/test/ng_control_repeated_test.dart b/ngforms/test/ng_control_repeated_test.dart
index d68a4f6595..706a21f31b 100644
--- a/ngforms/test/ng_control_repeated_test.dart
+++ b/ngforms/test/ng_control_repeated_test.dart
@@ -14,7 +14,7 @@ void main() {
   test('should update an NgForm without throwing an NPE', () async {
     final testBed = NgTestBed<AppComponent>(ng.createAppComponentFactory());
     expect(
-      (await testBed.create()).rootElement.innerHtml,
+      (await testBed.create()).rootElement.innerHTML,
       contains(r'<input title="Input #0:true">'),
     );
   });
diff --git a/ngforms/test/ng_form_control_test.dart b/ngforms/test/ng_form_control_test.dart
index 313920b46a..4b29457579 100644
--- a/ngforms/test/ng_form_control_test.dart
+++ b/ngforms/test/ng_form_control_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/ngforms.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'ng_form_control_test.template.dart' as ng;
 
@@ -99,7 +98,7 @@ class NgFormControlTest {
   NgFormControl? formControl;
 
   @ViewChild('input')
-  InputElement? inputElement;
+  HTMLInputElement? inputElement;
 
   Control loginControl = Control(null);
 }
diff --git a/ngforms/test/ng_form_test.dart b/ngforms/test/ng_form_test.dart
index 09753e6116..d56949611c 100644
--- a/ngforms/test/ng_form_test.dart
+++ b/ngforms/test/ng_form_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngforms/ngforms.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'ng_form_test.template.dart' as ng;
 
@@ -171,7 +170,7 @@ class NgFormTest {
   NgControlName? loginControlDir;
 
   @ViewChild('input')
-  InputElement? inputElement;
+  HTMLInputElement? inputElement;
 
   bool disabled = false;
   bool needsLogin = true;
@@ -199,7 +198,7 @@ class OnPushControlTest {
   var requiresName = false;
 
   @ViewChild('submit')
-  ButtonElement? submitButton;
+  HTMLButtonElement? submitButton;
 }
 
 @Component(
@@ -224,5 +223,5 @@ class OnPushControlGroupTest {
   var requiresGroup = false;
 
   @ViewChild('submit')
-  ButtonElement? submitButton;
+  HTMLButtonElement? submitButton;
 }
diff --git a/ngrouter/lib/src/directives/router_link_active_directive.dart b/ngrouter/lib/src/directives/router_link_active_directive.dart
index e470634d00..04051c1a93 100644
--- a/ngrouter/lib/src/directives/router_link_active_directive.dart
+++ b/ngrouter/lib/src/directives/router_link_active_directive.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:collection/collection.dart';
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import '../router/router.dart';
 import '../router/router_state.dart';
@@ -80,6 +80,29 @@ class RouterLinkActive implements AfterViewInit, OnDestroy {
         break;
       }
     }
-    _element.classes.toggleAll(_classes, isActive);
+    _element.classList.toggleAll(_classes, isActive);
   }
 }
+
+extension on DOMTokenList {
+  void toggleAll(Iterable<String> iterable, bool shouldAdd) {
+    for (var e in iterable) {
+      toggle(e, shouldAdd);
+    }
+  }
+
+  // bool toggle(String value, [bool? shouldAdd]) {
+  //   _validateToken(value);
+  //   Set<String> s = readClasses();
+  //   bool result = false;
+  //   if (shouldAdd == null) shouldAdd = !s.contains(value);
+  //   if (shouldAdd) {
+  //     s.add(value);
+  //     result = true;
+  //   } else {
+  //     s.remove(value);
+  //   }
+  //   writeClasses(s);
+  //   return result;
+  // }
+}
diff --git a/ngrouter/lib/src/directives/router_link_directive.dart b/ngrouter/lib/src/directives/router_link_directive.dart
index b9b5141498..b7d0b9e5c9 100644
--- a/ngrouter/lib/src/directives/router_link_directive.dart
+++ b/ngrouter/lib/src/directives/router_link_directive.dart
@@ -1,8 +1,7 @@
 import 'dart:async';
-import 'dart:html'
-    show AnchorElement, Element, Event, KeyboardEvent, KeyCode, MouseEvent;
 
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart' hide Location;
 
 import '../location.dart' show Location;
 import '../router/navigation_params.dart';
@@ -42,7 +41,7 @@ class RouterLink implements OnDestroy {
     // The browser will synthesize a click event for anchor elements when they
     // receive an Enter key press. For other elements, we must manually add a
     // key press listener to ensure the link remains keyboard accessible.
-    if (element is! AnchorElement) {
+    if (element is! HTMLAnchorElement) {
       _keyPressSubscription = element.onKeyPress.listen(_onKeyPress);
     }
   }
diff --git a/ngrouter/lib/src/location/base_href.dart b/ngrouter/lib/src/location/base_href.dart
index 29c420930f..6084e1ce89 100644
--- a/ngrouter/lib/src/location/base_href.dart
+++ b/ngrouter/lib/src/location/base_href.dart
@@ -1,6 +1,6 @@
-import 'dart:html';
+import 'package:web/web.dart';
 
-final _urlParsingNode = AnchorElement();
+final _urlParsingNode = HTMLAnchorElement();
 Element? _baseElement;
 
 String? baseHrefFromDOM() {
@@ -19,6 +19,6 @@ String? _getBaseElementHref() {
 // based on urlUtils.js in AngularJS 1.
 String _relativePath(String url) {
   _urlParsingNode.href = url;
-  var pathname = _urlParsingNode.pathname!;
+  var pathname = _urlParsingNode.pathname;
   return (pathname.isEmpty || pathname[0] == '/') ? pathname : '/$pathname';
 }
diff --git a/ngrouter/lib/src/location/browser_platform_location.dart b/ngrouter/lib/src/location/browser_platform_location.dart
index de9bde806a..9f3a07f8ce 100644
--- a/ngrouter/lib/src/location/browser_platform_location.dart
+++ b/ngrouter/lib/src/location/browser_platform_location.dart
@@ -1,6 +1,7 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 import 'package:ngdart/angular.dart' show Injectable;
+import 'package:web/web.dart';
 
 import 'base_href.dart';
 import 'platform_location.dart';
@@ -21,23 +22,23 @@ class BrowserPlatformLocation extends PlatformLocation {
   String? getBaseHrefFromDOM() => baseHrefFromDOM();
 
   @override
-  void onPopState(EventListener fn) {
-    window.addEventListener('popstate', fn, false);
+  void onPopState(void Function(Event) fn) {
+    window.addEventListener('popstate', fn.toJS, false.toJS);
   }
 
   @override
-  void onHashChange(EventListener fn) {
-    window.addEventListener('hashchange', fn, false);
+  void onHashChange(void Function(Event) fn) {
+    window.addEventListener('hashchange', fn.toJS, false.toJS);
   }
 
   @override
   String get pathname {
-    return location.pathname!;
+    return location.pathname;
   }
 
   @override
   String get search {
-    return location.search!;
+    return location.search;
   }
 
   @override
@@ -51,12 +52,12 @@ class BrowserPlatformLocation extends PlatformLocation {
 
   @override
   void pushState(Object? state, String title, String? url) {
-    _history.pushState(state, title, url);
+    _history.pushState(state?.toJSBox, title, url);
   }
 
   @override
   void replaceState(Object? state, String title, String? url) {
-    _history.replaceState(state, title, url);
+    _history.replaceState(state?.toJSBox, title, url);
   }
 
   @override
diff --git a/ngrouter/lib/src/location/hash_location_strategy.dart b/ngrouter/lib/src/location/hash_location_strategy.dart
index f974b8f560..472949266d 100644
--- a/ngrouter/lib/src/location/hash_location_strategy.dart
+++ b/ngrouter/lib/src/location/hash_location_strategy.dart
@@ -1,6 +1,5 @@
-import 'dart:html' as html;
-
 import 'package:ngdart/angular.dart' show Injectable, Inject, Optional;
+import 'package:web/web.dart' as web;
 
 import 'location.dart' show Location;
 import 'location_strategy.dart' show LocationStrategy, appBaseHref;
@@ -43,7 +42,7 @@ class HashLocationStrategy extends LocationStrategy {
   ]) : _baseHref = baseHref ?? '';
 
   @override
-  void onPopState(html.EventListener fn) {
+  void onPopState(void Function(web.Event) fn) {
     _platformLocation.onPopState(fn);
   }
 
diff --git a/ngrouter/lib/src/location/location_strategy.dart b/ngrouter/lib/src/location/location_strategy.dart
index d5bc17199c..289e3da325 100644
--- a/ngrouter/lib/src/location/location_strategy.dart
+++ b/ngrouter/lib/src/location/location_strategy.dart
@@ -1,6 +1,6 @@
-import 'dart:html';
-
+// import 'dart:html' as;
 import 'package:ngdart/angular.dart' show OpaqueToken;
+import 'package:web/web.dart';
 
 /// `LocationStrategy` is responsible for representing and reading route state
 /// from the browser's URL. Angular provides two strategies:
@@ -25,7 +25,7 @@ abstract class LocationStrategy {
       Object? state, String title, String url, String queryParams);
   void forward();
   void back();
-  void onPopState(EventListener fn);
+  void onPopState(void Function(Event event) fn);
   String getBaseHref();
 }
 
diff --git a/ngrouter/lib/src/location/path_location_strategy.dart b/ngrouter/lib/src/location/path_location_strategy.dart
index 65e56e1022..e26f7a191c 100644
--- a/ngrouter/lib/src/location/path_location_strategy.dart
+++ b/ngrouter/lib/src/location/path_location_strategy.dart
@@ -1,6 +1,5 @@
-import 'dart:html' as html;
-
 import 'package:ngdart/angular.dart' show Injectable, Inject, Optional;
+import 'package:web/web.dart' as web;
 
 import 'location.dart' show Location;
 import 'location_strategy.dart' show LocationStrategy, appBaseHref;
@@ -39,7 +38,7 @@ class PathLocationStrategy extends LocationStrategy {
   }
 
   @override
-  void onPopState(html.EventListener fn) {
+  void onPopState(void Function(web.Event) fn) {
     _platformLocation.onPopState(fn);
   }
 
diff --git a/ngrouter/lib/src/location/platform_location.dart b/ngrouter/lib/src/location/platform_location.dart
index e1a51fb390..6940921ff5 100644
--- a/ngrouter/lib/src/location/platform_location.dart
+++ b/ngrouter/lib/src/location/platform_location.dart
@@ -1,4 +1,4 @@
-import 'dart:html';
+import 'package:web/web.dart';
 
 /// This class should not be used directly by an application developer. Instead, use
 /// [Location].
@@ -24,8 +24,8 @@ import 'dart:html';
 /// they are all platform independent.
 abstract class PlatformLocation {
   String? getBaseHrefFromDOM();
-  void onPopState(EventListener fn);
-  void onHashChange(EventListener fn);
+  void onPopState(void Function(Event) fn);
+  void onHashChange(void Function(Event) fn);
   String get pathname;
   String get search;
   String get hash;
diff --git a/ngrouter/lib/src/location/testing/mock_location_strategy.dart b/ngrouter/lib/src/location/testing/mock_location_strategy.dart
index e110ae9aea..6a25a14088 100644
--- a/ngrouter/lib/src/location/testing/mock_location_strategy.dart
+++ b/ngrouter/lib/src/location/testing/mock_location_strategy.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html' show EventListener, PopStateEvent;
 
 import 'package:ngdart/angular.dart' show Injectable;
 import 'package:ngrouter/src/location/location_strategy.dart'
     show LocationStrategy;
+import 'package:web/web.dart' show PopStateEvent, Event;
 
 /// A mock implementation of [LocationStrategy] that allows tests to fire
 /// simulated location events.
@@ -56,7 +56,7 @@ class MockLocationStrategy extends LocationStrategy {
   }
 
   @override
-  void onPopState(EventListener fn) {
+  void onPopState(void Function(Event) fn) {
     _subject.stream.listen(fn);
   }
 
diff --git a/ngrouter/pubspec.yaml b/ngrouter/pubspec.yaml
index 0a5ec0cb96..f0894fe3e2 100644
--- a/ngrouter/pubspec.yaml
+++ b/ngrouter/pubspec.yaml
@@ -11,6 +11,7 @@ environment:
 dependencies:
   collection: ^1.18.0
   ngdart: ^8.0.0-dev.4
+  web: ^0.5.1
 
 dev_dependencies:
   async: ^2.11.0
diff --git a/ngrouter/test/directives/router_link_active_directive_test.dart b/ngrouter/test/directives/router_link_active_directive_test.dart
index 792f1008fe..87f4450d84 100644
--- a/ngrouter/test/directives/router_link_active_directive_test.dart
+++ b/ngrouter/test/directives/router_link_active_directive_test.dart
@@ -35,11 +35,11 @@ void main() {
       fakeRouter.current = RouterState('/user/jill', const []);
     });
     final anchor = fixture.rootElement.querySelector('a')!;
-    expect(anchor.classes, isEmpty);
+    expect(anchor.classList.length, isZero);
     await fixture.update((_) {
       fakeRouter.current = RouterState('/user/bob', const []);
     });
-    expect(anchor.classes, contains('active-link'));
+    expect(anchor.classList.contains('active-link'), isTrue);
   });
 
   test('should validate queryParams and fragment', () async {
@@ -50,22 +50,22 @@ void main() {
       fakeRouter.current = RouterState('/user/bob', const []);
     });
     final anchor = fixture.rootElement.querySelector('a')!;
-    expect(anchor.classes, isEmpty);
+    expect(anchor.classList.length, isZero);
     await fixture.update((_) {
       fakeRouter.current =
           RouterState('/user/bob', const [], queryParameters: {'param': '1'});
     });
-    expect(anchor.classes, isEmpty);
+    expect(anchor.classList.length, isZero);
     await fixture.update((_) {
       fakeRouter.current = RouterState('/user/bob', const [], fragment: 'frag');
     });
-    expect(anchor.classes, isEmpty);
+    expect(anchor.classList.length, isZero);
 
     await fixture.update((_) {
       fakeRouter.current = RouterState('/user/bob', const [],
           queryParameters: {'param': '1'}, fragment: 'frag');
     });
-    expect(anchor.classes, contains('active-link'));
+    expect(anchor.classList.contains('active-link'), isTrue);
   });
 
   test(
@@ -80,7 +80,7 @@ void main() {
           queryParameters: {'param': '1'}, fragment: 'frag');
     });
     final anchor = fixture.rootElement.querySelector('a')!;
-    expect(anchor.classes, contains('active-link'));
+    expect(anchor.classList.contains('active-link'), isTrue);
   });
 }
 
diff --git a/ngrouter/test/directives/router_link_directive_test.dart b/ngrouter/test/directives/router_link_directive_test.dart
index 37669b6a9a..1ccc70795c 100644
--- a/ngrouter/test/directives/router_link_directive_test.dart
+++ b/ngrouter/test/directives/router_link_directive_test.dart
@@ -1,11 +1,12 @@
-import 'dart:html' hide Location;
-import 'dart:js';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngrouter/ngrouter.dart';
 import 'package:ngrouter/testing.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart' hide Location, NavigationResult;
 
 import 'router_link_directive_test.template.dart' as ng;
 
@@ -33,7 +34,7 @@ void main() {
     ).addInjector(addInjector).create(beforeChangeDetection: (comp) {
       comp.routerLink = '/users/bob';
     });
-    final anchor = fixture.rootElement.querySelector('a') as AnchorElement;
+    final anchor = fixture.rootElement.querySelector('a') as HTMLAnchorElement;
     expect(anchor.pathname, '/users/bob');
     expect(fakeRouter.lastNavigatedPath, isNull);
     await fixture.update((_) => anchor.click());
@@ -58,7 +59,7 @@ void main() {
     ).addInjector(addInjector).create(beforeChangeDetection: (comp) {
       comp.routerLink = '/users/bob?param1=one&param2=2#frag';
     });
-    final anchor = fixture.rootElement.querySelector('a') as AnchorElement;
+    final anchor = fixture.rootElement.querySelector('a') as HTMLAnchorElement;
     expect(anchor.pathname, '/users/bob');
     await fixture.update((_) => anchor.click());
     expect(fakeRouter.lastNavigatedPath, '/users/bob');
@@ -75,7 +76,7 @@ void main() {
     ).addInjector(addInjector).create(beforeChangeDetection: (comp) {
       comp.routerLink = '/users/bob';
     });
-    final anchor = fixture.rootElement.querySelector('a') as AnchorElement;
+    final anchor = fixture.rootElement.querySelector('a') as HTMLAnchorElement;
     expect(anchor.pathname, '/users/bob');
     expect(anchor.target, '_parent');
     await fixture.update((_) => anchor.click());
@@ -174,21 +175,21 @@ Event createKeyboardEvent(
   bool shiftKey = false,
   bool metaKey = false,
 }) {
-  if (!context.hasProperty(_createKeyboardEventName)) {
+  if (!globalContext.hasProperty(_createKeyboardEventName.toJS).toDart) {
     final script = document.createElement('script')
       ..setAttribute('type', 'text/javascript')
       ..text = _createKeyboardEventScript;
     document.body!.append(script);
   }
-  return context.callMethod(
-    _createKeyboardEventName,
+  return globalContext.callMethodVarArgs(
+    _createKeyboardEventName.toJS,
     [
-      type,
-      keyCode,
-      ctrlKey,
-      altKey,
-      shiftKey,
-      metaKey,
+      type.toJS,
+      keyCode.toJS,
+      ctrlKey.toJS,
+      altKey.toJS,
+      shiftKey.toJS,
+      metaKey.toJS,
     ],
   ) as Event;
 }
diff --git a/ngrouter/test/regression/empty_active_link_test.dart b/ngrouter/test/regression/empty_active_link_test.dart
index 89389eed7d..ede86c1983 100644
--- a/ngrouter/test/regression/empty_active_link_test.dart
+++ b/ngrouter/test/regression/empty_active_link_test.dart
@@ -15,7 +15,7 @@ void main() {
         .addInjector(injector);
     final testFixture = await testBed.create();
     final anchor = testFixture.rootElement.querySelector('a')!;
-    expect(anchor.classes, contains(AppComponent.activeClassName));
+    expect(anchor.classList.contains(AppComponent.activeClassName), isTrue);
   });
 }
 
diff --git a/ngrouter/test/regression/hash_location_strategy_test.dart b/ngrouter/test/regression/hash_location_strategy_test.dart
index 252aed0005..c4d2a65e4b 100644
--- a/ngrouter/test/regression/hash_location_strategy_test.dart
+++ b/ngrouter/test/regression/hash_location_strategy_test.dart
@@ -1,15 +1,13 @@
-import 'dart:html';
-
 import 'package:mockito/annotations.dart';
 import 'package:mockito/mockito.dart';
 import 'package:ngdart/angular.dart';
 import 'package:ngrouter/ngrouter.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 @GenerateNiceMocks([MockSpec<BrowserPlatformLocation>()])
 import 'hash_location_strategy_test.mocks.dart'; // ignore: uri_does_not_exist
-
 import 'hash_location_strategy_test.template.dart' as ng;
 
 // ignore: undefined_function
diff --git a/ngrouter/test/regression/routing_state_crash_test.dart b/ngrouter/test/regression/routing_state_crash_test.dart
index 7b56011938..8bb2ca567b 100644
--- a/ngrouter/test/regression/routing_state_crash_test.dart
+++ b/ngrouter/test/regression/routing_state_crash_test.dart
@@ -1,10 +1,11 @@
 import 'dart:async';
-import 'dart:html';
+import 'dart:js_interop';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngrouter/ngrouter.dart';
 import 'package:ngrouter/testing.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'routing_state_crash_test.template.dart' as ng;
 
@@ -33,24 +34,24 @@ void main() {
     await onStable();
     expect(_logs, isEmpty);
     expect(locationStrategy.path(), isEmpty);
-    expect(routeContainer.text, contains('Home Page'));
+    expect(routeContainer.textContent, contains('Home Page'));
 
     // "Navigate" to /another
     await appComponent.instance.updateUrl('/another');
     expect(_logs, isEmpty);
-    expect(routeContainer.text, contains('Another Page'));
+    expect(routeContainer.textContent, contains('Another Page'));
 
     // "Navigate" to /throws.
     await appComponent.instance.updateUrl('/throws');
     expect(_logs, [contains('$IntentionalException')]);
     // Since navigation fails, we should still be at the previous route.
-    expect(routeContainer.text, contains('Another Page'));
+    expect(routeContainer.textContent, contains('Another Page'));
 
     // "Navigate" back to /home.
     _logs.clear();
     await appComponent.instance.updateUrl('/home');
     expect(_logs, isEmpty);
-    expect(routeContainer.text, contains('Home Page'));
+    expect(routeContainer.textContent, contains('Home Page'));
   });
 }
 
@@ -74,9 +75,9 @@ class LoggingExceptionHandler implements ExceptionHandler {
     _logs.add('$exception: $stack');
 
     if (exception is! IntentionalException) {
-      window.console.error('$exception\n$stack');
+      console.error('$exception\n$stack'.toJS);
     } else {
-      window.console.info('ExceptionHandler caught the intentional exception');
+      console.info('ExceptionHandler caught the intentional exception'.toJS);
     }
   }
 }
diff --git a/ngrouter/test/revert_popstate_test.dart b/ngrouter/test/revert_popstate_test.dart
index 34226678e9..64ffe1a49f 100644
--- a/ngrouter/test/revert_popstate_test.dart
+++ b/ngrouter/test/revert_popstate_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html' show window;
-
 import 'package:ngdart/angular.dart';
 import 'package:ngrouter/ngrouter.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart' show WindowEventGetters, window;
 
 import 'revert_popstate_test.template.dart' as ng;
 
diff --git a/ngtest/lib/src/bootstrap.dart b/ngtest/lib/src/bootstrap.dart
index a0adbdd815..a848fe9ced 100644
--- a/ngtest/lib/src/bootstrap.dart
+++ b/ngtest/lib/src/bootstrap.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/bootstrap/run.dart';
 import 'package:ngdart/src/core/application_ref.dart';
+import 'package:web/web.dart';
 
 /// Returns a future that completes with a new instantiated component.
 ///
diff --git a/ngtest/lib/src/frontend/bed.dart b/ngtest/lib/src/frontend/bed.dart
index c528f5b6d8..c6c10e7d90 100644
--- a/ngtest/lib/src/frontend/bed.dart
+++ b/ngtest/lib/src/frontend/bed.dart
@@ -1,7 +1,7 @@
 import 'dart:async';
-import 'dart:html';
 
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart';
 
 import '../bootstrap.dart';
 import '../errors.dart';
@@ -69,7 +69,7 @@ Future<void> disposeAnyRunningTest() async {
 /// ```
 class NgTestBed<T extends Object> {
   static Element _defaultHost() {
-    final host = Element.tag('ng-test-bed');
+    final host = document.createElement('ng-test-bed');
     document.body!.append(host);
     return host;
   }
diff --git a/ngtest/lib/src/frontend/fixture.dart b/ngtest/lib/src/frontend/fixture.dart
index 47e4989465..91e44e977d 100644
--- a/ngtest/lib/src/frontend/fixture.dart
+++ b/ngtest/lib/src/frontend/fixture.dart
@@ -1,7 +1,6 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 import 'bed.dart';
 import 'stabilizer.dart';
@@ -36,7 +35,7 @@ class NgTestFixture<T> {
   Future<void> dispose() async {
     await update();
     // Remove the test bed's host element.
-    _rootComponentRef.location.parent!.remove();
+    _rootComponentRef.location.parentElement!.remove();
     _applicationRef.dispose();
     if (isDevMode) {
       debugClearComponentStyles();
@@ -78,7 +77,7 @@ class NgTestFixture<T> {
   /// All text nodes within the fixture.
   ///
   /// Provided as a convenience to do simple `expect` matchers.
-  String? get text => rootElement.text;
+  String? get text => rootElement.textContent;
 
   /// A component instance to use for read-only operations (expect, assert)
   /// ONLY.
diff --git a/ngtest/pubspec.yaml b/ngtest/pubspec.yaml
index 60a4ceb721..d008e511e2 100644
--- a/ngtest/pubspec.yaml
+++ b/ngtest/pubspec.yaml
@@ -12,6 +12,7 @@ dependencies:
   collection: ^1.18.0
   meta: ^1.11.0
   ngdart: ^8.0.0-dev.4
+  web: ^0.5.1
 
 dev_dependencies:
   build_runner: ^2.4.6
diff --git a/ngtest/test/bootstrap_test.dart b/ngtest/test/bootstrap_test.dart
index 71e0cf6cee..836d846b0f 100644
--- a/ngtest/test/bootstrap_test.dart
+++ b/ngtest/test/bootstrap_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/src/bootstrap.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'bootstrap_test.template.dart' as ng_generated;
 
@@ -10,42 +9,42 @@ Injector noopInjector(Injector i) => i;
 
 void main() {
   test('should create a new component in the DOM', () async {
-    final host = Element.div();
+    final host = HTMLDivElement();
     final test = await bootstrapForTest<NewComponentInDom>(
       ng_generated.createNewComponentInDomFactory(),
       host,
       noopInjector,
     );
-    expect(host.text, contains('Hello World'));
+    expect(host.textContent, contains('Hello World'));
     test.destroy();
   });
 
   test('should call a synchronous handler before initial load', () async {
-    final host = Element.div();
+    final host = HTMLDivElement();
     final test = await bootstrapForTest<BeforeChangeDetection>(
       ng_generated.createBeforeChangeDetectionFactory(),
       host,
       noopInjector,
       beforeChangeDetection: (comp) => comp.users.add('Mati'),
     );
-    expect(host.text, contains('Hello Mati!'));
+    expect(host.textContent, contains('Hello Mati!'));
     test.destroy();
   });
 
   test('should call an asynchronous handler before initial load', () async {
-    final host = Element.div();
+    final host = HTMLDivElement();
     final test = await bootstrapForTest<BeforeChangeDetection>(
       ng_generated.createBeforeChangeDetectionFactory(),
       host,
       noopInjector,
       beforeChangeDetection: (comp) async => comp.users.add('Mati'),
     );
-    expect(host.text, contains('Hello Mati!'));
+    expect(host.textContent, contains('Hello Mati!'));
     test.destroy();
   });
 
   test('should include user-specified providers', () async {
-    final host = Element.div();
+    final host = HTMLDivElement();
     final test = await bootstrapForTest<AddProviders>(
       ng_generated.createAddProvidersFactory(),
       host,
@@ -57,7 +56,7 @@ void main() {
   });
 
   test('should be able to call injector before component creation', () async {
-    final host = Element.div();
+    final host = HTMLDivElement();
     TestService? testService;
     final test = await bootstrapForTest<AddProviders>(
         ng_generated.createAddProvidersFactory(),
@@ -80,7 +79,7 @@ void main() {
 
   test('should be able to call asynchronous injector before component creation',
       () async {
-    final host = Element.div();
+    final host = HTMLDivElement();
     TestService? testService;
     final test = await bootstrapForTest<AddProviders>(
       ng_generated.createAddProvidersFactory(),
diff --git a/ngtest/test/frontend/bed_error_test.dart b/ngtest/test/frontend/bed_error_test.dart
index f2ff01a652..ab2e5d06db 100644
--- a/ngtest/test/frontend/bed_error_test.dart
+++ b/ngtest/test/frontend/bed_error_test.dart
@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'bed_error_test.template.dart' as ng;
 
@@ -123,7 +124,7 @@ class CatchNativeEventSynchronousErrors {
     ).create();
     expect(
       fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLElement).click();
       }),
       throwsA(isStateError),
     );
@@ -145,7 +146,7 @@ class CatchNativeEventAsynchronousErrors {
     ).create();
     expect(
       fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLElement).click();
       }),
       throwsA(isStateError),
     );
@@ -229,7 +230,7 @@ class NoExceptionsSwallowedTest {
     expect(fixture.text, 'Hello Angular');
     await fixture.update((c) => c.name = 'World');
     expect(fixture.text, 'Hello World');
-    final html = fixture.rootElement.innerHtml;
+    final html = (fixture.rootElement as HTMLElement).innerHTML;
     expect(html, '<h1>Hello World</h1>');
     await fixture.dispose();
 
diff --git a/ngtest/test/frontend/bed_lifecycle_test.dart b/ngtest/test/frontend/bed_lifecycle_test.dart
index d03f35e2fe..f0a0547aba 100644
--- a/ngtest/test/frontend/bed_lifecycle_test.dart
+++ b/ngtest/test/frontend/bed_lifecycle_test.dart
@@ -1,8 +1,7 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'bed_lifecycle_test.template.dart' as ng;
 
@@ -11,8 +10,8 @@ void main() {
   late Element testRoot;
 
   setUp(() {
-    docRoot = Element.tag('doc-root');
-    testRoot = Element.tag('ng-test-bed-example-test');
+    docRoot = document.createElement('doc-root');
+    testRoot = document.createElement('ng-test-bed-example-test');
     docRoot.append(testRoot);
   });
 
@@ -27,12 +26,12 @@ void main() {
       host: testRoot,
     );
     final NgTestFixture<AngularLifecycle> fixture = await testBed.create();
-    expect(docRoot.text, isEmpty);
+    expect(docRoot.textContent, isEmpty);
     await fixture.update((c) => c.value = 'New value');
-    expect(docRoot.text, 'New value');
+    expect(docRoot.textContent, 'New value');
     await fixture.dispose();
-    print(docRoot.innerHtml);
-    expect(docRoot.text, isEmpty);
+    print((docRoot as HTMLElement).innerHTML);
+    expect(docRoot.textContent, isEmpty);
   });
 
   test('should invoke ngAfterChanges, then ngOnInit', () async {
diff --git a/ngtest/test/frontend/compatibility_test.dart b/ngtest/test/frontend/compatibility_test.dart
index 10a311242b..e9bcabb67a 100644
--- a/ngtest/test/frontend/compatibility_test.dart
+++ b/ngtest/test/frontend/compatibility_test.dart
@@ -1,9 +1,8 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:ngtest/compatibility.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'compatibility_test.template.dart' as ng;
 
@@ -12,8 +11,8 @@ void main() {
   late Element testRoot;
 
   setUp(() {
-    docRoot = Element.tag('doc-root');
-    testRoot = Element.tag('ng-test-bed-example-test');
+    docRoot = document.createElement('doc-root');
+    testRoot = document.createElement('ng-test-bed-example-test');
     docRoot.append(testRoot);
   });
 
@@ -37,13 +36,13 @@ void main() {
       // (our component), the node is updated (after change detection), and
       // after destroying the test the document root has been cleared.
       final fixture = await testBed.create();
-      expect(docRoot.text, isEmpty);
+      expect(docRoot.textContent, isEmpty);
       testService = injectFromFixture(fixture, TestService);
       await fixture.update((_) => testService!.value = 'New value');
-      expect(docRoot.text, 'New value');
+      expect(docRoot.textContent, 'New value');
       await fixture.dispose();
-      print(docRoot.innerHtml);
-      expect(docRoot.text, isEmpty);
+      print((docRoot as HTMLElement).innerHTML);
+      expect(docRoot.textContent, isEmpty);
     });
     group('and beforeComponentCreated without error', () {
       test('should handle synchronous fn', () async {
@@ -53,7 +52,7 @@ void main() {
         }, beforeChangeDetection: (_) {
           expect(testService, isNotNull);
         });
-        expect(docRoot.text, 'New value');
+        expect(docRoot.textContent, 'New value');
         await fixture.dispose();
       });
 
@@ -64,7 +63,7 @@ void main() {
         }, beforeChangeDetection: (_) {
           expect(testService, isNotNull);
         });
-        expect(docRoot.text, 'New value');
+        expect(docRoot.textContent, 'New value');
         await fixture.dispose();
       });
 
@@ -76,7 +75,7 @@ void main() {
         }, beforeChangeDetection: (_) {
           expect(testService, isNotNull);
         });
-        expect(docRoot.text, 'New value');
+        expect(docRoot.textContent, 'New value');
         await fixture.dispose();
       });
     });
diff --git a/tool/package_versions.yaml b/tool/package_versions.yaml
index 384667a68c..e0635f43f7 100644
--- a/tool/package_versions.yaml
+++ b/tool/package_versions.yaml
@@ -17,7 +17,6 @@ csslib: ^1.0.0
 dart_style: ^2.3.2
 glob: ^2.1.2
 intl: ^0.18.1
-js: ^0.6.7
 logging: ^1.2.0
 lints: ^2.1.0
 meta: ^1.11.0
@@ -35,3 +34,4 @@ stream_transform: ^2.1.0
 term_glyph: ^1.2.1
 test: ">=1.24.0 <1.25.0"
 watcher: ^1.1.0
+web: ^0.5.1