diff --git a/.github/workflows/dart.yml b/.github/workflows/dart.yml
index 00f2b417ff..d40d17e3be 100644
--- a/.github/workflows/dart.yml
+++ b/.github/workflows/dart.yml
@@ -195,83 +195,6 @@ jobs:
     needs:
       - job_001
   job_004:
-    name: "analyze; Dart dev; PKGS: ngast, ngcompiler, ngdart, ngforms, ngrouter, ngtest; `dart analyze --fatal-infos .`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngast-ngcompiler-ngdart-ngforms-ngrouter-ngtest;commands:analyze"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngast-ngcompiler-ngdart-ngforms-ngrouter-ngtest
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngast_pub_upgrade
-        name: ngast; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngast
-      - name: "ngast; dart analyze --fatal-infos ."
-        run: dart analyze --fatal-infos .
-        if: "always() && steps.ngast_pub_upgrade.conclusion == 'success'"
-        working-directory: ngast
-      - id: ngcompiler_pub_upgrade
-        name: ngcompiler; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngcompiler
-      - name: "ngcompiler; dart analyze --fatal-infos ."
-        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
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngforms
-      - name: "ngforms; dart analyze --fatal-infos ."
-        run: dart analyze --fatal-infos .
-        if: "always() && steps.ngforms_pub_upgrade.conclusion == 'success'"
-        working-directory: ngforms
-      - id: ngrouter_pub_upgrade
-        name: ngrouter; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngrouter
-      - name: "ngrouter; dart analyze --fatal-infos ."
-        run: dart analyze --fatal-infos .
-        if: "always() && steps.ngrouter_pub_upgrade.conclusion == 'success'"
-        working-directory: ngrouter
-      - id: ngtest_pub_upgrade
-        name: ngtest; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngtest
-      - name: "ngtest; dart analyze --fatal-infos ."
-        run: dart analyze --fatal-infos .
-        if: "always() && steps.ngtest_pub_upgrade.conclusion == 'success'"
-        working-directory: ngtest
-    needs:
-      - job_001
-  job_005:
     name: "analyze; Dart stable; PKGS: ngast, ngcompiler, ngdart, ngforms, ngrouter, ngtest; `dart analyze --fatal-infos .`"
     runs-on: ubuntu-latest
     steps:
@@ -348,8 +271,8 @@ jobs:
         working-directory: ngtest
     needs:
       - job_001
-  job_006:
-    name: "build; Dart 3.6.0; PKG: _tests; `dart run build_runner build --fail-on-severe`"
+  job_005:
+    name: "build; Dart 3.6.0; PKG: _tests; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -374,8 +297,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: _tests
-      - name: "_tests; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "_tests; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps._tests_pub_upgrade.conclusion == 'success'"
         working-directory: _tests
     needs:
@@ -383,9 +306,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_007:
-    name: "build; Dart 3.6.0; PKG: ngforms; `dart run build_runner build --fail-on-severe`"
+  job_006:
+    name: "build; Dart 3.6.0; PKG: ngforms; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -410,8 +332,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngforms
-      - name: "ngforms; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "ngforms; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps.ngforms_pub_upgrade.conclusion == 'success'"
         working-directory: ngforms
     needs:
@@ -419,9 +341,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_008:
-    name: "build; Dart 3.6.0; PKG: ngrouter; `dart run build_runner build --fail-on-severe`"
+  job_007:
+    name: "build; Dart 3.6.0; PKG: ngrouter; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -446,8 +367,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngrouter
-      - name: "ngrouter; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "ngrouter; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps.ngrouter_pub_upgrade.conclusion == 'success'"
         working-directory: ngrouter
     needs:
@@ -455,9 +376,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_009:
-    name: "build; Dart 3.6.0; PKG: ngtest; `dart run build_runner build --fail-on-severe`"
+  job_008:
+    name: "build; Dart 3.6.0; PKG: ngtest; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -482,8 +402,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngtest
-      - name: "ngtest; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "ngtest; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps.ngtest_pub_upgrade.conclusion == 'success'"
         working-directory: ngtest
     needs:
@@ -491,153 +411,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_010:
-    name: "build; Dart dev; PKG: _tests; `dart run build_runner build --fail-on-severe`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:_tests;commands:command_0"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:_tests
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: _tests_pub_upgrade
-        name: _tests; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: _tests
-      - name: "_tests; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
-        if: "always() && steps._tests_pub_upgrade.conclusion == 'success'"
-        working-directory: _tests
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-  job_011:
-    name: "build; Dart dev; PKG: ngforms; `dart run build_runner build --fail-on-severe`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngforms;commands:command_0"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngforms
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngforms_pub_upgrade
-        name: ngforms; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngforms
-      - name: "ngforms; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
-        if: "always() && steps.ngforms_pub_upgrade.conclusion == 'success'"
-        working-directory: ngforms
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-  job_012:
-    name: "build; Dart dev; PKG: ngrouter; `dart run build_runner build --fail-on-severe`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngrouter;commands:command_0"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngrouter
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngrouter_pub_upgrade
-        name: ngrouter; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngrouter
-      - name: "ngrouter; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
-        if: "always() && steps.ngrouter_pub_upgrade.conclusion == 'success'"
-        working-directory: ngrouter
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-  job_013:
-    name: "build; Dart dev; PKG: ngtest; `dart run build_runner build --fail-on-severe`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngtest;commands:command_0"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngtest
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngtest_pub_upgrade
-        name: ngtest; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngtest
-      - name: "ngtest; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
-        if: "always() && steps.ngtest_pub_upgrade.conclusion == 'success'"
-        working-directory: ngtest
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-  job_014:
-    name: "build; Dart stable; PKG: _tests; `dart run build_runner build --fail-on-severe`"
+  job_009:
+    name: "build; Dart stable; PKG: _tests; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -662,8 +437,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: _tests
-      - name: "_tests; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "_tests; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps._tests_pub_upgrade.conclusion == 'success'"
         working-directory: _tests
     needs:
@@ -671,9 +446,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_015:
-    name: "build; Dart stable; PKG: ngforms; `dart run build_runner build --fail-on-severe`"
+  job_010:
+    name: "build; Dart stable; PKG: ngforms; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -698,8 +472,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngforms
-      - name: "ngforms; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "ngforms; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps.ngforms_pub_upgrade.conclusion == 'success'"
         working-directory: ngforms
     needs:
@@ -707,9 +481,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_016:
-    name: "build; Dart stable; PKG: ngrouter; `dart run build_runner build --fail-on-severe`"
+  job_011:
+    name: "build; Dart stable; PKG: ngrouter; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -734,8 +507,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngrouter
-      - name: "ngrouter; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "ngrouter; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps.ngrouter_pub_upgrade.conclusion == 'success'"
         working-directory: ngrouter
     needs:
@@ -743,9 +516,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_017:
-    name: "build; Dart stable; PKG: ngtest; `dart run build_runner build --fail-on-severe`"
+  job_012:
+    name: "build; Dart stable; PKG: ngtest; `dart run build_runner build --delete-conflicting-outputs --fail-on-severe`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -770,8 +542,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngtest
-      - name: "ngtest; dart run build_runner build --fail-on-severe"
-        run: dart run build_runner build --fail-on-severe
+      - name: "ngtest; dart run build_runner build --delete-conflicting-outputs --fail-on-severe"
+        run: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
         if: "always() && steps.ngtest_pub_upgrade.conclusion == 'success'"
         working-directory: ngtest
     needs:
@@ -779,9 +551,8 @@ jobs:
       - job_002
       - job_003
       - job_004
-      - job_005
-  job_018:
-    name: "unit_test; Dart 3.6.0; PKG: _tests; `dart run build_runner test --fail-on-severe -- -P browser`"
+  job_013:
+    name: "unit_test; Dart 3.6.0; PKG: _tests; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -806,8 +577,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: _tests
-      - name: "_tests; dart run build_runner test --fail-on-severe -- -P browser"
-        run: dart run build_runner test --fail-on-severe -- -P browser
+      - name: "_tests; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser
         if: "always() && steps._tests_pub_upgrade.conclusion == 'success'"
         working-directory: _tests
     needs:
@@ -823,12 +594,7 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_019:
+  job_014:
     name: "unit_test; Dart 3.6.0; PKG: _tests; `dart test -P vm`"
     runs-on: ubuntu-latest
     steps:
@@ -871,12 +637,7 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_020:
+  job_015:
     name: "unit_test; Dart 3.6.0; PKG: ngast; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -919,12 +680,7 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_021:
+  job_016:
     name: "unit_test; Dart 3.6.0; PKG: ngcompiler; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -967,13 +723,8 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_022:
-    name: "unit_test; Dart 3.6.0; PKG: ngforms; `dart run build_runner test --fail-on-severe -- -P ci`"
+  job_017:
+    name: "unit_test; Dart 3.6.0; PKG: ngforms; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -998,8 +749,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngforms
-      - name: "ngforms; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
+      - name: "ngforms; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
         if: "always() && steps.ngforms_pub_upgrade.conclusion == 'success'"
         working-directory: ngforms
     needs:
@@ -1015,13 +766,8 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_023:
-    name: "unit_test; Dart 3.6.0; PKG: ngrouter; `dart run build_runner test --fail-on-severe -- -P ci`"
+  job_018:
+    name: "unit_test; Dart 3.6.0; PKG: ngrouter; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -1046,8 +792,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngrouter
-      - name: "ngrouter; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
+      - name: "ngrouter; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
         if: "always() && steps.ngrouter_pub_upgrade.conclusion == 'success'"
         working-directory: ngrouter
     needs:
@@ -1063,13 +809,8 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_024:
-    name: "unit_test; Dart 3.6.0; PKG: ngtest; `dart run build_runner test --fail-on-severe -- -P ci`"
+  job_019:
+    name: "unit_test; Dart 3.6.0; PKG: ngtest; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -1094,344 +835,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngtest
-      - name: "ngtest; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
-        if: "always() && steps.ngtest_pub_upgrade.conclusion == 'success'"
-        working-directory: ngtest
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-      - job_006
-      - job_007
-      - job_008
-      - job_009
-      - job_010
-      - job_011
-      - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_025:
-    name: "unit_test; Dart dev; PKG: _tests; `dart run build_runner test --fail-on-severe -- -P browser`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:_tests;commands:command_2"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:_tests
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: _tests_pub_upgrade
-        name: _tests; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: _tests
-      - name: "_tests; dart run build_runner test --fail-on-severe -- -P browser"
-        run: dart run build_runner test --fail-on-severe -- -P browser
-        if: "always() && steps._tests_pub_upgrade.conclusion == 'success'"
-        working-directory: _tests
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-      - job_006
-      - job_007
-      - job_008
-      - job_009
-      - job_010
-      - job_011
-      - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_026:
-    name: "unit_test; Dart dev; PKG: _tests; `dart test -P vm`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:_tests;commands:command_1"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:_tests
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: _tests_pub_upgrade
-        name: _tests; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: _tests
-      - name: "_tests; dart test -P vm"
-        run: dart test -P vm
-        if: "always() && steps._tests_pub_upgrade.conclusion == 'success'"
-        working-directory: _tests
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-      - job_006
-      - job_007
-      - job_008
-      - job_009
-      - job_010
-      - job_011
-      - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_027:
-    name: "unit_test; Dart dev; PKG: ngast; `dart test -P ci`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngast;commands:test"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngast
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngast_pub_upgrade
-        name: ngast; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngast
-      - name: "ngast; dart test -P ci"
-        run: dart test -P ci
-        if: "always() && steps.ngast_pub_upgrade.conclusion == 'success'"
-        working-directory: ngast
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-      - job_006
-      - job_007
-      - job_008
-      - job_009
-      - job_010
-      - job_011
-      - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_028:
-    name: "unit_test; Dart dev; PKG: ngcompiler; `dart test -P ci`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngcompiler;commands:test"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngcompiler
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngcompiler_pub_upgrade
-        name: ngcompiler; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngcompiler
-      - name: "ngcompiler; dart test -P ci"
-        run: dart test -P ci
-        if: "always() && steps.ngcompiler_pub_upgrade.conclusion == 'success'"
-        working-directory: ngcompiler
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-      - job_006
-      - job_007
-      - job_008
-      - job_009
-      - job_010
-      - job_011
-      - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_029:
-    name: "unit_test; Dart dev; PKG: ngforms; `dart run build_runner test --fail-on-severe -- -P ci`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngforms;commands:command_3"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngforms
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngforms_pub_upgrade
-        name: ngforms; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngforms
-      - name: "ngforms; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
-        if: "always() && steps.ngforms_pub_upgrade.conclusion == 'success'"
-        working-directory: ngforms
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-      - job_006
-      - job_007
-      - job_008
-      - job_009
-      - job_010
-      - job_011
-      - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_030:
-    name: "unit_test; Dart dev; PKG: ngrouter; `dart run build_runner test --fail-on-severe -- -P ci`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngrouter;commands:command_3"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngrouter
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngrouter_pub_upgrade
-        name: ngrouter; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngrouter
-      - name: "ngrouter; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
-        if: "always() && steps.ngrouter_pub_upgrade.conclusion == 'success'"
-        working-directory: ngrouter
-    needs:
-      - job_001
-      - job_002
-      - job_003
-      - job_004
-      - job_005
-      - job_006
-      - job_007
-      - job_008
-      - job_009
-      - job_010
-      - job_011
-      - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_031:
-    name: "unit_test; Dart dev; PKG: ngtest; `dart run build_runner test --fail-on-severe -- -P ci`"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cache Pub hosted dependencies
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
-        with:
-          path: "~/.pub-cache/hosted"
-          key: "os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngtest;commands:command_3"
-          restore-keys: |
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev;packages:ngtest
-            os:ubuntu-latest;pub-cache-hosted;sdk:dev
-            os:ubuntu-latest;pub-cache-hosted
-            os:ubuntu-latest
-      - name: Setup Dart SDK
-        uses: dart-lang/setup-dart@e51d8e571e22473a2ddebf0ef8a2123f0ab2c02c
-        with:
-          sdk: dev
-      - id: checkout
-        name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-      - id: ngtest_pub_upgrade
-        name: ngtest; dart pub upgrade
-        run: dart pub upgrade
-        if: "always() && steps.checkout.conclusion == 'success'"
-        working-directory: ngtest
-      - name: "ngtest; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
+      - name: "ngtest; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
         if: "always() && steps.ngtest_pub_upgrade.conclusion == 'success'"
         working-directory: ngtest
     needs:
@@ -1447,13 +852,8 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_032:
-    name: "unit_test; Dart stable; PKG: _tests; `dart run build_runner test --fail-on-severe -- -P browser`"
+  job_020:
+    name: "unit_test; Dart stable; PKG: _tests; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -1478,8 +878,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: _tests
-      - name: "_tests; dart run build_runner test --fail-on-severe -- -P browser"
-        run: dart run build_runner test --fail-on-severe -- -P browser
+      - name: "_tests; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser
         if: "always() && steps._tests_pub_upgrade.conclusion == 'success'"
         working-directory: _tests
     needs:
@@ -1495,12 +895,7 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_033:
+  job_021:
     name: "unit_test; Dart stable; PKG: _tests; `dart test -P vm`"
     runs-on: ubuntu-latest
     steps:
@@ -1543,12 +938,7 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_034:
+  job_022:
     name: "unit_test; Dart stable; PKG: ngast; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1591,12 +981,7 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_035:
+  job_023:
     name: "unit_test; Dart stable; PKG: ngcompiler; `dart test -P ci`"
     runs-on: ubuntu-latest
     steps:
@@ -1639,13 +1024,8 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_036:
-    name: "unit_test; Dart stable; PKG: ngforms; `dart run build_runner test --fail-on-severe -- -P ci`"
+  job_024:
+    name: "unit_test; Dart stable; PKG: ngforms; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -1670,8 +1050,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngforms
-      - name: "ngforms; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
+      - name: "ngforms; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
         if: "always() && steps.ngforms_pub_upgrade.conclusion == 'success'"
         working-directory: ngforms
     needs:
@@ -1687,13 +1067,8 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_037:
-    name: "unit_test; Dart stable; PKG: ngrouter; `dart run build_runner test --fail-on-severe -- -P ci`"
+  job_025:
+    name: "unit_test; Dart stable; PKG: ngrouter; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -1718,8 +1093,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngrouter
-      - name: "ngrouter; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
+      - name: "ngrouter; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
         if: "always() && steps.ngrouter_pub_upgrade.conclusion == 'success'"
         working-directory: ngrouter
     needs:
@@ -1735,13 +1110,8 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
-  job_038:
-    name: "unit_test; Dart stable; PKG: ngtest; `dart run build_runner test --fail-on-severe -- -P ci`"
+  job_026:
+    name: "unit_test; Dart stable; PKG: ngtest; `dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci`"
     runs-on: ubuntu-latest
     steps:
       - name: Cache Pub hosted dependencies
@@ -1766,8 +1136,8 @@ jobs:
         run: dart pub upgrade
         if: "always() && steps.checkout.conclusion == 'success'"
         working-directory: ngtest
-      - name: "ngtest; dart run build_runner test --fail-on-severe -- -P ci"
-        run: dart run build_runner test --fail-on-severe -- -P ci
+      - name: "ngtest; dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci"
+        run: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
         if: "always() && steps.ngtest_pub_upgrade.conclusion == 'success'"
         working-directory: ngtest
     needs:
@@ -1783,8 +1153,3 @@ jobs:
       - job_010
       - job_011
       - job_012
-      - job_013
-      - job_014
-      - job_015
-      - job_016
-      - job_017
diff --git a/_tests/dart_test.yaml b/_tests/dart_test.yaml
index df4d34ee01..581c9b0d2c 100644
--- a/_tests/dart_test.yaml
+++ b/_tests/dart_test.yaml
@@ -5,6 +5,9 @@ presets:
   browser:
     platforms:
       - chrome
+    compilers:
+      - dart2js
+      - dart2wasm
     paths:
       - test/bootstrap
       - test/common
diff --git a/_tests/lib/compiler.dart b/_tests/lib/compiler.dart
index e011bf78a6..e8c6033bfc 100644
--- a/_tests/lib/compiler.dart
+++ b/_tests/lib/compiler.dart
@@ -106,7 +106,7 @@ Future<void> _testBuilder(
           inputIds,
           reader,
           writer,
-          AnalyzerResolvers(),
+          AnalyzerResolvers.custom(),
           logger: logger,
         ),
         ['non-nullable'],
diff --git a/_tests/lib/matchers.dart b/_tests/lib/matchers.dart
index 9309be769f..9e528605f5 100644
--- a/_tests/lib/matchers.dart
+++ b/_tests/lib/matchers.dart
@@ -1,11 +1,18 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 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);
 
+/// Matches DOMTokenList.
+Matcher hasDomTokenList(List<String> expected) => _HasDomTokenList(expected);
+
+/// Matches textual content of an element including children.
+Matcher hasInnerHtml(String expected) => _HasInnerHtml(expected);
+
 final throwsNoProviderError = throwsA(_isNoProviderError);
 final _isNoProviderError = const TypeMatcher<NoProviderError>();
 
@@ -15,7 +22,8 @@ class _HasTextContent extends Matcher {
   const _HasTextContent(this.expectedText);
 
   @override
-  bool matches(Object? item, void _) => _elementText(item) == expectedText;
+  bool matches(Object? item, void _) =>
+      _elementText(item as JSAny?) == expectedText;
 
   @override
   Description describe(Description description) =>
@@ -29,33 +37,100 @@ class _HasTextContent extends Matcher {
     void __,
   ) {
     mismatchDescription.add('Text content of element: '
-        '\'${_elementText(item)}\'');
+        '\'${_elementText(item as JSAny?)}\'');
     return mismatchDescription;
   }
 }
 
-String? _elementText(Object? n) {
-  if (n is Iterable) {
-    return n.map(_elementText).join('');
-  } else if (n is Node) {
-    if (n is Comment) {
+String? _elementText(JSAny? node) {
+  if (node.isA<NodeList>()) {
+    return <String?>[
+      for (var i = 0; i < (node as NodeList).length; i++)
+        _elementText(node.item(i))
+    ].join('');
+  }
+
+  if (node.isA<Node>()) {
+    if (node.isA<Comment>()) {
       return '';
     }
 
-    if (n is ContentElement) {
-      return _elementText(n.getDistributedNodes());
+    if (node.isA<Element>() && (node as Element).shadowRoot != null) {
+      return _elementText(node.shadowRoot!.childNodes);
+    }
+
+    if ((node as Node).childNodes.length != 0) {
+      return _elementText(node.childNodes);
     }
 
-    if (n is Element && n.shadowRoot != null) {
-      return _elementText(n.shadowRoot!.nodes);
+    return node.textContent;
+  }
+
+  return null;
+}
+
+class _HasDomTokenList extends Matcher {
+  final List<String?> expectedTokens;
+
+  const _HasDomTokenList(this.expectedTokens);
+
+  @override
+  bool matches(Object? item, void _) {
+    final tokens = item as DOMTokenList;
+
+    if (tokens.length != expectedTokens.length) {
+      return false;
     }
 
-    if (n.nodes.isNotEmpty) {
-      return _elementText(n.nodes);
+    for (var i = 0; i < expectedTokens.length; i++) {
+      if (tokens.item(i) != expectedTokens[i]) {
+        return false;
+      }
     }
 
-    return n.text;
-  } else {
-    return '$n';
+    return true;
+  }
+
+  @override
+  Description describe(Description description) {
+    return description.add(expectedTokens.join(','));
+  }
+
+  @override
+  Description describeMismatch(
+    item,
+    Description mismatchDescription,
+    void _,
+    void __,
+  ) {
+    mismatchDescription.add('DOMTokenList: \'$item}\'');
+    return mismatchDescription;
+  }
+}
+
+class _HasInnerHtml extends Matcher {
+  final String expectedHtml;
+
+  const _HasInnerHtml(this.expectedHtml);
+
+  @override
+  bool matches(Object? item, void _) {
+    return ((item as Element).innerHTML as JSString).toDart == expectedHtml;
+  }
+
+  @override
+  Description describe(Description description) =>
+      description.add(expectedHtml);
+
+  @override
+  Description describeMismatch(
+    item,
+    Description mismatchDescription,
+    void _,
+    void __,
+  ) {
+    mismatchDescription.add('Inner HTML of element: '
+        '\'${_elementText(item as Element)}\'');
+    return mismatchDescription;
   }
 }
diff --git a/_tests/mono_pkg.yaml b/_tests/mono_pkg.yaml
index ff19ea1a63..7517a33007 100644
--- a/_tests/mono_pkg.yaml
+++ b/_tests/mono_pkg.yaml
@@ -1,11 +1,11 @@
 sdk:
   - pubspec
-  - dev
   - stable
+  # - dev
 
 stages:
   - build:
-      - command: dart run build_runner build --fail-on-severe
+      - command: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
   - unit_test:
       - command: dart test -P vm
-      - command: dart run build_runner test --fail-on-severe -- -P browser
+      - command: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser
diff --git a/_tests/pubspec.yaml b/_tests/pubspec.yaml
index 21afcfec53..fefc46af6e 100644
--- a/_tests/pubspec.yaml
+++ b/_tests/pubspec.yaml
@@ -13,13 +13,13 @@ dependencies:
   build_test: ^2.2.2
   collection: ^1.19.1
   glob: ^2.1.2
-  js: ^0.7.1
   logging: ^1.3.0
   ngcompiler: ^3.0.0-dev.3
   ngdart: ^8.0.0-dev.4
   ngtest: ^5.0.0-dev.2
   source_gen: ^1.5.0
   test: ^1.25.9
+  web: ^1.1.1
 
 dev_dependencies:
   analyzer: ^6.5.0
diff --git a/_tests/test/bootstrap/run_app_test.dart b/_tests/test/bootstrap/run_app_test.dart
index fcee2b14f2..e76876e662 100644
--- a/_tests/test/bootstrap/run_app_test.dart
+++ b/_tests/test/bootstrap/run_app_test.dart
@@ -1,12 +1,9 @@
-@JS()
-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 +24,9 @@ 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 +35,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(getAllAngularTestabilities().length, isNot(equals(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';
   });
@@ -166,10 +163,9 @@ class StubExceptionHandler implements ExceptionHandler {
 external JsTestability getAngularTestability(Element e);
 
 @JS()
-external List<JsTestability> getAllAngularTestabilities();
+external JSArray<JsTestability> getAllAngularTestabilities();
 
-@JS()
-abstract class JsTestability {
+extension type JsTestability._(JSObject _) implements JSObject {
   external bool isStable();
-  external void whenStable(void Function() fn);
+  external void whenStable(JSFunction fn);
 }
diff --git a/_tests/test/common/directives/for_test.dart b/_tests/test/common/directives/for_test.dart
index b881721920..ab83eb5e4b 100644
--- a/_tests/test/common/directives/for_test.dart
+++ b/_tests/test/common/directives/for_test.dart
@@ -1,5 +1,3 @@
-library angular2.test.common.directives.for_test;
-
 import 'dart:async';
 
 import 'package:_tests/matchers.dart';
@@ -298,7 +296,7 @@ void main() {
       await testFixture.update((component) {
         component.child!.items = ['a', 'b', 'c'];
       });
-      expect(testFixture.text, hasTextContent('0: a;1: b;2: c;'));
+      expect(testFixture.text, equals('0: a;1: b;2: c;'));
     });
 
     test('should use a default template if a custom one is null', () async {
@@ -308,7 +306,7 @@ void main() {
       await testFixture.update((NgForCustomTemplateNullTest component) {
         component.child!.items = ['a', 'b', 'c'];
       });
-      expect(testFixture.text, hasTextContent('0: a;1: b;2: c;'));
+      expect(testFixture.text, equals('0: a;1: b;2: c;'));
     });
 
     test(
@@ -320,7 +318,7 @@ void main() {
       await testFixture.update((NgForCustomTemplatePrecedenceTest component) {
         component.child!.items = ['a', 'b', 'c'];
       });
-      expect(testFixture.text, hasTextContent('0: a;1: b;2: c;'));
+      expect(testFixture.text, equals('0: a;1: b;2: c;'));
     });
 
     group('track by', () {
@@ -380,8 +378,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..ef4122c5e6 100644
--- a/_tests/test/common/directives/if_test.dart
+++ b/_tests/test/common/directives/if_test.dart
@@ -1,3 +1,5 @@
+import 'dart:js_interop';
+
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/src/runtime/check_binding.dart';
 import 'package:ngtest/angular_test.dart';
@@ -15,7 +17,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 +52,31 @@ void main() {
         component.booleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect((element.innerHTML as JSString).toDart.contains('hello'), isFalse);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.booleanCondition = true;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml!.contains('hello'), true);
+      expect((element.innerHTML as JSString).toDart.contains('hello'), isTrue);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.nestedBooleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect((element.innerHTML as JSString).toDart.contains('hello'), isFalse);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.nestedBooleanCondition = true;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml!.contains('hello'), true);
+      expect((element.innerHTML as JSString).toDart.contains('hello'), isTrue);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.booleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect((element.innerHTML as JSString).toDart.contains('hello'), isFalse);
     });
 
     test('should update multiple bindings', () async {
@@ -84,20 +86,21 @@ void main() {
       var element = testFixture.rootElement;
       // Check startup.
       expect(element.querySelectorAll('copy-me'), hasLength(3));
-      expect(element.text, 'helloNumberhelloStringhelloFunction');
+      expect(
+          element.textContent, equals('helloNumberhelloStringhelloFunction'));
 
       await testFixture.update((NgIfMultiUpdateTestComponent component) {
         component.numberCondition = 0;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.text, 'helloString');
+      expect(element.textContent, equals('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, equals('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..c15db1f6d7 100644
--- a/_tests/test/common/directives/ng_class_test.dart
+++ b/_tests/test/common/directives/ng_class_test.dart
@@ -1,8 +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 'ng_class_test.template.dart' as ng;
 
@@ -25,8 +25,8 @@ void main() {
         ];
       });
       expect(
-        testFixture.rootElement.querySelector('div')!.classes,
-        equals(['1']),
+        testFixture.rootElement.querySelector('div')!.classList,
+        hasDomTokenList(['1']),
       );
     });
 
@@ -35,8 +35,8 @@ void main() {
       var testBed = NgTestBed<ClassWithNames>(ng.createClassWithNamesFactory());
       var testFixture = await testBed.create();
       expect(
-        testFixture.rootElement.querySelector('div')!.classes,
-        equals(['foo-bar', 'fooBar']),
+        testFixture.rootElement.querySelector('div')!.classList,
+        hasDomTokenList(['foo-bar', 'fooBar']),
       );
     });
 
@@ -45,30 +45,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, hasDomTokenList(['foo']));
       await testFixture.update((ConditionMapTest component) {
         component.condition = false;
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList, hasDomTokenList(['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, hasDomTokenList(['foo']));
       await testFixture.update((MapUpdateTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['foo', 'bar']));
       await testFixture.update((MapUpdateTest component) {
         component.map!['baz'] = true;
       });
-      expect(content.classes, equals(['foo', 'bar', 'baz']));
+      expect(content.classList, hasDomTokenList(['foo', 'bar', 'baz']));
       await testFixture.update((MapUpdateTest component) {
         component.map!.remove('bar');
       });
-      expect(content.classes, equals(['foo', 'baz']));
+      expect(content.classList, hasDomTokenList(['foo', 'baz']));
     });
 
     test('should update classes based on reference changes to the map',
@@ -76,30 +76,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, hasDomTokenList(['foo']));
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'foo': true, 'bar': true};
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['foo', 'bar']));
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'baz': true};
       });
-      expect(content.classes, equals(['baz']));
+      expect(content.classList, hasDomTokenList(['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, hasDomTokenList(['foo']));
       await testFixture.update((MapUpdateTest component) {
         component.map = null;
       });
-      expect(content.classes, isEmpty);
+      expect(content.classList, hasDomTokenList([]));
       await testFixture.update((MapUpdateTest component) {
         component.map = <String, bool>{'foo': false, 'bar': true};
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList, hasDomTokenList(['bar']));
     });
 
     test('should allow multiple classes per expression', () async {
@@ -109,11 +109,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, hasDomTokenList(['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, hasDomTokenList(['bar1', 'baz1']));
     });
 
     test('should split by one or more spaces between classes', () async {
@@ -123,37 +124,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, hasDomTokenList(['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, hasDomTokenList(['foo']));
       await testFixture.update((ListUpdateTest component) {
         component.list.add('bar');
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['foo', 'bar']));
       await testFixture.update((ListUpdateTest component) {
         component.list[1] = 'baz';
       });
-      expect(content.classes, equals(['foo', 'baz']));
+      expect(content.classList, hasDomTokenList(['foo', 'baz']));
       await testFixture.update((ListUpdateTest component) {
         component.list.remove('baz');
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList, hasDomTokenList(['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, hasDomTokenList(['foo']));
       await testFixture.update((ListUpdateTest component) {
         component.list = ['bar'];
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList, hasDomTokenList(['bar']));
     });
 
     test('should take initial classes into account when a reference changes',
@@ -162,11 +163,11 @@ void main() {
           ng.createListUpdateWithInitialTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList, hasDomTokenList(['foo']));
       await testFixture.update((ListUpdateWithInitialTest component) {
         component.list = ['bar'];
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['foo', 'bar']));
     });
 
     test('should ignore empty or blank class names', () async {
@@ -177,7 +178,7 @@ void main() {
       await testFixture.update((ListUpdateWithInitialTest component) {
         component.list = ['', '  '];
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList, hasDomTokenList(['foo']));
     });
 
     test('should trim blanks from class names', () async {
@@ -188,7 +189,7 @@ void main() {
       await testFixture.update((ListUpdateWithInitialTest component) {
         component.list = [' bar  '];
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['foo', 'bar']));
     });
 
     test('should allow multiple classes per item in lists', () async {
@@ -198,12 +199,13 @@ void main() {
       await testFixture.update((ListUpdateTest component) {
         component.list = ['foo bar baz', 'foo1 bar1   baz1'];
       });
-      expect(content.classes,
-          equals(['foo', 'bar', 'baz', 'foo1', 'bar1', 'baz1']));
+      expect(content.classList,
+          hasDomTokenList(['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, hasDomTokenList(['foo', 'bar', 'baz', 'foobar']));
     });
 
     test('should update classes if the set instance changes', () async {
@@ -215,13 +217,13 @@ void main() {
       await testFixture.update((SetUpdateTest component) {
         component.set = set;
       });
-      expect(content.classes, equals(['bar']));
+      expect(content.classList, hasDomTokenList(['bar']));
       set = <String>{};
       set.add('baz');
       await testFixture.update((SetUpdateTest component) {
         component.set = set;
       });
-      expect(content.classes, equals(['baz']));
+      expect(content.classList, hasDomTokenList(['baz']));
     });
 
     test('should add classes specified in a string literal', () async {
@@ -229,7 +231,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,
+          hasDomTokenList(['foo', 'bar', 'foo-bar', 'fooBar']));
     });
 
     test('should update classes based on changes to the string', () async {
@@ -237,15 +240,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, hasDomTokenList(['foo']));
       await testFixture.update((StringUpdateTest component) {
         component.string = 'foo bar';
       });
-      expect(content.classes, equals(['foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['foo', 'bar']));
       await testFixture.update((StringUpdateTest component) {
         component.string = 'baz';
       });
-      expect(content.classes, equals(['baz']));
+      expect(content.classList, hasDomTokenList(['baz']));
     });
 
     test('should remove active classes when switching from string to null',
@@ -254,11 +257,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, hasDomTokenList(['foo']));
       await testFixture.update((StringUpdateTest component) {
         component.string = null;
       });
-      expect(content.classes, isEmpty);
+      expect(content.classList.length, equals(0));
     });
 
     test(
@@ -268,11 +271,11 @@ void main() {
           ng.createStringUpdateWithInitialTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['foo']));
+      expect(content.classList, hasDomTokenList(['foo']));
       await testFixture.update((StringUpdateWithInitialTest component) {
         component.string = null;
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList, hasDomTokenList(['foo']));
     });
 
     test('should ignore empty and blank strings', () async {
@@ -283,7 +286,7 @@ void main() {
       await testFixture.update((StringUpdateWithInitialTest component) {
         component.string = '';
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList, hasDomTokenList(['foo']));
     });
 
     test('should cooperate with the class attribute', () async {
@@ -294,15 +297,15 @@ void main() {
       await testFixture.update((MapUpdateWithInitialTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'foo', 'bar']));
       await testFixture.update((MapUpdateWithInitialTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'bar']));
       await testFixture.update((MapUpdateWithInitialTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList, hasDomTokenList(['init', 'foo']));
     });
 
     test('should cooperate with interpolated class attribute', () async {
@@ -314,17 +317,17 @@ void main() {
           .update((MapUpdateWithInitialInterpolationTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'foo', 'bar']));
       await testFixture
           .update((MapUpdateWithInitialInterpolationTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'bar']));
       await testFixture
           .update((MapUpdateWithInitialInterpolationTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList, hasDomTokenList(['init', 'foo']));
     });
 
     test('should cooperate with class attribute and binding to it', () async {
@@ -335,15 +338,15 @@ void main() {
       await testFixture.update((MapUpdateWithInitialBindingTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'foo', 'bar']));
       await testFixture.update((MapUpdateWithInitialBindingTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'bar']));
       await testFixture.update((MapUpdateWithInitialBindingTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList, hasDomTokenList(['init', 'foo']));
     });
 
     test('should cooperate with class attribute and class.name binding',
@@ -352,19 +355,19 @@ 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, hasDomTokenList(['init', 'foo', 'baz']));
       await testFixture.update((MapUpdateWithConditionBindingTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'baz', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'foo', 'baz', 'bar']));
       await testFixture.update((MapUpdateWithConditionBindingTest component) {
         component.map!['foo'] = false;
       });
-      expect(content.classes, equals(['init', 'baz', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'baz', 'bar']));
       await testFixture.update((MapUpdateWithConditionBindingTest component) {
         component.condition = false;
       });
-      expect(content.classes, equals(['init', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'bar']));
     });
 
     test(
@@ -374,19 +377,19 @@ void main() {
           ng.createMapUpdateWithStringBindingTestFactory());
       var testFixture = await testBed.create();
       var content = testFixture.rootElement.querySelector('div')!;
-      expect(content.classes, equals(['init', 'foo']));
+      expect(content.classList, hasDomTokenList(['init', 'foo']));
       await testFixture.update((MapUpdateWithStringBindingTest component) {
         component.map!['bar'] = true;
       });
-      expect(content.classes, equals(['init', 'foo', 'bar']));
+      expect(content.classList, hasDomTokenList(['init', 'foo', 'bar']));
       await testFixture.update((MapUpdateWithStringBindingTest component) {
         component.string = 'baz';
       });
-      expect(content.classes, equals(['init', 'bar', 'baz', 'foo']));
+      expect(content.classList, hasDomTokenList(['init', 'bar', 'baz', 'foo']));
       await testFixture.update((MapUpdateWithStringBindingTest component) {
         component.map = null;
       });
-      expect(content.classes, equals(['init', 'baz']));
+      expect(content.classList, hasDomTokenList(['init', 'baz']));
     });
 
     test(
@@ -396,17 +399,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, hasDomTokenList(['foo', 'baz']));
       await testFixture
           .update((InterpolationWithConditionBindingTest component) {
         component.condition = false;
       });
-      expect(content.classes, equals(['foo']));
+      expect(content.classList, hasDomTokenList(['foo']));
       await testFixture
           .update((InterpolationWithConditionBindingTest component) {
         component.condition = true;
       });
-      expect(content.classes, equals(['foo', 'baz']));
+      expect(content.classList, hasDomTokenList(['foo', 'baz']));
     });
   });
 
@@ -681,8 +684,16 @@ class MapUpdateWithStringBindingTest extends Base {}
 class InterpolationWithConditionBindingTest extends Base {}
 
 extension _SumCssClasses on Element {
-  Iterable<String> get allCssClasses {
-    return querySelectorAll('*').map((e) => e.classes).expand((c) => c);
+  Iterable<String> get allCssClasses sync* {
+    final nodes = querySelectorAll('*');
+    final nodesLength = nodes.length;
+    for (var i = 0; i < nodesLength; i++) {
+      final classList = (nodes.item(i) as Element).classList;
+      final classListLength = classList.length;
+      for (var j = 0; j < classListLength; j++) {
+        yield classList.item(j)!;
+      }
+    }
   }
 }
 
diff --git a/_tests/test/common/directives/ng_style_test.dart b/_tests/test/common/directives/ng_style_test.dart
index 756dff719b..66995c8baf 100644
--- a/_tests/test/common/directives/ng_style_test.dart
+++ b/_tests/test/common/directives/ng_style_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 'ng_style_test.template.dart' as ng;
 
@@ -11,7 +12,7 @@ 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,7 @@ 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 +41,7 @@ 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 +59,7 @@ 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/common/pipes/async_pipe_test.dart b/_tests/test/common/pipes/async_pipe_test.dart
index e7b31e9d7e..72722c7729 100644
--- a/_tests/test/common/pipes/async_pipe_test.dart
+++ b/_tests/test/common/pipes/async_pipe_test.dart
@@ -175,5 +175,5 @@ class FakeChangeDetectorRef implements ChangeDetectorRef {
   }
 
   @override
-  dynamic noSuchMethod(_) => super.noSuchMethod(_);
+  dynamic noSuchMethod(Invocation invocation) => super.noSuchMethod(invocation);
 }
diff --git a/_tests/test/compiler/expression_parser/analyzer_test.dart b/_tests/test/compiler/expression_parser/analyzer_test.dart
index 0a26291b16..0e8c338936 100644
--- a/_tests/test/compiler/expression_parser/analyzer_test.dart
+++ b/_tests/test/compiler/expression_parser/analyzer_test.dart
@@ -6,7 +6,7 @@ import 'package:test/test.dart';
 import 'unparser.dart';
 
 const _isParseException = TypeMatcher<ParseException>();
-const _throwsParseException = Throws(_isParseException);
+final _throwsParseException = throwsA(_isParseException);
 
 void main() {
   final parser = AnalyzerExpressionParser();
diff --git a/_tests/test/compiler_integration/invalid_late_fields_test.dart b/_tests/test/compiler_integration/invalid_late_fields_test.dart
index 01ea076e08..064c534e32 100644
--- a/_tests/test/compiler_integration/invalid_late_fields_test.dart
+++ b/_tests/test/compiler_integration/invalid_late_fields_test.dart
@@ -24,9 +24,10 @@ void main() {
 
   test('should refuse to compile non-nullable single child query', () async {
     await compilesExpecting("""
-      import 'dart:html';
       import '$ngImport';
 
+      import 'package:web/web.dart';
+
       @Component(
         selector: 'example-comp',
         template: '<div></div>',
@@ -42,9 +43,10 @@ void main() {
 
   test('should refuse to compile late fields with a child query', () async {
     await compilesExpecting("""
-      import 'dart:html';
       import '$ngImport';
 
+      import 'package:web/web.dart';
+
       @Component(
         selector: 'example-comp',
         template: '<div></div>',
@@ -60,9 +62,10 @@ void main() {
 
   test('should refuse to compile late fields with a children query', () async {
     await compilesExpecting("""
-      import 'dart:html';
       import '$ngImport';
 
+      import 'package:web/web.dart';
+
       @Component(
         selector: 'example-comp',
         template: '<div></div>',
@@ -78,9 +81,10 @@ void main() {
 
   test('should compile non-nullable fields with a children query', () async {
     await compilesNormally("""
-      import 'dart:html';
       import '$ngImport';
 
+      import 'package:web/web.dart';
+
       @Component(
         selector: 'example-comp',
         template: '<div></div>',
diff --git a/_tests/test/core/application_ref_test.dart b/_tests/test/core/application_ref_test.dart
index 13a68cd6b8..873cc5907b 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),
@@ -100,12 +101,12 @@ void main() {
 
     test('return an asynchronous null', () {
       final result = appRef.run(() async => null);
-      expect(result, isInstanceOf<Future<void>>());
+      expect(result, isA<Future<void>>());
     });
 
     test('return an asynchronous nullable value', () {
       final result = appRef.run<String?>(() async => null);
-      expect(result, isInstanceOf<Future<String?>>());
+      expect(result, isA<Future<String?>>());
     });
 
     test('never return (threw synchronously)', () {
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..31c8b49b32 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,8 @@ 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.getAttribute('data-xyz'), 'abc');
   });
 }
 
@@ -58,5 +57,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/differs/default_iterable_differ_test.dart b/_tests/test/core/change_detection/differs/default_iterable_differ_test.dart
index abd3b213c6..e2427607bd 100644
--- a/_tests/test/core/change_detection/differs/default_iterable_differ_test.dart
+++ b/_tests/test/core/change_detection/differs/default_iterable_differ_test.dart
@@ -1,5 +1,3 @@
-library angular2.test.core.change_detection.differs.default_iterable_differ_test;
-
 import 'dart:collection';
 
 import 'package:ngdart/src/core/change_detection/differs/default_iterable_differ.dart';
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..a35164b4b5 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;
 
@@ -38,7 +38,7 @@ void main() {
           ng.createTestDerivedComponentFactory());
       final testFixture = await testBed.create();
       final hostElement = testFixture.rootElement.querySelector('derived')!;
-      expect(hostElement.attributes, containsPair('title', 'inherited'));
+      expect(hostElement.getAttribute('title'), equals('inherited'));
     });
 
     test('implementation should be overriden', () async {
@@ -46,7 +46,7 @@ void main() {
           ng.createTestOverrideComponentFactory());
       final testFixture = await testBed.create();
       final hostElement = testFixture.rootElement.querySelector('override')!;
-      expect(hostElement.attributes, containsPair('title', 'overridden'));
+      expect(hostElement.getAttribute('title'), equals('overridden'));
     });
 
     test('should allow multiple bindings to inherited property', () async {
@@ -55,8 +55,8 @@ void main() {
       final testFixture = await testBed.create();
       final hostElement =
           testFixture.rootElement.querySelector('annotated-derived')!;
-      expect(hostElement.attributes, containsPair('title', 'inherited'));
-      expect(hostElement.attributes, containsPair('id', 'inherited'));
+      expect(hostElement.getAttribute('title'), equals('inherited'));
+      expect(hostElement.getAttribute('id'), equals('inherited'));
     });
   });
 
@@ -215,9 +215,9 @@ void main() {
       });
       final element =
           testFixture.rootElement.querySelector('multiple-supertypes')!;
-      expect(element.attributes, containsPair('foo', '1'));
-      expect(element.attributes, containsPair('bar', '2'));
-      expect(element.attributes, containsPair('baz', '3'));
+      expect(element.getAttribute('foo'), equals('1'));
+      expect(element.getAttribute('bar'), equals('2'));
+      expect(element.getAttribute('baz'), equals('3'));
     });
 
     test('from most derived binding', () async {
@@ -229,8 +229,8 @@ void main() {
           ..value = '1'
           ..fooValue = '2';
       });
-      expect(testFixture.rootElement.attributes, containsPair('foo', '2'));
-      expect(testFixture.rootElement.attributes, containsPair('bar', '1'));
+      expect(testFixture.rootElement.getAttribute('foo'), equals('2'));
+      expect(testFixture.rootElement.getAttribute('bar'), equals('1'));
     });
   });
 
diff --git a/_tests/test/core/directive_lifecycle_integration_test.dart b/_tests/test/core/directive_lifecycle_integration_test.dart
index 2713940385..ff7b750ada 100644
--- a/_tests/test/core/directive_lifecycle_integration_test.dart
+++ b/_tests/test/core/directive_lifecycle_integration_test.dart
@@ -1,5 +1,3 @@
-library angular2.test.core.directive_lifecycle_integration_test;
-
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
diff --git a/_tests/test/core/event_handler_test.dart b/_tests/test/core/event_handler_test.dart
index d942fd34b9..6274001ea2 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,8 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -66,7 +67,8 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -77,7 +79,8 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -88,7 +91,8 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -99,7 +103,8 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -110,7 +115,8 @@ void main() {
       );
       final fixture = await testBed.create();
       await fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       });
       expect(fixture.assertOnlyInstance.captured, ['bar']);
     });
@@ -123,7 +129,8 @@ void main() {
     final fixture = await testBed.create();
     overrideTopLevelDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+          .click();
     });
   }, skip: 'https://github.com/angulardart/angular/issues/1670');
 
@@ -134,7 +141,8 @@ void main() {
     final fixture = await testBed.create();
     overrideTopLevelDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+          .click();
     });
   });
 
@@ -145,7 +153,8 @@ void main() {
     final fixture = await testBed.create();
     TestStaticMethods.overrideDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+          .click();
     });
   });
 
@@ -156,7 +165,8 @@ void main() {
     final fixture = await testBed.create();
     TestStaticMethodsDirect.overrideDoCapture = expectAsync0(() {});
     await fixture.update((_) {
-      fixture.rootElement.querySelector('button')!.click();
+      (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+          .click();
     });
   });
 
@@ -167,7 +177,8 @@ 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 HTMLButtonElement)
+          .click();
     });
   }, skip: 'https://github.com/angulardart/angular/issues/1670');
 
@@ -178,7 +189,8 @@ 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 HTMLButtonElement)
+          .click();
     });
   });
 
@@ -188,7 +200,7 @@ void main() {
         ng.createComponentWithHostEventThatThrowsFactory());
     final fixture = await testBed.create();
     expect(
-      fixture.update((_) => fixture.rootElement.click()),
+      fixture.update((_) => (fixture.rootElement as HTMLElement).click()),
       throwsIntentional,
     );
   });
@@ -206,19 +218,19 @@ void main() {
 )
 class ClickHandler extends SuperClick {
   @ViewChild('noArg')
-  HtmlElement? noArgButton;
+  HTMLElement? noArgButton;
 
   @ViewChild('oneArg')
-  HtmlElement? oneArgButton;
+  HTMLElement? oneArgButton;
 
   @ViewChild('noArgTearoff')
-  HtmlElement? noArgTearoffButton;
+  HTMLElement? noArgTearoffButton;
 
   @ViewChild('oneArgTearoff')
-  HtmlElement? oneArgTearoffButton;
+  HTMLElement? oneArgTearoffButton;
 
   @ViewChild('superTearoff')
-  HtmlElement? superTearoffButton;
+  HTMLElement? superTearoffButton;
 
   void onClick() {
     _clicks.add(null);
diff --git a/_tests/test/core/exports_test.dart b/_tests/test/core/exports_test.dart
index 837a6df42d..5abedcefee 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 HTMLDivElement;
       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 HTMLDivElement;
       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 HTMLDivElement;
       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..2c23dd0e98 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', () {
@@ -88,16 +89,16 @@ void main() {
       );
       final fixture = await testBed.create();
       final element = fixture.rootElement;
-      expect(element.attributes, isNot(contains('disabled')));
-      expect(element.attributes, isNot(contains('aria-disabled')));
+      expect(element.getAttribute('disabled'), isNull);
+      expect(element.getAttribute('aria-disabled'), isNull);
 
       await fixture.update((c) => c.disabledBackingValue = true);
-      expect(element.attributes, contains('disabled'));
-      expect(element.attributes, contains('aria-disabled'));
+      expect(element.getAttribute('disabled'), isNotNull);
+      expect(element.getAttribute('aria-disabled'), isNotNull);
 
       await fixture.update((c) => c.disabledBackingValue = false);
-      expect(element.attributes, isNot(contains('disabled')));
-      expect(element.attributes, isNot(contains('aria-disabled')));
+      expect(element.getAttribute('disabled'), isNull);
+      expect(element.getAttribute('aria-disabled'), isNull);
     });
 
     test('should support conditional attributes on static members', () async {
@@ -106,8 +107,8 @@ void main() {
       );
       final fixture = await testBed.create();
       final element = fixture.rootElement;
-      expect(element.attributes, contains('disabled'));
-      expect(element.attributes, contains('aria-disabled'));
+      expect(element.getAttribute('disabled'), isNotNull);
+      expect(element.getAttribute('aria-disabled'), isNotNull);
     });
 
     test('should support conditional classes', () async {
@@ -116,13 +117,13 @@ void main() {
       );
       final fixture = await testBed.create();
       final element = fixture.rootElement;
-      expect(element.classes, isNot(contains('fancy')));
+      expect(element.classList.value, isNot(contains('fancy')));
 
       await fixture.update((c) => c.fancy = true);
-      expect(element.classes, contains('fancy'));
+      expect(element.classList.value, contains('fancy'));
 
       await fixture.update((c) => c.fancy = false);
-      expect(element.classes, isNot(contains('fancy')));
+      expect(element.classList.value, 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..14f82d25a9 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;
 
@@ -40,7 +39,7 @@ void main() {
           ng.createShouldEscapeI18nPropertyFactory());
       final testFixture = await testBed.create();
       final imgElement =
-          testFixture.rootElement.querySelector('img') as ImageElement;
+          testFixture.rootElement.querySelector('img') as HTMLImageElement;
       expect(imgElement.alt, matches(regExp));
     });
 
diff --git a/_tests/test/core/i18n_test.dart b/_tests/test/core/i18n_test.dart
index e3f54808c8..50f77b2ce9 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;
 
@@ -20,7 +19,7 @@ void main() {
         NgTestBed<TestI18nAttribute>(ng.createTestI18nAttributeFactory());
     final testFixture = await testBed.create();
     final imgElement =
-        testFixture.rootElement.querySelector('img') as ImageElement;
+        testFixture.rootElement.querySelector('img') as HTMLImageElement;
     expect(imgElement.alt, 'A puppy!');
   });
 
@@ -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..160142632e 100644
--- a/_tests/test/core/linker/component_selector_test.dart
+++ b/_tests/test/core/linker/component_selector_test.dart
@@ -21,72 +21,93 @@ void main() {
       final testBed = NgTestBed<ExactAttributeSelectorTestComponent>(
           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(
+          testFixture.rootElement.querySelector('[foo]')!.textContent, isEmpty);
+      expect(testFixture.rootElement.querySelector('[foo=bar]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=barbaz]')!.textContent,
+          isEmpty);
     });
 
     test('should support hypen attribute selector', () async {
       final testBed = NgTestBed<HyphenAttributeSelectorTestComponent>(
           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(testFixture.rootElement.querySelector('[foo=bar]')!.textContent,
+          'Matched!');
+      expect(
+          testFixture.rootElement.querySelector('[foo="bar-baz"]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=barbaz]')!.textContent,
+          isEmpty);
     });
 
     test('should support list attribute selector', () async {
       final testBed = NgTestBed<ListAttributeSelectorTestComponent>(
           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(testFixture.rootElement.querySelector('[foo=bar]')!.textContent,
+          'Matched!');
+      expect(
+          testFixture.rootElement.querySelector('[foo="bar baz"]')!.textContent,
+          'Matched!');
+      expect(
+          testFixture.rootElement
+              .querySelector('[foo="baz bar qux"]')!
+              .textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=barbaz]')!.textContent,
+          isEmpty);
     });
 
     test('should support prefix attribute selector', () async {
       final testBed = NgTestBed<PrefixAttributeSelectorTestComponent>(
           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(testFixture.rootElement.querySelector('[foo=bar]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=barbaz]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=bazbar]')!.textContent,
+          isEmpty);
     });
 
     test('should support set attribute selector', () async {
       final testBed = NgTestBed<SetAttributeSelectorTestComponent>(
           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(
+          testFixture.rootElement.querySelector('div')!.textContent, isEmpty);
+      expect(testFixture.rootElement.querySelector('[foo]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=""]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo="bar"]')!.textContent,
+          'Matched!');
     });
 
     test('should support substring attribute selector', () async {
       final testBed = NgTestBed<SubstringAttributeSelectorTestComponent>(
           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(testFixture.rootElement.querySelector('[foo=bar]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=barbaz]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=bazbar]')!.textContent,
+          'Matched!');
     });
 
     test('should support suffix attribute selector', () async {
       final testBed = NgTestBed<SuffixAttributeSelectorTestComponent>(
           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(testFixture.rootElement.querySelector('[foo=bar]')!.textContent,
+          'Matched!');
+      expect(testFixture.rootElement.querySelector('[foo=barbaz]')!.textContent,
+          isEmpty);
+      expect(testFixture.rootElement.querySelector('[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..0f0f06a00a 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;
 
@@ -114,7 +113,7 @@ class InvokeTearOff {
 
   @Input()
   set invoke(String Function() value) {
-    _host.text = value();
+    _host.textContent = value();
   }
 }
 
diff --git a/_tests/test/core/linker/integration/binding_integration_test.dart b/_tests/test/core/linker/integration/binding_integration_test.dart
index a882af18c4..469d7b0467 100644
--- a/_tests/test/core/linker/integration/binding_integration_test.dart
+++ b/_tests/test/core/linker/integration/binding_integration_test.dart
@@ -1,6 +1,9 @@
+import 'dart:js_interop';
+
 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;
 
@@ -40,9 +43,9 @@ void main() {
         ng.createBoundAriaAttributeComponentFactory());
     final testFixture = await testBed.create();
     final div = testFixture.rootElement.querySelector('div')!;
-    expect(div.attributes, containsPair('aria-label', 'Initial label'));
+    expect(div.getAttribute('aria-label'), equals('Initial label'));
     await testFixture.update((component) => component.label = 'New label');
-    expect(div.attributes, containsPair('aria-label', 'New label'));
+    expect(div.getAttribute('aria-label'), equals('New label'));
   });
 
   test('should remove attribute when bound expression is null', () async {
@@ -50,16 +53,16 @@ void main() {
         ng.createBoundAttributeComponentFactory());
     final testFixture = await testBed.create();
     final div = testFixture.rootElement.querySelector('div')!;
-    expect(div.attributes, containsPair('foo', 'Initial value'));
+    expect(div.getAttribute('foo'), equals('Initial value'));
     await testFixture.update((component) => component.value = null);
-    expect(div.attributes, isNot(contains('foo')));
+    expect(div.getAttribute('foo'), isNull);
   });
 
   test('should remove style when bound expression is null', () async {
     final testBed =
         NgTestBed<BoundStyleComponent>(ng.createBoundStyleComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.querySelector('div')!;
+    final div = testFixture.rootElement.querySelector('div') as HTMLDivElement;
     expect(div.style.height, '10px');
     await testFixture.update((component) => component.height = null);
     expect(div.style.height, '');
@@ -69,7 +72,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 HTMLDivElement;
     expect(div.tabIndex, 0);
     await testFixture.update((component) => component.index = 5);
     expect(div.tabIndex, 5);
@@ -79,7 +82,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 HTMLDivElement;
     expect(div.tabIndex, 1);
     await testFixture.update((component) => component.index = 0);
     expect(div.tabIndex, 0);
@@ -89,21 +92,21 @@ 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 as JSString).toDart, 'Initial <span>HTML</span>');
     await testFixture
         .update((component) => component.html = 'New <div>HTML</div>');
-    expect(div.innerHtml, 'New <div>HTML</div>');
+    expect((div.innerHTML as JSString).toDart, 'New <div>HTML</div>');
   });
 
   test('should consume className binding using class alias', () async {
     final testBed =
         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')));
+    final div = testFixture.rootElement.querySelector('div') as HTMLDivElement;
+    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..3b22f5264e 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;
 
@@ -203,8 +203,8 @@ class UnboundDirectiveInputComponent {}
   selector: '[no-duplicate]',
 )
 class DuplicateDir {
-  DuplicateDir(HtmlElement element) {
-    element.text = '${element.text}noduplicate';
+  DuplicateDir(HTMLElement element) {
+    element.textContent = '${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..299a552952 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,15 +19,15 @@ void main() {
     final testBed = NgTestBed<HostAttributeFromDirectiveComponent>(
         ng.createHostAttributeFromDirectiveComponentFactory());
     final testFixture = await testBed.create();
-    final div = testFixture.rootElement.children.first;
-    expect(div.attributes, containsPair('role', 'button'));
+    final div = testFixture.rootElement.children.item(0) as HTMLDivElement;
+    expect(div.getAttribute('role'), equals('button'));
   });
 
   test('should support updating host element via host properties', () async {
     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 HTMLDivElement;
     expect(div.id, 'one');
     await testFixture.update((component) => component.directive!.id = 'two');
     expect(div.id, 'two');
@@ -149,9 +150,8 @@ class DynamicViewport {
   DynamicViewport(ViewContainerRef vc) {
     final myService = MyService()..greeting = 'dynamic greet';
     final injector = Injector.map({MyService: myService}, vc.injector);
-    final factoryFuture = Future.value(
-      ng.createChildCompUsingServiceFactory(),
-    );
+    final factoryFuture =
+        Future<ComponentFactory>.value(ng.createChildCompUsingServiceFactory());
     done = factoryFuture.then((componentFactory) =>
         vc.createComponent<Object>(componentFactory, 0, injector));
   }
diff --git a/_tests/test/core/linker/integration/ng_container_test.dart b/_tests/test/core/linker/integration/ng_container_test.dart
index 403a836a16..5b9193aa3b 100644
--- a/_tests/test/core/linker/integration/ng_container_test.dart
+++ b/_tests/test/core/linker/integration/ng_container_test.dart
@@ -1,3 +1,4 @@
+import 'package:_tests/matchers.dart';
 import 'package:ngdart/angular.dart';
 import 'package:ngtest/angular_test.dart';
 import 'package:test/test.dart';
@@ -18,25 +19,25 @@ void main() {
     final testBed =
         NgTestBed<RendersChildren>(ng.createRendersChildrenFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml, html);
+    expect(testFixture.rootElement, hasInnerHtml(html));
   });
 
   test('supports *ngFor', () async {
     final testBed = NgTestBed<SupportsNgFor>(ng.createSupportsNgForFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml, anchorHtml);
+    expect(testFixture.rootElement, hasInnerHtml(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, hasInnerHtml('$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, hasInnerHtml(anchorHtml));
     await testFixture.update((component) => component.visible = true);
-    expect(testFixture.rootElement.innerHtml, '$anchorHtml$html');
+    expect(testFixture.rootElement, hasInnerHtml('$anchorHtml$html'));
   });
 
   test('supports *ngTemplateOutlet', () async {
@@ -44,54 +45,59 @@ void main() {
         ng.createSupportsNgTemplateOutletFactory());
     final testFixture = await testBed.create();
     expect(
-        testFixture.rootElement.innerHtml,
-        '$anchorHtml ' // <template #ref> anchor
-        '$anchorHtml' // <template> and ViewContainerRef anchor for *-directive
-        '${testFixture.assertOnlyInstance.context['message']}');
+        testFixture.rootElement,
+        hasInnerHtml('$anchorHtml ' // <template #ref> anchor
+            '$anchorHtml' // <template> and ViewContainerRef anchor for *-directive
+            '${testFixture.assertOnlyInstance.context['message']}'));
   });
 
   test('supports nested *-syntax', () async {
     final testBed =
         NgTestBed<SupportsNesting>(ng.createSupportsNestingFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml, anchorHtml);
+    expect(testFixture.rootElement, hasInnerHtml(anchorHtml));
     await testFixture.update((component) => component.integers = [1, 2, 3]);
     expect(
-        testFixture.rootElement.innerHtml,
+      testFixture.rootElement,
+      hasInnerHtml(
         '$anchorHtml' // NgFor
         '$anchorHtml' // NgIf true
         '<li>1</li>'
         '$anchorHtml' // NgIf true
         '<li>2</li>'
         '$anchorHtml' // NgIf true
-        '<li>3</li>');
+        '<li>3</li>',
+      ),
+    );
     await testFixture.update((component) => component.filterOdd = true);
     expect(
-        testFixture.rootElement.innerHtml,
+      testFixture.rootElement,
+      hasInnerHtml(
         '$anchorHtml' // NgFor
         '$anchorHtml' // NgIf false
         '$anchorHtml' // NgIf true
         '<li>2</li>'
-        '$anchorHtml' // NgIf false
-        );
+        '$anchorHtml', // NgIf false
+      ),
+    );
   });
 
   test('can be projected', () async {
     final testBed = NgTestBed<CanBeProjected>(ng.createCanBeProjectedFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml,
-        '<content-host>$anchorHtml$html</content-host>');
+    expect(testFixture.rootElement,
+        hasInnerHtml('<content-host>$anchorHtml$html</content-host>'));
     await testFixture.update((component) => component.visible = false);
-    expect(testFixture.rootElement.innerHtml,
-        '<content-host>$anchorHtml</content-host>');
+    expect(testFixture.rootElement,
+        hasInnerHtml('<content-host>$anchorHtml</content-host>'));
   });
 
   test('can host projected content', () async {
     final testBed = NgTestBed<CanHostProjectedContent>(
         ng.createCanHostProjectedContentFactory());
     final testFixture = await testBed.create();
-    expect(testFixture.rootElement.innerHtml,
-        '<contained-content-host>$html</contained-content-host>');
+    expect(testFixture.rootElement,
+        hasInnerHtml('<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..16bfeb9987 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(0)!.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..3b50b7c62a 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,7 +48,7 @@ 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')));
     expect(listener!.eventTypes, ['click']);
@@ -58,9 +58,12 @@ 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 clickPrevent = MouseEvent('click');
+    final inputPrevent =
+        testFixture.rootElement.children.item(0) as HTMLInputElement;
+    final inputNoPrevent =
+        testFixture.rootElement.children.item(1) as HTMLInputElement;
+    // `true` by default in the `dart:html` Event contructor
+    final clickPrevent = MouseEvent('click', MouseEventInit(cancelable: true));
     final clickNoPrevent = MouseEvent('click');
     inputPrevent.dispatchEvent(clickPrevent);
     inputNoPrevent.dispatchEvent(clickNoPrevent);
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..a22d15d94a 100644
--- a/_tests/test/core/linker/integration/template_test.dart
+++ b/_tests/test/core/linker/integration/template_test.dart
@@ -1,8 +1,9 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 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;
 
@@ -14,16 +15,16 @@ void main() {
         ng.createTemplateDirectiveComponentFactory());
     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.length, equals(3));
+    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(someViewport.container, hasLength(2));
@@ -38,7 +39,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(0).isA<Comment>(), isTrue);
   });
 
   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..d4c53ba519 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,21 +19,21 @@ 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(
       (i) => Injector.map({
-        ANCHOR_ELEMENT: template,
+        anchorElement: template,
       }, i),
     );
     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,9 @@ 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) as HTMLElement;
+      expect(directiveElement.getAttribute('my-attr'), equals('bar'));
     });
 
     test('should support @Output', () async {
@@ -105,7 +108,8 @@ void main() {
       final testFixture = await testBed.create();
       final directive = testFixture.assertOnlyInstance.directive!;
       expect(directive.target, isNull);
-      final directiveElement = testFixture.rootElement.children.first;
+      final directiveElement =
+          testFixture.rootElement.children.item(0) as EventTarget;
       directiveElement.dispatchEvent(MouseEvent('click'));
       await testFixture.update();
       expect(directive.target, directiveElement);
@@ -118,16 +122,16 @@ void main() {
     );
     final testFixture = await testBed.create();
     final svg = testFixture.rootElement.querySelector('svg')!;
-    expect(svg.namespaceUri, 'http://www.w3.org/2000/svg');
+    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,7 +168,7 @@ class SimpleImperativeViewComponent {
   }
 }
 
-const ANCHOR_ELEMENT = OpaqueToken('AnchorElement');
+const anchorElement = OpaqueToken('AnchorElement');
 
 @Directive(
   selector: '[someImpvp]',
@@ -173,10 +177,10 @@ class SomeImperativeViewport {
   ViewContainerRef vc;
   TemplateRef templateRef;
   EmbeddedViewRef? view;
-  TemplateElement anchor;
+  HTMLTemplateElement anchor;
 
   SomeImperativeViewport(
-      this.vc, this.templateRef, @Inject(ANCHOR_ELEMENT) this.anchor);
+      this.vc, this.templateRef, @Inject(anchorElement) this.anchor);
 
   @Input()
   set someImpvp(bool value) {
diff --git a/_tests/test/core/linker/query_integration_test.dart b/_tests/test/core/linker/query_integration_test.dart
index d9c3681139..003e308f11 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');
     });
   });
 }
@@ -839,7 +838,7 @@ class LabeledElementViewChildrenComponent {
   List<String> list = <String>['3', '1', '4'];
 
   @ViewChildren('divLabel')
-  List<HtmlElement>? elementRefs;
+  List<HTMLElement>? elementRefs;
 }
 
 @Component(
@@ -854,5 +853,5 @@ class TestSingleDynamicResult {
   var showEmbeddedViews = false;
 
   @ViewChild('label')
-  HtmlElement? div;
+  HTMLElement? div;
 }
diff --git a/_tests/test/core/linker/security_integration_test.dart b/_tests/test/core/linker/security_integration_test.dart
index 7af9b66df6..503f44b503 100644
--- a/_tests/test/core/linker/security_integration_test.dart
+++ b/_tests/test/core/linker/security_integration_test.dart
@@ -1,11 +1,12 @@
 @TestOn('browser')
+library;
 
-import 'dart:html';
-
+import 'package:_tests/matchers.dart';
 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 +18,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 +30,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,39 +44,36 @@ 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, hasInnerHtml('some <p>text</p>'));
     await testFixture.update((component) {
       var c = component;
       c.html = 'ha <script>evil()</script>';
     });
-    expect(div?.innerHtml, 'ha ');
+    expect(div, hasInnerHtml('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, hasInnerHtml('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,
-      'also <iframe> content</iframe>',
-    );
+    expect(div, hasInnerHtml('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..8d97494788 100644
--- a/_tests/test/core/linker/style_encapsulation_test.dart
+++ b/_tests/test/core/linker/style_encapsulation_test.dart
@@ -1,21 +1,30 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 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());
+    JSArray.from<HTMLElement>(document.head!.querySelectorAll('style'))
+        .toDart
+        .forEach((style) {
+      style.remove();
+    });
+
     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 styleText = JSArray.from<HTMLStyleElement>(lastStyles)
+        .toDart
+        .map((e) => e.textContent)
+        .join('\n');
+    return 'HTML:\n\n${(target.outerHTML as JSString).toDart}\nCSS:\n\n$styleText';
   }
 
   test('should encapsulate usages of [class]=', () async {
@@ -24,7 +33,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),
     );
@@ -36,7 +45,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 +57,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..ba1676834f 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 {
+  test('should support @ViewChild with HTMLElement', () async {
     final fixture =
-        await NgTestBed<UsesHtmlElement>(ng.createUsesHtmlElementFactory())
+        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())
+  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']);
   });
 }
 
@@ -50,9 +51,9 @@ class UsesElement {
   selector: 'uses-element',
   template: '<div #div>2</div>',
 )
-class UsesHtmlElement {
+class UsesHTMLElement {
   @ViewChild('div')
-  HtmlElement? element;
+  HTMLElement? element;
 }
 
 @Component(
@@ -68,7 +69,7 @@ class UsesListOfElement {
   selector: 'uses-list-of-element',
   template: '<div #div>1</div><div #div>2</div>',
 )
-class UsesListOfHtmlElement {
+class UsesListOfHTMLElement {
   @ViewChildren('div')
-  List<HtmlElement>? elements;
+  List<HTMLElement>? elements;
 }
diff --git a/_tests/test/core/styling/clear_component_styles_test.dart b/_tests/test/core/styling/clear_component_styles_test.dart
index 7eb4a4ab02..e5114a1d71 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,8 @@ 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!).getPropertyValue('font-style'), fontStyle);
   return testFixture.dispose();
 }
 
diff --git a/_tests/test/core/styling/order_test.dart b/_tests/test/core/styling/order_test.dart
index 6390ff024a..8e4d1c4a95 100644
--- a/_tests/test/core/styling/order_test.dart
+++ b/_tests/test/core/styling/order_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 'order_test.template.dart' as ng;
 
@@ -29,7 +30,7 @@ void main() {
       );
       // Styles from Child are applied because they load second.
       final secondChild = testFixture.rootElement.querySelector('.test')!;
-      expect(secondChild.getComputedStyle().margin, '16px');
+      expect(window.getComputedStyle(secondChild).margin, '16px');
     });
 
     test('from Parent win when Child is created before Parent', () async {
@@ -43,7 +44,7 @@ void main() {
       );
       // Styles from Parent are applied because they load second.
       final secondChild = testFixture.rootElement.querySelector('.test')!;
-      expect(secondChild.getComputedStyle().margin, '8px');
+      expect(window.getComputedStyle(secondChild).margin, '8px');
     });
   });
 }
diff --git a/_tests/test/core/styling/shim_test.dart b/_tests/test/core/styling/shim_test.dart
index 535b356f90..663046f18a 100644
--- a/_tests/test/core/styling/shim_test.dart
+++ b/_tests/test/core/styling/shim_test.dart
@@ -1,10 +1,7 @@
-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;
 
@@ -278,13 +275,13 @@ class ChildComponent {}
 class SvgComponentTest {}
 
 void expectColor(Element element, String color) {
-  var elementColor = element.getComputedStyle().color;
+  var elementColor = window.getComputedStyle(element).color;
   elementColor = colorToHex(elementColor);
   expect(elementColor, color);
 }
 
 void expectBackgroundColor(Element element, String color) {
-  var elementColor = element.getComputedStyle().backgroundColor;
+  var elementColor = window.getComputedStyle(element).backgroundColor;
   elementColor = colorToHex(elementColor);
   expect(elementColor, color);
 }
diff --git a/_tests/test/core/view/projection_integration_test.dart b/_tests/test/core/view/projection_integration_test.dart
index 965f5a95c9..362cda0703 100644
--- a/_tests/test/core/view/projection_integration_test.dart
+++ b/_tests/test/core/view/projection_integration_test.dart
@@ -1,8 +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_integration_test.template.dart' as ng;
 
@@ -53,11 +53,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,18 +198,19 @@ void main() {
           NgTestBed<SwitchOrderTest>(ng.createSwitchOrderTestFactory());
       var fixture = await testBed.create();
       expect(
-          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>');
+          fixture.rootElement,
+          hasInnerHtml('<cmp-a><cmp-b><cmp-d><d>cmp-d</d></cmp-d></cmp-b>'
+              '<cmp-c><c>cmp-c</c></cmp-c></cmp-a>'));
     });
     test('should create nested components in the right order', () async {
       var testBed =
           NgTestBed<CorrectOrderTest>(ng.createCorrectOrderTestFactory());
       var fixture = await testBed.create();
       expect(
-          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>');
+          fixture.rootElement,
+          hasInnerHtml(
+              '<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>'));
     });
     test('should project filled view containers into a view container',
         () async {
diff --git a/_tests/test/core/view/projection_test.dart b/_tests/test/core/view/projection_test.dart
index a4cd7430fa..cf44c7e967 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,12 +73,12 @@ void main() {
           ng.createContainerWithStyleNotEmulatedFactory());
       var testFixture = await testBed.create();
       var mainEl = testFixture.rootElement;
-      var div1 = mainEl.children.first;
+      var div1 = mainEl.children.item(0)!;
       var div2 = document.createElement('div');
       div2.className = 'redStyle';
       mainEl.append(div2);
-      expect(div1.getComputedStyle().color, 'rgb(255, 0, 0)');
-      expect(div2.getComputedStyle().color, 'rgb(255, 0, 0)');
+      expect(window.getComputedStyle(div1).color, 'rgb(255, 0, 0)');
+      expect(window.getComputedStyle(div2).color, 'rgb(255, 0, 0)');
     });
 
     test('should support emulated style encapsulation', () async {
@@ -87,12 +86,12 @@ void main() {
           ng.createContainerWithStyleEmulatedFactory());
       var testFixture = await testBed.create();
       var mainEl = testFixture.rootElement;
-      var div1 = mainEl.children.first;
+      var div1 = mainEl.children.item(0)!;
       var div2 = document.createElement('div');
       div2.className = 'blueStyle';
       mainEl.append(div2);
-      expect(div1.getComputedStyle().color, 'rgb(0, 0, 255)');
-      expect(div2.getComputedStyle().color, 'rgb(0, 0, 0)');
+      expect(window.getComputedStyle(div1).color, 'rgb(0, 0, 255)');
+      expect(window.getComputedStyle(div2).color, 'rgb(0, 0, 0)');
     });
 
     test('should project ng-content using select query', () async {
@@ -106,72 +105,144 @@ void main() {
       final testBed = NgTestBed<SelectExactAttributeTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.rejected')!
+              .textContent!
+              .trim(),
+          "Shouldn't be selected.");
     });
 
     test('should support hypen attribute selector', () async {
       final testBed = NgTestBed<SelectHyphenAttributeTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.rejected')!
+              .textContent!
+              .trim(),
+          "Shouldn't be selected.");
     });
 
     test('should support list attribute selector', () async {
       final testBed = NgTestBed<SelectListAttributeTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.rejected')!
+              .textContent!
+              .trim(),
+          "Shouldn't be selected.");
     });
 
     test('should support prefix attribute selector', () async {
       final testBed = NgTestBed<SelectPrefixAttributeTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.rejected')!
+              .textContent!
+              .trim(),
+          "Shouldn't be selected.");
     });
 
     test('should support set attribute selector', () async {
       final testBed = NgTestBed<SelectSetAttributeTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.rejected')!
+              .textContent!
+              .trim(),
+          "Shouldn't be selected.");
     });
 
     test('should support substring attribute selector', () async {
       final testBed = NgTestBed<SelectSubstringAttributeTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.rejected')!
+              .textContent!
+              .trim(),
+          "Shouldn't be selected.");
     });
 
     test('should support suffix attribute selector', () async {
       final testBed = NgTestBed<SelectSuffixAttributeTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.rejected')!
+              .textContent!
+              .trim(),
+          "Shouldn't be selected.");
     });
 
     test('should support multiple levels with ngProjectAs', () async {
       final testBed = NgTestBed<NgProjectAsTestComponent>(
           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(
+          testFixture.rootElement
+              .querySelector('.selected')!
+              .textContent!
+              .trim(),
+          'Should be selected.');
+      expect(
+          testFixture.rootElement
+              .querySelector('.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..74da338a8c 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';
 
 import 'inspector_test.template.dart' as ng;
 
@@ -263,7 +262,7 @@ void main() {
     });
 
     group('external content root', () {
-      late html.Element container;
+      late 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 = 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 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 = 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);
+Element createContentRoot({Element? parent}) {
+  final root = HTMLDivElement();
+  (parent ?? 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(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..823cc2d145 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'],
       );
@@ -134,7 +133,7 @@ abstract class TestNgForBase {
   @Input()
   List<int>? items;
 
-  List<HtmlElement>? get children;
+  List<HTMLElement>? get children;
 }
 
 @Component(
@@ -156,7 +155,7 @@ class TestNgForReorderContentChildren extends TestNgForBase {
   ContentProjectedChild? child;
 
   @override
-  List<HtmlElement>? get children => child!.children;
+  List<HTMLElement>? get children => child!.children;
 }
 
 @Component(
@@ -181,7 +180,7 @@ class TestNestedNgForReorderContentChildren extends TestNgForBase {
   ContentProjectedChild? child;
 
   @override
-  List<HtmlElement>? get children => child!.children;
+  List<HTMLElement>? get children => child!.children;
 }
 
 @Component(
@@ -207,7 +206,7 @@ class TestReferencedNgForReorderContentChildren extends TestNgForBase {
   ContentProjectedChild? child;
 
   @override
-  List<HtmlElement>? get children => child!.children;
+  List<HTMLElement>? get children => child!.children;
 }
 
 @Component(
@@ -216,7 +215,7 @@ class TestReferencedNgForReorderContentChildren extends TestNgForBase {
 )
 class ContentProjectedChild {
   @ContentChildren('listItem')
-  List<HtmlElement>? children;
+  List<HTMLElement>? children;
 }
 
 @Component(
@@ -233,7 +232,7 @@ class ContentProjectedChild {
 class TestNgForReorderViewChildren extends TestNgForBase {
   @ViewChildren('listItem')
   @override
-  List<HtmlElement>? children;
+  List<HTMLElement>? children;
 }
 
 @Component(
@@ -253,7 +252,7 @@ class TestNgForReorderViewChildren extends TestNgForBase {
 class TestNestedNgForReorderViewChildren extends TestNgForBase {
   @ViewChildren('listItem')
   @override
-  List<HtmlElement>? children;
+  List<HTMLElement>? children;
 }
 
 @Component(
@@ -273,5 +272,5 @@ class TestNestedNgForReorderViewChildren extends TestNgForBase {
 class TestReferencedNgForReorderViewChildren extends TestNgForBase {
   @ViewChildren('listItem')
   @override
-  List<HtmlElement>? children;
+  List<HTMLElement>? children;
 }
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..4ddcb599eb 100644
--- a/_tests/test/platform/dom/events/key_events_test.dart
+++ b/_tests/test/platform/dom/events/key_events_test.dart
@@ -1,9 +1,10 @@
-import 'dart:html';
-import 'dart:js';
+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;
 
@@ -172,9 +173,9 @@ class ModifiersListener {
   bool receivedModifiers = false;
 }
 
-const CREATE_KEYBOARD_EVENT_NAME = '__dart_createKeyboardEvent';
-const CREATE_KEYBOARD_EVENT_SCRIPT = '''
-window['$CREATE_KEYBOARD_EVENT_NAME'] = function(
+const createKeyboardEventName = '__dart_createKeyboardEvent';
+const createkeyboardEventScript = '''
+window['$createKeyboardEventName'] = function(
     type, keyCode, ctrlKey, altKey, shiftKey, metaKey) {
   var event = document.createEvent('KeyboardEvent');
 
@@ -205,18 +206,18 @@ Event createKeyboardEvent(
   bool shiftKey = false,
   bool metaKey = false,
 }) {
-  if (!context.hasProperty(CREATE_KEYBOARD_EVENT_NAME)) {
+  if (!globalContext.has(createKeyboardEventName)) {
     var script = document.createElement('script')
       ..setAttribute('type', 'text/javascript')
-      ..text = CREATE_KEYBOARD_EVENT_SCRIPT;
+      ..textContent = createkeyboardEventScript;
     document.body!.append(script);
   }
-  return context.callMethod(CREATE_KEYBOARD_EVENT_NAME, [
-    type,
-    keyCode,
-    ctrlKey,
-    altKey,
-    shiftKey,
-    metaKey,
+  return globalContext.callMethodVarArgs(createKeyboardEventName.toJS, [
+    type.toJS,
+    keyCode.toJS,
+    ctrlKey.toJS,
+    altKey.toJS,
+    shiftKey.toJS,
+    metaKey.toJS,
   ]) as Event;
 }
diff --git a/_tests/test/security/dom_sanitization_service_test.dart b/_tests/test/security/dom_sanitization_service_test.dart
index 2aa0e29e8a..18f35f118c 100644
--- a/_tests/test/security/dom_sanitization_service_test.dart
+++ b/_tests/test/security/dom_sanitization_service_test.dart
@@ -1,4 +1,5 @@
 @TestOn('browser')
+library;
 
 import 'package:ngdart/src/security/dom_sanitization_service.dart';
 import 'package:test/test.dart';
diff --git a/_tests/test/security/html_sanitizer_test.dart b/_tests/test/security/html_sanitizer_test.dart
index 19d32efcbe..56d6b83c31 100644
--- a/_tests/test/security/html_sanitizer_test.dart
+++ b/_tests/test/security/html_sanitizer_test.dart
@@ -1,4 +1,5 @@
 @TestOn('browser')
+library;
 
 import 'package:ngdart/src/security/html_sanitizer.dart';
 import 'package:test/test.dart';
diff --git a/_tests/test/security/safe_inner_html_test.dart b/_tests/test/security/safe_inner_html_test.dart
index b643a33df1..1a6e479815 100644
--- a/_tests/test/security/safe_inner_html_test.dart
+++ b/_tests/test/security/safe_inner_html_test.dart
@@ -1,4 +1,5 @@
 @TestOn('browser')
+library;
 
 import 'package:ngdart/angular.dart';
 import 'package:ngdart/security.dart';
@@ -45,9 +46,7 @@ void main() {
       final testBed =
           NgTestBed(ng.createInterpolatedTrustedInnerHtmlTestFactory());
       final testRoot = await testBed.create();
-      print(testRoot.rootElement.innerHtml);
       await testRoot.update();
-      print(testRoot.rootElement.innerHtml);
       expect(testRoot.text, contains('(Unsafe)'));
     },
         skip:
diff --git a/_tests/test/security/style_sanitizer_test.dart b/_tests/test/security/style_sanitizer_test.dart
index 99af5e8e62..797fdd8eec 100644
--- a/_tests/test/security/style_sanitizer_test.dart
+++ b/_tests/test/security/style_sanitizer_test.dart
@@ -1,4 +1,5 @@
 @TestOn('browser')
+library;
 
 import 'package:ngdart/src/security/style_sanitizer.dart';
 import 'package:test/test.dart';
diff --git a/_tests/test/security/url_sanitizer_test.dart b/_tests/test/security/url_sanitizer_test.dart
index 50d6bc6bb4..08c7a256de 100644
--- a/_tests/test/security/url_sanitizer_test.dart
+++ b/_tests/test/security/url_sanitizer_test.dart
@@ -1,4 +1,5 @@
 @TestOn('browser')
+library;
 
 import 'package:ngdart/src/security/url_sanitizer.dart';
 import 'package:test/test.dart';
diff --git a/_tests/test/templates/additional_expression_lib.dart b/_tests/test/templates/additional_expression_lib.dart
index 10e01d227a..022f6864f2 100644
--- a/_tests/test/templates/additional_expression_lib.dart
+++ b/_tests/test/templates/additional_expression_lib.dart
@@ -1,6 +1,3 @@
-/// A support library imported by `additional_expression_test.dart`.
-library additional_expression_lib;
-
 /// A class with static members to be referenced by a template.
 class ExternalStaticClass {
   static String? nullString;
diff --git a/_tests/test/templates/additional_expression_test.dart b/_tests/test/templates/additional_expression_test.dart
index df2cffcb18..8e516d9778 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 HTMLButtonElement)
+            .click(),
       );
 
       expect(fixture.assertOnlyInstance.a, isNotNull);
@@ -49,9 +52,10 @@ void main() {
       expect(fixture.assertOnlyInstance.a, isNull);
       expect(fixture.assertOnlyInstance.b, isNull);
 
-      await fixture.update(
-        (_) => fixture.rootElement.querySelectorAll('button')[1].click(),
-      );
+      await fixture.update((_) => (fixture.rootElement
+              .querySelectorAll('button')
+              .item(1) as HTMLButtonElement)
+          .click());
 
       expect(fixture.assertOnlyInstance.a, isNotNull);
       expect(fixture.assertOnlyInstance.a, fixture.assertOnlyInstance.b);
@@ -62,7 +66,9 @@ void main() {
       expect(fixture.assertOnlyInstance.b, isNull);
 
       await fixture.update(
-        (_) => fixture.rootElement.querySelectorAll('button')[2].click(),
+        (_) => (fixture.rootElement.querySelectorAll('button').item(2)
+                as HTMLButtonElement)
+            .click(),
       );
 
       expect(fixture.assertOnlyInstance.a, isNotNull);
diff --git a/examples/hello_world/_mono_pkg.yaml b/examples/hello_world/_mono_pkg.yaml
index dbc900317e..46f8c8f407 100644
--- a/examples/hello_world/_mono_pkg.yaml
+++ b/examples/hello_world/_mono_pkg.yaml
@@ -7,4 +7,4 @@ stages:
       - format
       - analyze
   - build:
-      - command: dart run build_runner build --fail-on-severe
+      - command: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
diff --git a/ngast/mono_pkg.yaml b/ngast/mono_pkg.yaml
index cbc0001650..86adafbf5a 100644
--- a/ngast/mono_pkg.yaml
+++ b/ngast/mono_pkg.yaml
@@ -1,7 +1,7 @@
 sdk:
   - pubspec
-  - dev
   - stable
+  # - dev
 
 stages:
   - analyze:
diff --git a/ngcompiler/lib/v1/src/angular_compiler/outliner.dart b/ngcompiler/lib/v1/src/angular_compiler/outliner.dart
index 0df986d0c5..7c800ed8ec 100644
--- a/ngcompiler/lib/v1/src/angular_compiler/outliner.dart
+++ b/ngcompiler/lib/v1/src/angular_compiler/outliner.dart
@@ -6,12 +6,12 @@ import 'analyzer.dart';
 import 'outliner/collect_type_parameters.dart';
 
 const _angularImports = '''
-import 'dart:html' as _html;
 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;
 import 'package:ngdart/src/core/linker/views/render_view.dart' as _ng;
 import 'package:ngdart/src/core/linker/views/view.dart' as _ng;
+import 'package:web/web.dart' as _html;
 ''';
 
 const _analyzerIgnores =
diff --git a/ngcompiler/lib/v1/src/compiler/compile_metadata.dart b/ngcompiler/lib/v1/src/compiler/compile_metadata.dart
index 7162d46f23..364ec5a8c2 100644
--- a/ngcompiler/lib/v1/src/compiler/compile_metadata.dart
+++ b/ngcompiler/lib/v1/src/compiler/compile_metadata.dart
@@ -388,7 +388,7 @@ class CompileQueryMetadata {
   /// Name of class member on the component to update with query result.
   final String? propertyName;
 
-  /// Whether this is typed `dart:html`'s `Element` (or a sub-type).
+  /// Whether this is typed `package:web/web.dart`'s `Element` (or a sub-type).
   final bool isElementType;
 
   /// Optional type to read for given match.
diff --git a/ngcompiler/lib/v1/src/compiler/identifiers.dart b/ngcompiler/lib/v1/src/compiler/identifiers.dart
index c8fc9152fa..09b24cdca6 100644
--- a/ngcompiler/lib/v1/src/compiler/identifiers.dart
+++ b/ngcompiler/lib/v1/src/compiler/identifiers.dart
@@ -29,6 +29,24 @@ class DevTools {
   );
 }
 
+class JsInterop {
+  const JsInterop._();
+
+  static final functionToJSExportedDartFunction = CompileIdentifierMetadata(
+    name: 'FunctionToJSExportedDartFunction',
+    moduleUrl: 'dart:js_interop',
+  );
+
+  static final jsObject = CompileIdentifierMetadata(
+    name: 'JSObject',
+    moduleUrl: 'dart:_interceptors',
+  );
+
+  static final jsObjectToken = CompileTokenMetadata(
+    identifier: jsObject,
+  );
+}
+
 /// A collection of methods for manipulating the DOM from generated code.
 class DomHelpers {
   const DomHelpers._();
@@ -274,69 +292,72 @@ class Identifiers {
       CompileIdentifierMetadata(name: 'NgFor', moduleUrl: _ngForUrl);
 
   // Runtime is initialized by output interpreter. Compiler executes in VM and
-  // can't import dart:html to initialize here.
-  static var commentNode =
-      CompileIdentifierMetadata(name: 'Comment', moduleUrl: 'dart:html');
-  static var textNode =
-      CompileIdentifierMetadata(name: 'Text', moduleUrl: 'dart:html');
-  static var document =
-      CompileIdentifierMetadata(name: 'document', moduleUrl: 'dart:html');
+  // can't import `package:web/web.dart` to initialize here.
+  static var event = CompileIdentifierMetadata(
+      name: 'Event', moduleUrl: 'asset:web/lib/src/dom/dom.dart');
+  static var commentNode = CompileIdentifierMetadata(
+      name: 'Comment', moduleUrl: 'asset:web/lib/src/dom/dom.dart');
+  static var textNode = CompileIdentifierMetadata(
+      name: 'Text', moduleUrl: 'asset:web/lib/src/dom/dom.dart');
+  static var document = CompileIdentifierMetadata(
+      name: 'document', moduleUrl: 'asset:web/lib/src/dom/dom.dart');
   static final documentFragment = CompileIdentifierMetadata(
-      name: 'DocumentFragment', moduleUrl: 'dart:html');
-  static final element =
-      CompileIdentifierMetadata(name: 'Element', moduleUrl: 'dart:html');
+      name: 'DocumentFragment', moduleUrl: 'asset:web/lib/src/dom/dom.dart');
+  static final element = CompileIdentifierMetadata(
+      name: 'Element', moduleUrl: 'asset:web/lib/src/dom/dom.dart');
   static final elementToken = identifierToken(element);
-  static final htmlElement =
-      CompileIdentifierMetadata(name: 'HtmlElement', moduleUrl: 'dart:html');
+  static final htmlElement = CompileIdentifierMetadata(
+      name: 'HTMLElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
   static final htmlElementToken = identifierToken(htmlElement);
-  static final svgSvgElement =
-      CompileIdentifierMetadata(name: 'SvgSvgElement', moduleUrl: 'dart:svg');
-  static final svgElement =
-      CompileIdentifierMetadata(name: 'SvgElement', moduleUrl: 'dart:svg');
-  static final anchorElement =
-      CompileIdentifierMetadata(name: 'AnchorElement', moduleUrl: 'dart:html');
-  static final divElement =
-      CompileIdentifierMetadata(name: 'DivElement', moduleUrl: 'dart:html');
-  static final areaElement =
-      CompileIdentifierMetadata(name: 'AreaElement', moduleUrl: 'dart:html');
-  static final audioElement =
-      CompileIdentifierMetadata(name: 'AudioElement', moduleUrl: 'dart:html');
-  static final buttonElement =
-      CompileIdentifierMetadata(name: 'ButtonElement', moduleUrl: 'dart:html');
-  static final canvasElement =
-      CompileIdentifierMetadata(name: 'CanvasElement', moduleUrl: 'dart:html');
-  static final formElement =
-      CompileIdentifierMetadata(name: 'FormElement', moduleUrl: 'dart:html');
-  static final iframeElement =
-      CompileIdentifierMetadata(name: 'IFrameElement', moduleUrl: 'dart:html');
-  static final imageElement =
-      CompileIdentifierMetadata(name: 'ImageElement', moduleUrl: 'dart:html');
-  static final inputElement =
-      CompileIdentifierMetadata(name: 'InputElement', moduleUrl: 'dart:html');
+  static final svgSvgElement = CompileIdentifierMetadata(
+      name: 'SVGSVGElement', moduleUrl: 'asset:web/lib/src/dom/svg.dart');
+  static final svgElement = CompileIdentifierMetadata(
+      name: 'SVGElement', moduleUrl: 'asset:web/lib/src/dom/svg.dart');
+  static final anchorElement = CompileIdentifierMetadata(
+      name: 'HTMLAnchorElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final divElement = CompileIdentifierMetadata(
+      name: 'HTMLDivElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final areaElement = CompileIdentifierMetadata(
+      name: 'HTMLAreaElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final audioElement = CompileIdentifierMetadata(
+      name: 'HTMLAudioElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final buttonElement = CompileIdentifierMetadata(
+      name: 'HTMLButtonElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final canvasElement = CompileIdentifierMetadata(
+      name: 'HTMLCanvasElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final formElement = CompileIdentifierMetadata(
+      name: 'HTMLFormElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final iframeElement = CompileIdentifierMetadata(
+      name: 'HTMLIFrameElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final imageElement = CompileIdentifierMetadata(
+      name: 'HTMLImageElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final inputElement = CompileIdentifierMetadata(
+      name: 'HTMLInputElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
   static final textareaElement = CompileIdentifierMetadata(
-      name: 'TextAreaElement', moduleUrl: 'dart:html');
-  static final mediaElement =
-      CompileIdentifierMetadata(name: 'MediaElement', moduleUrl: 'dart:html');
-  static final menuElement =
-      CompileIdentifierMetadata(name: 'MenuElement', moduleUrl: 'dart:html');
-  static final nodeTreeSanitizer = CompileIdentifierMetadata(
-      name: 'NodeTreeSanitizer', moduleUrl: 'dart:html');
-  static final optionElement =
-      CompileIdentifierMetadata(name: 'OptionElement', moduleUrl: 'dart:html');
-  static final oListElement =
-      CompileIdentifierMetadata(name: 'OListElement', moduleUrl: 'dart:html');
-  static final selectElement =
-      CompileIdentifierMetadata(name: 'SelectElement', moduleUrl: 'dart:html');
-  static final tableElement =
-      CompileIdentifierMetadata(name: 'TableElement', moduleUrl: 'dart:html');
+      name: 'HTMLTextAreaElement',
+      moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final mediaElement = CompileIdentifierMetadata(
+      name: 'HTMLMediaElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final menuElement = CompileIdentifierMetadata(
+      name: 'HTMLMenuElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final optionElement = CompileIdentifierMetadata(
+      name: 'HTMLOptionElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final oListElement = CompileIdentifierMetadata(
+      name: 'HTMLOListElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final selectElement = CompileIdentifierMetadata(
+      name: 'HTMLSelectElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final tableElement = CompileIdentifierMetadata(
+      name: 'HTMLTableElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
   static final tableRowElement = CompileIdentifierMetadata(
-      name: 'TableRowElement', moduleUrl: 'dart:html');
+      name: 'HTMLTableRowElement',
+      moduleUrl: 'asset:web/lib/src/dom/html.dart');
   static final tableColElement = CompileIdentifierMetadata(
-      name: 'TableColElement', moduleUrl: 'dart:html');
-  static final uListElement =
-      CompileIdentifierMetadata(name: 'UListElement', moduleUrl: 'dart:html');
-  static final node =
-      CompileIdentifierMetadata(name: 'Node', moduleUrl: 'dart:html');
+      name: 'HTMLTableColElement',
+      moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final uListElement = CompileIdentifierMetadata(
+      name: 'HTMLUListElement', moduleUrl: 'asset:web/lib/src/dom/html.dart');
+  static final node = CompileIdentifierMetadata(
+      name: 'Node', moduleUrl: 'asset:web/lib/src/dom/dom.dart');
 
   /// A class used for message internationalization.
   static final intl = CompileIdentifierMetadata(
diff --git a/ngcompiler/lib/v1/src/compiler/view_compiler/compile_element.dart b/ngcompiler/lib/v1/src/compiler/view_compiler/compile_element.dart
index 10d3057471..15f572b623 100644
--- a/ngcompiler/lib/v1/src/compiler/view_compiler/compile_element.dart
+++ b/ngcompiler/lib/v1/src/compiler/view_compiler/compile_element.dart
@@ -8,7 +8,7 @@ import '../compile_metadata.dart'
         CompileQueryMetadata,
         CompileProviderMetadata;
 import '../i18n/message.dart';
-import '../identifiers.dart' show Identifiers, identifierToken;
+import '../identifiers.dart' show Identifiers, JsInterop, identifierToken;
 import '../output/output_ast.dart' as o;
 import '../template_ast.dart'
     show TemplateAst, ProviderAst, ProviderAstType, ReferenceAst;
@@ -113,6 +113,7 @@ class CompileElement extends CompileNode implements ProviderResolverHost {
         .instantiate([renderNode.toReadExpr()]);
 
     _providers.add(Identifiers.elementRefToken, elementRef);
+    _providers.add(JsInterop.jsObjectToken, renderNode.toReadExpr());
     _providers.add(Identifiers.elementToken, renderNode.toReadExpr());
     _providers.add(Identifiers.htmlElementToken, renderNode.toReadExpr());
     var readInjectorExpr =
@@ -264,7 +265,7 @@ class CompileElement extends CompileNode implements ProviderResolverHost {
         } else {
           // If we can't find a valid query type, then we fall back to
           // ElementRef. HOWEVER, if specifically typed as Element or
-          // HtmlElement, use that.
+          // HTMLElement, use that.
           value = queryWithRead.query.metadata.isElementType
               ? renderNode.toReadExpr()
               : elementRef;
diff --git a/ngcompiler/lib/v1/src/compiler/view_compiler/compile_query.dart b/ngcompiler/lib/v1/src/compiler/view_compiler/compile_query.dart
index 55380d1391..c04e7de6ca 100644
--- a/ngcompiler/lib/v1/src/compiler/view_compiler/compile_query.dart
+++ b/ngcompiler/lib/v1/src/compiler/view_compiler/compile_query.dart
@@ -6,7 +6,7 @@ import 'compile_view.dart' show CompileView;
 import 'ir/provider_source.dart';
 import 'ir/view_storage.dart';
 import 'view_compiler_utils.dart'
-    show getPropertyInView, replaceReadClassMemberInExpression;
+    show getPropertyInView, replaceReadClassMemberInExpression, unsafeCast;
 
 const _viewQueryNodeIndex = -1;
 
@@ -452,9 +452,9 @@ class _ListCompileQuery extends CompileQuery {
       if (_isSingle && results.values.isEmpty) {
         return const [];
       }
-      result = _createUpdatesStaticOnly(results.values);
+      result = _createUpdatesStaticOnly(results.values, metadata.isElementType);
     } else {
-      result = _createUpdatesNested(results.values);
+      result = _createUpdatesNested(results.values, metadata.isElementType);
     }
     return [
       ..._createAddQueryChangeDetectorRefs(results.withChangeDetectorRefs),
@@ -470,8 +470,20 @@ class _ListCompileQuery extends CompileQuery {
   //
   // * If this is for @{Content|View}Child, use the first value.
   // * Else, return the element(s) as a List.
-  o.Expression _createUpdatesStaticOnly(List<o.Expression> values) =>
-      _isSingle ? values.first : o.literalArr(values);
+  o.Expression _createUpdatesStaticOnly(
+    List<o.Expression> values,
+    bool isElement,
+  ) {
+    if (_isSingle) {
+      return isElement ? unsafeCast(values.first) : values.first;
+    }
+
+    if (isElement) {
+      values = values.map(unsafeCast).toList();
+    }
+
+    return o.literalArr(values);
+  }
 
   // Returns the equivalent of `{list}.isNotEmpty ? {list}.first : null`.
   o.Expression _firstIfNotEmpty(o.Expression list) {
@@ -486,11 +498,12 @@ class _ListCompileQuery extends CompileQuery {
   //
   // * If this is for @{Content|View}Child, return the first value if not empty.
   // * Else, just return the {expression} itself (already a List).
-  o.Expression _createUpdatesNested(List<o.Expression> values) {
+  o.Expression _createUpdatesNested(List<o.Expression> values, bool isElement) {
     // We know there are nested views, so if the length is 1, then it must be a
     // `mapNestedViews` expression which returns a list. Otherwise, we wrap the
     // results in a list literal.
     final value = values.length != 1 ? o.literalArr(values) : values.first;
+    // TODO(ykmnkmi): add unsafeCast if needed.
     return _isSingle ? _firstIfNotEmpty(value) : value;
   }
 }
diff --git a/ngcompiler/lib/v1/src/compiler/view_compiler/compile_view.dart b/ngcompiler/lib/v1/src/compiler/view_compiler/compile_view.dart
index 353be4fd2c..b700216e5c 100644
--- a/ngcompiler/lib/v1/src/compiler/view_compiler/compile_view.dart
+++ b/ngcompiler/lib/v1/src/compiler/view_compiler/compile_view.dart
@@ -747,7 +747,7 @@ class CompileView {
           null,
           [o.StmtModifier.privateStmt]);
 
-  final _eventParam = o.FnParam(
+  static final _eventParam = o.FnParam(
     EventHandlerVars.event.name!,
     o.importType(null),
   );
diff --git a/ngcompiler/lib/v1/src/compiler/view_compiler/update_statement_visitor.dart b/ngcompiler/lib/v1/src/compiler/view_compiler/update_statement_visitor.dart
index 506ae6ca10..ba6bbb6799 100644
--- a/ngcompiler/lib/v1/src/compiler/view_compiler/update_statement_visitor.dart
+++ b/ngcompiler/lib/v1/src/compiler/view_compiler/update_statement_visitor.dart
@@ -1,6 +1,6 @@
 import 'package:ngcompiler/v1/src/compiler/compile_metadata.dart';
 import 'package:ngcompiler/v1/src/compiler/identifiers.dart'
-    show DomHelpers, Identifiers, SafeHtmlAdapters;
+    show DomHelpers, Identifiers, JsInterop, SafeHtmlAdapters;
 import 'package:ngcompiler/v1/src/compiler/ir/model.dart' as ir;
 import 'package:ngcompiler/v1/src/compiler/ir/model.dart';
 import 'package:ngcompiler/v1/src/compiler/output/output_ast.dart' as o;
@@ -142,7 +142,7 @@ class _UpdateStatementsVisitor
           : currValExpr.callMethod('toString', []);
       final styleWithUnit = styleString.plus(o.literal(styleBinding.unit));
       styleValueExpr =
-          currValExpr.isBlank().conditional(o.nullExpr, styleWithUnit);
+          currValExpr.isBlank().conditional(o.literal(''), styleWithUnit);
     } else {
       styleValueExpr = bindingSource.isString
           ? currValExpr
@@ -245,7 +245,13 @@ class _UpdateStatementsVisitor
           [o.Expression? renderValue]) =>
       (renderNode?.toReadExpr() ?? appViewInstance!).callMethod(
         'addEventListener',
-        [o.literal(nativeEvent.name), renderValue!],
+        [
+          o.literal(nativeEvent.name),
+          o.importExpr(JsInterop.functionToJSExportedDartFunction).instantiate([
+            renderValue!.cast(
+                o.FunctionType(o.voidType, [o.importType(Identifiers.event)!]))
+          ]).prop('toJS')
+        ],
       ).toStmt();
 }
 
diff --git a/ngcompiler/lib/v1/src/source_gen/template_compiler/find_components.dart b/ngcompiler/lib/v1/src/source_gen/template_compiler/find_components.dart
index 6830a5c36d..0d83a5542a 100644
--- a/ngcompiler/lib/v1/src/source_gen/template_compiler/find_components.dart
+++ b/ngcompiler/lib/v1/src/source_gen/template_compiler/find_components.dart
@@ -491,7 +491,8 @@ class _ComponentVisitor
   }
 
   static final _coreIterable = TypeChecker.fromUrl('dart:core#Iterable');
-  static final _htmlElement = TypeChecker.fromUrl('dart:html#Element');
+  static final _htmlElement =
+      TypeChecker.fromUrl('package:web/src/dom/dom.dart#Element');
 
   CompileQueryMetadata _getQuery(
     AnnotationInformation annotationInfo,
diff --git a/ngcompiler/mono_pkg.yaml b/ngcompiler/mono_pkg.yaml
index cbc0001650..86adafbf5a 100644
--- a/ngcompiler/mono_pkg.yaml
+++ b/ngcompiler/mono_pkg.yaml
@@ -1,7 +1,7 @@
 sdk:
   - pubspec
-  - dev
   - stable
+  # - dev
 
 stages:
   - analyze:
diff --git a/ngcompiler/pubspec.yaml b/ngcompiler/pubspec.yaml
index 78a2db4998..418e9cdf98 100644
--- a/ngcompiler/pubspec.yaml
+++ b/ngcompiler/pubspec.yaml
@@ -26,6 +26,7 @@ dependencies:
   path: ^1.9.1
   source_gen: ^1.5.0
   source_span: ^1.10.1
+  build_runner_core: <9.0.0
 
 dev_dependencies:
   build_test: ^2.2.2
diff --git a/ngdart/lib/src/common/directives/ng_class.dart b/ngdart/lib/src/common/directives/ng_class.dart
index 643536e664..d9ca821d9a 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..8865999a0f 100644
--- a/ngdart/lib/src/common/directives/ng_style.dart
+++ b/ngdart/lib/src/common/directives/ng_style.dart
@@ -1,9 +1,7 @@
-import 'dart:html';
-
+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 '../../core/change_detection/differs/default_keyvalue_differ.dart';
+import 'package:ngdart/src/utilities/unsafe_cast.dart';
+import 'package:web/web.dart';
 
 /// The `NgStyle` directive changes an element's style based on the bound style
 /// expression:
@@ -85,9 +83,9 @@ class NgStyle implements DoCheck {
   }
 
   void _setProperty(KeyValueChangeRecord record) {
-    _ngElement.style.setProperty(
-      unsafeCast(record.key),
-      unsafeCast(record.currentValue),
-    );
+    // HTMLElement, SVGElement and MathMLElement have same `style` property.
+    // The cast should be omitted because both types are JSObject.
+    (_ngElement as HTMLElement).style.setProperty(
+        unsafeCast(record.key), unsafeCast(record.currentValue ?? ''));
   }
 }
diff --git a/ngdart/lib/src/core/application_ref.dart b/ngdart/lib/src/core/application_ref.dart
index a8fd36da7d..636c26d861 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;
@@ -70,7 +70,7 @@ class ApplicationRef extends ChangeDetectionHost {
   ) {
     return unsafeCast(run(() {
       final component = componentFactory.create(_injector);
-      final existing = querySelector(componentFactory.selector);
+      final existing = document.querySelector(componentFactory.selector);
       Element? replacement;
       if (existing != null) {
         final newElement = component.location;
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..bac4282ade 100644
--- a/ngdart/lib/src/core/linker/app_view_utils.dart
+++ b/ngdart/lib/src/core/linker/app_view_utils.dart
@@ -1,7 +1,8 @@
-import 'dart:html' show DocumentFragment, NodeTreeSanitizer;
+import 'dart:js_interop';
 
 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 +21,7 @@ class AppViewUtils {
 
 /// Creates a document fragment from [trustedHtml].
 DocumentFragment createTrustedHtml(String trustedHtml) {
-  return DocumentFragment.html(
-    trustedHtml,
-    treeSanitizer: NodeTreeSanitizer.trusted,
-  );
+  final template = HTMLTemplateElement();
+  template.innerHTML = trustedHtml.toJS;
+  return template.content;
 }
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/element_ref.dart b/ngdart/lib/src/core/linker/element_ref.dart
index 4fe3eacf81..ef7c82b03c 100644
--- a/ngdart/lib/src/core/linker/element_ref.dart
+++ b/ngdart/lib/src/core/linker/element_ref.dart
@@ -5,9 +5,10 @@
 ///
 /// **DEPRECATED**: A wrapper around a native DOM element inside of a View.
 ///
-/// Inject `Element` or `HtmlElement` from `dart:html` instead; this will be
+/// Inject `Element` or `HTMLElement` from `dart:html` instead; this will be
 /// removed in a future version of AngularDart, and has unnecessary overhead.
-@Deprecated('Inject or reference dart:html Element or HtmlElement instead')
+@Deprecated(
+    'Inject or reference package:web/web.dart Element or HTMLElement instead')
 class ElementRef {
   final dynamic nativeElement;
 
@@ -15,6 +16,7 @@ class ElementRef {
   //
   // Then it is upcasted to dynamic for the public API to be non-breaking.
   // ignore: prefer_initializing_formals
-  @Deprecated('Inject or reference dart:html Element or HtmlElement instead')
+  @Deprecated(
+      'Inject or reference package:web/web.dart Element or HTMLElement instead')
   const ElementRef(this.nativeElement);
 }
diff --git a/ngdart/lib/src/core/linker/style_encapsulation.dart b/ngdart/lib/src/core/linker/style_encapsulation.dart
index 9f2fa41aaf..7aed15df57 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.
 ///
@@ -119,8 +118,8 @@ class ComponentStyles {
     updateClassBindingNonHtml(element, _contentPrefix, true);
   }
 
-  /// An optimized variant of [addShimClass] for [HtmlElement]s.
-  void addContentShimClassHtmlElement(HtmlElement element) {
+  /// An optimized variant of [addShimClass] for [HTMLElement]s.
+  void addContentShimClassHtmlElement(HTMLElement element) {
     updateClassBinding(element, _contentPrefix, true);
   }
 
@@ -129,8 +128,8 @@ class ComponentStyles {
     updateClassBindingNonHtml(element, _hostPrefix, true);
   }
 
-  /// An optimized variant of [addHostShimClass] for [HtmlElement]s.
-  void addHostShimClassHtmlElement(HtmlElement element) {
+  /// An optimized variant of [addHostShimClass] for [HTMLElement]s.
+  void addHostShimClassHtmlElement(HTMLElement element) {
     updateClassBinding(element, _hostPrefix, true);
   }
 
@@ -140,8 +139,8 @@ class ComponentStyles {
     updateAttribute(element, 'class', '$newClass $_contentPrefix');
   }
 
-  /// An optimized variant of [updateChildClass] for [HtmlElement]s.
-  void updateChildClassHtmlElement(HtmlElement element, String newClass) {
+  /// An optimized variant of [updateChildClass] for [HTMLElement]s.
+  void updateChildClassHtmlElement(HTMLElement element, String newClass) {
     element.className = '$newClass $_contentPrefix';
   }
 
@@ -151,9 +150,9 @@ class ComponentStyles {
     updateAttribute(element, 'class', '$newClass $_hostPrefix');
   }
 
-  /// An optimized variant of [updateChildClassForHost] for [HtmlElement]s.
+  /// An optimized variant of [updateChildClassForHost] for [HTMLElement]s.
   void updateChildClassForHostHtmlElement(
-    HtmlElement element,
+    HTMLElement element,
     String newClass,
   ) {
     element.className = '$newClass $_hostPrefix';
@@ -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()..textContent = styles;
     if (isDevMode) {
       // Remove style element from the DOM on hot restart.
       debugOnClear(() {
@@ -190,7 +189,7 @@ class _UnscopedComponentStyles extends ComponentStyles {
   }
 
   @override
-  void addContentShimClassHtmlElement(HtmlElement element) {
+  void addContentShimClassHtmlElement(HTMLElement element) {
     // Intentionally left blank; unscoped syles do not apply shim classes.
   }
 
@@ -200,7 +199,7 @@ class _UnscopedComponentStyles extends ComponentStyles {
   }
 
   @override
-  void addHostShimClassHtmlElement(HtmlElement element) {
+  void addHostShimClassHtmlElement(HTMLElement element) {
     // Intentionally left blank; unscoped syles do not apply shim classes.
   }
 
@@ -212,7 +211,7 @@ class _UnscopedComponentStyles extends ComponentStyles {
   }
 
   @override
-  void updateChildClassHtmlElement(HtmlElement element, String newClass) {
+  void updateChildClassHtmlElement(HTMLElement element, String newClass) {
     element.className = newClass;
   }
 
@@ -225,7 +224,7 @@ class _UnscopedComponentStyles extends ComponentStyles {
 
   @override
   void updateChildClassForHostHtmlElement(
-    HtmlElement element,
+    HTMLElement element,
     String newClass,
   ) {
     // Straight applies the class without any prefixing.
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..0286636bd4 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';
@@ -44,7 +44,7 @@ abstract class ComponentView<T extends Object> extends RenderView {
   late final ComponentStyles componentStyles;
 
   /// The root element of this component, created from its selector.
-  late final HtmlElement rootElement;
+  late final HTMLElement rootElement;
 
   final _ComponentViewData _data;
 
@@ -110,7 +110,7 @@ abstract class ComponentView<T extends Object> extends RenderView {
   /// requires less code to assign the return value of a function that's going
   /// to be called anyways, than to generate an extra statement to load a field.
   @dart2js.noInline
-  HtmlElement initViewRoot() {
+  HTMLElement initViewRoot() {
     final hostElement = rootElement;
     componentStyles.addHostShimClassHtmlElement(hostElement);
     return hostElement;
@@ -215,7 +215,7 @@ abstract class ComponentView<T extends Object> extends RenderView {
 
   @dart2js.noInline
   @override
-  void updateChildClass(HtmlElement element, String newClass) {
+  void updateChildClass(HTMLElement element, String newClass) {
     if (identical(element, rootElement)) {
       componentStyles.updateChildClassForHostHtmlElement(element, newClass);
       final parent = parentView;
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..45854fd283 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';
 
@@ -128,7 +128,7 @@ abstract class RenderView extends View {
   ///   * Calls [markForCheck] on this view to ensure it gets change detected
   ///   during the next change detection cycle, in case it uses a non-default
   ///   change detection strategy.
-  void Function(E) eventHandler0<E>(void Function() handler) {
+  void Function(E event) eventHandler0<E>(void Function() handler) {
     return (E event) {
       markForCheck();
       appViewUtils.eventManager.zone.runGuarded(handler);
@@ -157,16 +157,16 @@ abstract class RenderView extends View {
     return (E event) {
       markForCheck();
       appViewUtils.eventManager.zone.runGuarded(
-        () => handler(unsafeCast<F>(event)),
+        () => handler(unsafeCast(event)),
       );
     };
   }
 
   // Styling -------------------------------------------------------------------
 
-  /// Equivalent to [addShimE], but optimized for [HtmlElement].
+  /// Equivalent to [addShimE], but optimized for [HTMLElement].
   @dart2js.tryInline
-  void addShimC(HtmlElement element) {
+  void addShimC(HTMLElement element) {
     componentStyles.addContentShimClassHtmlElement(element);
   }
 
@@ -176,7 +176,7 @@ abstract class RenderView extends View {
   /// shim class is needed for any styles to match [element].
   ///
   /// This should only be used for SVG or custom elements. For a plain
-  /// [HtmlElement], use [addShimC] instead.
+  /// [HTMLElement], use [addShimC] instead.
   @dart2js.tryInline
   void addShimE(Element element) {
     componentStyles.addContentShimClass(element);
@@ -189,7 +189,7 @@ abstract class RenderView extends View {
   ///
   /// For example, through the `[class]="..."` or `[attr.class]="..."` syntax.
   @dart2js.noInline
-  void updateChildClass(HtmlElement element, String newClass) {
+  void updateChildClass(HTMLElement element, String newClass) {
     componentStyles.updateChildClassHtmlElement(element, newClass);
   }
 
diff --git a/ngdart/lib/src/core/linker/views/view.dart b/ngdart/lib/src/core/linker/views/view.dart
index b5898426d8..05c16c2af1 100644
--- a/ngdart/lib/src/core/linker/views/view.dart
+++ b/ngdart/lib/src/core/linker/views/view.dart
@@ -1,4 +1,4 @@
-import 'dart:html' show Element;
+import 'dart:js_interop';
 
 import 'package:meta/dart2js.dart' as dart2js;
 import 'package:meta/meta.dart';
@@ -8,6 +8,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';
 
 /// The base implementation of all views.
 ///
@@ -124,7 +125,9 @@ abstract class View implements ChangeDetectorRef {
 
   @override
   void markChildForCheck(Object child) {
-    assert(child is! Element, 'Expected a component instance');
+    // ignore: invalid_runtime_check_with_js_interop_types
+    assert(child is! JSAny || !child.isA<Element>(),
+        'Expected a component instance');
     queryChangeDetectorRefs[child]?.markForCheck();
   }
 
diff --git a/ngdart/lib/src/devtools.dart b/ngdart/lib/src/devtools.dart
index 12e991ebfd..aa97095130 100644
--- a/ngdart/lib/src/devtools.dart
+++ b/ngdart/lib/src/devtools.dart
@@ -1,9 +1,6 @@
-@JS()
-library;
+import 'dart:js_interop';
 
-import 'dart:html' as html;
-
-import 'package:js/js.dart';
+import 'package:web/web.dart';
 
 import 'devtools/inspector.dart';
 import 'utilities.dart';
@@ -23,12 +20,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;
   }
 }
 
@@ -36,7 +29,7 @@ void enableDevTools() {
 ///
 /// This method should be used to register elements that are not contained by
 /// the app's root component.
-void registerContentRoot(html.Element element) {
+void registerContentRoot(Element element) {
   if (isDevToolsEnabled) {
     Inspector.instance.registerContentRoot(element);
   }
@@ -44,11 +37,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..860260ffa9 100644
--- a/ngdart/lib/src/devtools/inspector.dart
+++ b/ngdart/lib/src/devtools/inspector.dart
@@ -1,12 +1,13 @@
 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 +70,11 @@ 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;
     }
 
@@ -228,7 +230,7 @@ invocations. Please contact angulardart-eng@ if you encounter this error.
   }
 
   /// Returns the root element of the component for [id].
-  HtmlElement getComponentElement(int id) {
+  HTMLElement getComponentElement(int id) {
     final componentView =
         _referenceCounter.toObject(id) as ComponentView<Object>;
     return componentView.rootElement;
@@ -247,7 +249,7 @@ invocations. Please contact angulardart-eng@ if you encounter this error.
       if (componentView != null) {
         return _referenceCounter.toId(componentView, groupName);
       }
-      current = current.parent;
+      current = current.parentElement;
     }
     return -1;
   }
@@ -280,7 +282,10 @@ 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 = document.createTreeWalker(
+        element,
+        /* NodeFilter.SHOW_ELEMENT */ 0x1,
+      );
       _collectJson(treeWalker, groupName, json);
     }
     return json;
@@ -293,10 +298,12 @@ invocations. Please contact angulardart-eng@ if you encounter this error.
   @visibleForTesting
   BuiltList<InspectorNode> getNodes(String groupName) {
     return BuiltList.build((b) {
+      final whatToShow = /* NodeFilter.SHOW_ELEMENT */
+          0x1 | /* NodeFilter.SHOW_COMMENT */ 0x80;
+
       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 treeWalker = document.createTreeWalker(element, whatToShow);
         _collectNodes(treeWalker, groupName, b);
       }
     });
diff --git a/ngdart/lib/src/meta/directives.dart b/ngdart/lib/src/meta/directives.dart
index de350e6552..6b9c544de9 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';
 ///
@@ -270,7 +270,7 @@ class Pipe {
 ///
 /// > **NOTE**: `@Attribute` is not affected by any updates to attributes to the
 /// > host element (including the `[attr.*]` template syntax, or imperative
-/// > updates to the DOM using `dart:html`).
+/// > updates to the DOM using `package:web/web.dart`).
 ///
 /// ### Example
 ///
diff --git a/ngdart/lib/src/runtime/dom_events.dart b/ngdart/lib/src/runtime/dom_events.dart
index 9bfc27de4d..afd96a51c8 100644
--- a/ngdart/lib/src/runtime/dom_events.dart
+++ b/ngdart/lib/src/runtime/dom_events.dart
@@ -1,6 +1,8 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 import 'package:ngdart/src/core/zone/ng_zone.dart';
+import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 /// Provides a runtime implementation for "native" DOM events on elements.
 class EventManager {
@@ -18,7 +20,7 @@ class EventManager {
   void addEventListener(
     Element element,
     String name,
-    void Function(Object) callback,
+    void Function(Event) callback,
   ) {
     if (_keyEvents.supports(name)) {
       // Run the actual DOM event (i.e. "keydown" or "keyup") outside of the
@@ -33,7 +35,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);
   }
 }
 
@@ -75,7 +77,7 @@ class _KeyEventsHandler {
   void addEventListener(
     Element element,
     String name,
-    void Function(Object) callback,
+    void Function(Event) callback,
   ) {
     assert(_supports(name), 'Should never be called before "supports".');
     final parsed = _cache[name];
@@ -85,11 +87,13 @@ class _KeyEventsHandler {
       return;
     }
 
-    element.addEventListener(parsed.domEventName, (event) {
-      if (event is KeyboardEvent && parsed.matches(event)) {
-        callback(event);
-      }
-    });
+    element.addEventListener(
+        parsed.domEventName,
+        (Event event) {
+          if (event.isA<KeyboardEvent>() && parsed.matches(unsafeCast(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 358fd35587..850a7c7e66 100644
--- a/ngdart/lib/src/runtime/dom_helpers.dart
+++ b/ngdart/lib/src/runtime/dom_helpers.dart
@@ -1,15 +1,14 @@
 /// This library is considered separate from rest of `runtime.dart`, as it
-/// imports `dart:html` and `runtime.dart` is currently used on libraries
+/// imports `web` package and `runtime.dart` is currently used on libraries
 /// that expect to only run on the command-line VM.
-@JS()
 library;
 
-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:meta/dart2js.dart' as dart2js;
 import 'package:ngdart/src/utilities.dart';
+import 'package:web/web.dart';
 
 /// https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
 Text _createTextNode(String text) => Text(text);
@@ -42,27 +41,27 @@ 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);
   }
 }
 
 /// Similar to [updateClassBinding], for an [element] not guaranteed to be HTML.
 ///
-/// For example, using [Element.tag] to create a custom element will not be
-/// recognized as a built-in HTML element, or for SVG elements created by the
+/// For example, using [document.createElement] to create a custom element will
+/// not be recognized as a built-in HTML element, or for SVG elements created by the
 /// template.
 ///
 /// Dart2JS emits slightly more optimized cost in [updateClassBinding].
 @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 +125,20 @@ void setProperty(
   String property,
   Object? value,
 ) {
-  js.setProperty(element, property, value);
+  // TODO(ykmnkmi): `ngcompiler` doesn't have type data to use convert
+  //  values to JS types and use `JSAny` here. Expected to be inlined
+  //  with right type.
+  if (value == null) {
+    element[property] = null;
+  } else if (value is bool) {
+    element[property] = value.toJS;
+  } else if (value is num) {
+    element[property] = value.toJS;
+  } else if (value is String) {
+    element[property] = value.toJS;
+  } else {
+    element[property] = value.jsify();
+  }
 }
 
 /// Creates a [Text] node with the provided [contents].
@@ -179,7 +191,7 @@ Text createText(String contents) {
 /// This is an optimization to reduce code size for a common operation.
 @dart2js.noInline
 Text appendText(Node parent, String text) {
-  return unsafeCast(parent.append(createText(text)));
+  return unsafeCast(parent.appendChild(createText(text)));
 }
 
 /// Returns a new [Comment] node with empty contents.
@@ -193,23 +205,23 @@ Comment createAnchor() => _createComment();
 /// This is an optimization to reduce code size for a common operation.
 @dart2js.noInline
 Comment appendAnchor(Node parent) {
-  return unsafeCast(parent.append(_createComment()));
+  return unsafeCast(parent.appendChild(_createComment()));
 }
 
 /// Appends and returns a new empty [DivElement] to a [parent] node.
 ///
 /// This is an optimization to reduce code size for a common operation.
 @dart2js.noInline
-DivElement appendDiv(Document doc, Node parent) {
-  return unsafeCast(parent.append(doc.createElement('div')));
+HTMLDivElement appendDiv(Document doc, Node parent) {
+  return unsafeCast(parent.appendChild(doc.createElement('div')));
 }
 
-/// Appends and returns a new empty [SpanElement] to a [parent] node.
+/// Appends and returns a new empty [HTMLSpanElement] to a [parent] node.
 ///
 /// This is an optimization to reduce code size for a common operation.
 @dart2js.noInline
-SpanElement appendSpan(Document doc, Node parent) {
-  return unsafeCast(parent.append(doc.createElement('span')));
+HTMLSpanElement appendSpan(Document doc, Node parent) {
+  return unsafeCast(parent.appendChild(doc.createElement('span')));
 }
 
 /// Appends and returns a new empty [Element] to a [parent] node.
@@ -224,17 +236,13 @@ T appendElement<T extends Element>(
   String tagName,
 ) {
   // <T extends Element> allows the pattern:
-  // HtmlElement e = appendElement(doc, parent, 'foo')
+  // HTMLElement e = appendElement(doc, parent, 'foo')
   //
   // ... without gratituous use of unsafeCast or casts in general.
-  return unsafeCast(parent.append(doc.createElement(tagName)));
+  return unsafeCast(parent.appendChild(doc.createElement(tagName)));
 }
 
 /// Inserts [nodes] into the DOM before [sibling].
-///
-/// This intentionally does not use [Node.insertAllBefore], which is slower due
-/// to extra type and runtime checks that are not necessary for our generated
-/// code.
 @dart2js.noInline
 void insertNodesBefore(List<Node> nodes, Node parent, Node sibling) {
   for (var i = 0, l = nodes.length; i < l; i++) {
@@ -246,15 +254,16 @@ void insertNodesBefore(List<Node> nodes, Node parent, Node sibling) {
 @dart2js.noInline
 void appendNodes(List<Node> nodes, Node parent) {
   for (var i = 0, l = nodes.length; i < l; i++) {
-    parent.append(nodes[i]);
+    parent.appendChild(nodes[i]);
   }
 }
 
 /// Removes [nodes] from the DOM.
 @dart2js.noInline
 void removeNodes(List<Node> nodes) {
-  for (var i = 0, l = nodes.length; i < l; i++) {
-    nodes[i].remove();
+  for (var i = 0; i < nodes.length; i++) {
+    var node = nodes[i];
+    node.parentNode?.removeChild(node);
   }
 }
 
@@ -267,7 +276,7 @@ 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 {
diff --git a/ngdart/lib/src/runtime/text_binding.dart b/ngdart/lib/src/runtime/text_binding.dart
index ece51b7083..e80996a9e3 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';
 
@@ -25,7 +24,7 @@ class TextBinding {
   /// Update the [Text] node if [newValue] differs from the previous value.
   void updateText(String newValue) {
     if (checkBinding(_currentValue, newValue)) {
-      element.text = newValue;
+      element.textContent = newValue;
       _currentValue = newValue;
     }
   }
@@ -34,7 +33,7 @@ class TextBinding {
   /// and differs from the previous value.
   void updateTextWithPrimitive(Object? newValue) {
     if (checkBinding(_currentValue, newValue)) {
-      element.text = interpolate0(newValue);
+      element.textContent = interpolate0(newValue);
       _currentValue = newValue;
     }
   }
diff --git a/ngdart/lib/src/security/html_sanitizer.dart b/ngdart/lib/src/security/html_sanitizer.dart
index 336bbfb539..4147e1582c 100644
--- a/ngdart/lib/src/security/html_sanitizer.dart
+++ b/ngdart/lib/src/security/html_sanitizer.dart
@@ -1,15 +1,17 @@
-import 'dart:html';
+import 'package:sanitize_dom/sanitize_dom.dart';
+import 'package:web/web.dart';
 
 final _inertFragment = DocumentFragment();
 
 /// Sanitizes the given unsafe, untrusted HTML fragment, and returns HTML text
 /// that is safe to add to the DOM in a browser environment.
-///
-/// 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();
+
+  while (inertFragment.firstChild != null) {
+    inertFragment.removeChild(inertFragment.firstChild!);
+  }
+
   return safeHtml;
 }
diff --git a/ngdart/lib/src/security/safe_inner_html.dart b/ngdart/lib/src/security/safe_inner_html.dart
index 88b884f7ce..3b8c3622bc 100644
--- a/ngdart/lib/src/security/safe_inner_html.dart
+++ b/ngdart/lib/src/security/safe_inner_html.dart
@@ -1,6 +1,6 @@
-import 'dart:html' show Element, NodeTreeSanitizer;
-
 import 'package:ngdart/angular.dart';
+import 'package:sanitize_dom/sanitize_dom.dart';
+import 'package:web/web.dart';
 
 import 'dom_sanitization_service.dart' show SafeHtml;
 
@@ -41,7 +41,7 @@ class SafeInnerHtmlDirective {
   SafeInnerHtmlDirective(this._element);
 
   @Input()
-  set safeInnerHtml(safeInnerHtml) {
+  set safeInnerHtml(dynamic safeInnerHtml) {
     if (safeInnerHtml is SafeHtml) {
       _element.setInnerHtml(
         safeInnerHtml.changingThisWillBypassSecurityTrust,
diff --git a/ngdart/lib/src/testability/js_api.dart b/ngdart/lib/src/testability/js_api.dart
index 31cd9c5981..8c9d7b70b7 100644
--- a/ngdart/lib/src/testability/js_api.dart
+++ b/ngdart/lib/src/testability/js_api.dart
@@ -1,19 +1,14 @@
-@JS()
-library;
+import 'dart:js_interop';
 
-import 'dart:html';
-
-import 'package:js/js.dart';
+import 'package:web/web.dart';
 
 /// A JavaScript interface for interacting with AngularDart's `Testability` API.
 ///
 /// This interfaces with a running AngularDart application.
-@JS()
-@anonymous
-abstract class JsTestability {
-  external factory JsTestability({
-    required bool Function() isStable,
-    required void Function(void Function()) whenStable,
+extension type JSTestability._(JSObject _) implements JSObject {
+  external factory JSTestability({
+    JSFunction isStable,
+    required JSFunction whenStable,
   });
 
   /// Returns whether the application is considered stable.
@@ -22,7 +17,7 @@ abstract class JsTestability {
   /// framework. By default, this is determined by no known asynchronous tasks
   /// (microtasks, or timers) being present but not yet executed within the
   /// framework context.
-  bool isStable();
+  external bool isStable();
 
   /// Invokes the provided [callback] when the application [isStable].
   ///
@@ -30,23 +25,21 @@ 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);
+  external void whenStable(JSFunction callback);
 }
 
 /// A JavaScript interface for interacting with AngularDart's `TestabilityRegistry` API.
 ///
 /// A global registry of `Testability` instances given an app root element.
-@JS()
-@anonymous
-abstract class JsTestabilityRegistry {
-  external factory JsTestabilityRegistry({
-    required JsTestability? Function(Element) getAngularTestability,
-    required List<JsTestability> Function() getAllAngularTestabilities,
+extension type JSTestabilityRegistry._(JSObject _) implements JSObject {
+  external factory JSTestabilityRegistry({
+    required JSFunction getAngularTestability,
+    required JSFunction getAllAngularTestabilities,
   });
 
   /// Returns the registered testability instance for [appRoot], or `null`.
-  JsTestability? getAngularTestability(Element appRoot);
+  external JSTestability? getAngularTestability(Element appRoot);
 
   /// Returns all testability instances registered.
-  List<JsTestability> getAllAngularTestabilities();
+  external JSArray<JSTestability> getAllAngularTestabilities();
 }
diff --git a/ngdart/lib/src/testability/js_impl.dart b/ngdart/lib/src/testability/js_impl.dart
index 3d9916effe..3228128620 100644
--- a/ngdart/lib/src/testability/js_impl.dart
+++ b/ngdart/lib/src/testability/js_impl.dart
@@ -1,38 +1,41 @@
 part of 'testability.dart';
 
 @JS('ngTestabilityRegistries')
-external List<JsTestabilityRegistry>? _ngJsTestabilityRegistries;
+external JSArray<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;
+external JSArray<JSFunction>? _jsFrameworkStabilizers;
+
+extension on JSArray {
+  external void push(JSAny item);
+}
 
 class _JSTestabilityProxy implements _TestabilityProxy {
   const _JSTestabilityProxy();
 
   @override
   void addToWindow(TestabilityRegistry registry) {
-    var registries = _ngJsTestabilityRegistries;
+    var registries = _ngJSTestabilityRegistries;
     if (registries == null) {
-      registries = <JsTestabilityRegistry>[];
-      _ngJsTestabilityRegistries = registries;
-      _jsGetAngularTestability = allowInterop(_getAngularTestability);
-      _jsGetAllAngularTestabilities = allowInterop(_getAllAngularTestabilities);
-      (_jsFrameworkStabilizers ??= <Object?>[])
-          .add(allowInterop(_whenAllStable));
+      registries = JSArray<JSTestabilityRegistry>();
+      _ngJSTestabilityRegistries = registries;
+      _jsGetAngularTestability = _getAngularTestability.toJS;
+      _jsGetAllAngularTestabilities = _getAllAngularTestabilities.toJS;
+      (_jsFrameworkStabilizers ??= JSArray<JSFunction>())
+          .push(_whenAllStable.toJS);
     }
-    registries.add(registry.asJsApi());
+    registries.push(registry.toJS);
   }
 
   /// For every registered [TestabilityRegistry], tries `getAngularTestability`.
-  static JsTestability? _getAngularTestability(Element element) {
-    final registry = _ngJsTestabilityRegistries;
+  static JSTestability? _getAngularTestability(Element element) {
+    final registry = _ngJSTestabilityRegistries;
     if (registry == null) {
       return null;
     }
@@ -46,21 +49,21 @@ class _JSTestabilityProxy implements _TestabilityProxy {
   }
 
   /// For every registered [TestabilityRegistry], returns the JS API for it.
-  static List<JsTestability> _getAllAngularTestabilities() {
-    final registry = _ngJsTestabilityRegistries;
-    if (registry == null) {
-      return <JsTestability>[];
-    }
-    final result = <JsTestability>[];
-    for (var i = 0; i < registry.length; i++) {
-      final testabilities = registry[i].getAllAngularTestabilities();
-      result.addAll(testabilities);
+  static JSArray<JSTestability> _getAllAngularTestabilities() {
+    final registry = _ngJSTestabilityRegistries;
+    var result = JSArray<JSTestability>();
+    if (registry != null) {
+      for (var i = 0; i < registry.length; i++) {
+        final testabilities = registry[i].getAllAngularTestabilities();
+        result = result.callMethod('concat'.toJS, testabilities)
+            as JSArray<JSTestability>;
+      }
     }
     return result;
   }
 
   /// For every testability, calls [callback] when they _all_ report stable.
-  static void _whenAllStable(void Function() callback) {
+  static void _whenAllStable(JSFunction callback) {
     final testabilities = _getAllAngularTestabilities();
 
     var pendingStable = testabilities.length;
@@ -68,41 +71,46 @@ class _JSTestabilityProxy implements _TestabilityProxy {
     void decrement() {
       pendingStable--;
       if (pendingStable == 0) {
-        callback();
+        callback.callAsFunction();
       }
     }
 
     for (var i = 0; i < testabilities.length; i++) {
-      testabilities[i].whenStable(allowInterop(decrement));
+      testabilities[i].whenStable(decrement.toJS);
     }
   }
 }
 
 extension on Testability {
-  JsTestability asJsApi() {
-    return JsTestability(
-      isStable: allowInterop(() => isStable),
-      whenStable: allowInterop(whenStable),
+  JSTestability get toJS {
+    return JSTestability(
+      isStable: (() => isStable).toJS,
+      whenStable: (JSFunction callback) {
+        whenStable(() {
+          callback.callAsFunction();
+        });
+      }.toJS,
     );
   }
 }
 
 extension on TestabilityRegistry {
-  JsTestabilityRegistry asJsApi() {
-    JsTestability? getAngularTestability(Element element) {
+  JSTestabilityRegistry get toJS {
+    JSTestability? getAngularTestability(Element element) {
       final dartTestability = testabilityFor(element);
-      return dartTestability?.asJsApi();
+      return dartTestability?.toJS;
     }
 
-    List<JsTestability> getAllAngularTestabilities() {
+    JSArray<JSTestability> getAllAngularTestabilities() {
       return allTestabilities
-          .map((testability) => testability.asJsApi())
-          .toList();
+          .map((testability) => testability.toJS)
+          .toList()
+          .toJS;
     }
 
-    return JsTestabilityRegistry(
-      getAngularTestability: allowInterop(getAngularTestability),
-      getAllAngularTestabilities: allowInterop(getAllAngularTestabilities),
+    return JSTestabilityRegistry(
+      getAngularTestability: getAngularTestability.toJS,
+      getAllAngularTestabilities: getAllAngularTestabilities.toJS,
     );
   }
 }
diff --git a/ngdart/lib/src/testability/testability.dart b/ngdart/lib/src/testability/testability.dart
index b5d7c9b353..e79356ccf0 100644
--- a/ngdart/lib/src/testability/testability.dart
+++ b/ngdart/lib/src/testability/testability.dart
@@ -1,12 +1,9 @@
-@JS()
-library;
-
 import 'dart:async';
-import 'dart:html' show Element;
-import 'dart:html';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
-import 'package:js/js.dart';
 import 'package:meta/meta.dart';
+import 'package:web/web.dart';
 
 import '../../di.dart';
 import '../core/zone/ng_zone.dart';
diff --git a/ngdart/lib/src/utilities/unsafe_cast.dart b/ngdart/lib/src/utilities/unsafe_cast.dart
index b0fbef4642..ecef9421a3 100644
--- a/ngdart/lib/src/utilities/unsafe_cast.dart
+++ b/ngdart/lib/src/utilities/unsafe_cast.dart
@@ -16,4 +16,5 @@
 /// ```
 @pragma('dart2js:tryInline') // Required for next pragma to be effective.
 @pragma('dart2js:as:trust') // Omits `as T`.
+@pragma('wasm:prefer-inline')
 T unsafeCast<T>(dynamic any) => any as T;
diff --git a/ngdart/mono_pkg.yaml b/ngdart/mono_pkg.yaml
index 6340676adc..fa534b9ca3 100644
--- a/ngdart/mono_pkg.yaml
+++ b/ngdart/mono_pkg.yaml
@@ -1,7 +1,7 @@
 sdk:
   - pubspec
-  - dev
   - stable
+  # - dev
 
 stages:
   - analyze:
diff --git a/ngdart/pubspec.yaml b/ngdart/pubspec.yaml
index 64b697e893..029385682d 100644
--- a/ngdart/pubspec.yaml
+++ b/ngdart/pubspec.yaml
@@ -16,10 +16,11 @@ dependencies:
   built_value: ^8.9.2
   collection: ^1.19.1
   intl: ^0.19.0
-  js: ^0.7.1
   meta: ^1.16.0
   ngcompiler: ^3.0.0-dev.3
+  sanitize_dom: ^0.1.0
   stream_transform: ^2.1.0
+  web: ^1.1.1
 
 dev_dependencies:
   lints: ^5.0.0
diff --git a/ngforms/dart_test.yaml b/ngforms/dart_test.yaml
index dee0572412..a48fabf6bb 100644
--- a/ngforms/dart_test.yaml
+++ b/ngforms/dart_test.yaml
@@ -4,3 +4,7 @@ include: ../tool/dart_test_repo.yaml
 # This repository has only web tests.
 platforms:
   - chrome
+
+compilers:
+  - dart2js
+  - dart2wasm
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..87193dafb8 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;
+  CheckboxControlValueAccessor(HTMLElement element)
+      : _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..5fd757a637 100644
--- a/ngforms/lib/src/directives/default_value_accessor.dart
+++ b/ngforms/lib/src/directives/default_value_accessor.dart
@@ -1,8 +1,9 @@
-import 'dart:html';
-import 'dart:js_util' as js_util;
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 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';
@@ -31,7 +32,7 @@ const defaultValueAccessor = ExistingProvider.forToken(
 class DefaultValueAccessor extends Object
     with TouchHandler, ChangeHandler<String>
     implements ControlValueAccessor<dynamic> {
-  final HtmlElement _element;
+  final HTMLElement _element;
 
   DefaultValueAccessor(this._element);
 
@@ -42,8 +43,8 @@ class DefaultValueAccessor extends Object
 
   @override
   void writeValue(value) {
-    var normalizedValue = value ?? '';
-    js_util.setProperty(_element, 'value', normalizedValue);
+    var normalizedValue = value as String? ?? '';
+    _element['value'] = normalizedValue.toJS;
   }
 
   @override
diff --git a/ngforms/lib/src/directives/number_value_accessor.dart b/ngforms/lib/src/directives/number_value_accessor.dart
index 1f93ad71b2..169fed7186 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..ba604a7958 100644
--- a/ngforms/lib/src/directives/radio_control_value_accessor.dart
+++ b/ngforms/lib/src/directives/radio_control_value_accessor.dart
@@ -1,8 +1,9 @@
-import 'dart:html';
-import 'dart:js_util' as js_util;
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 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;
@@ -76,7 +77,7 @@ class RadioButtonState {
 class RadioControlValueAccessor extends Object
     with TouchHandler, ChangeHandler<RadioButtonState>
     implements ControlValueAccessor<RadioButtonState>, OnDestroy, OnInit {
-  final HtmlElement _element;
+  final HTMLInputElement _element;
   final RadioControlRegistry _registry;
   final Injector _injector;
   RadioButtonState? _state;
@@ -85,7 +86,8 @@ class RadioControlValueAccessor extends Object
   @Input()
   String? name;
 
-  RadioControlValueAccessor(this._element, this._registry, this._injector);
+  RadioControlValueAccessor(HTMLElement element, this._registry, this._injector)
+      : _element = element as HTMLInputElement;
 
   @HostListener('change')
   void changeHandler() {
@@ -108,7 +110,7 @@ class RadioControlValueAccessor extends Object
   void writeValue(RadioButtonState? value) {
     _state = value;
     if (value?.checked ?? false) {
-      js_util.setProperty(_element, 'checked', true);
+      _element['checked'] = true.toJS;
     }
   }
 
diff --git a/ngforms/lib/src/directives/select_control_value_accessor.dart b/ngforms/lib/src/directives/select_control_value_accessor.dart
index eacc4e27a8..52cc63565f 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;
+  SelectControlValueAccessor(HTMLElement element)
+      : _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 {
+  NgSelectOption(HTMLElement element, @Optional() @Host() this._select)
+      : _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..8155ea2dee 100644
--- a/ngforms/lib/src/directives/shared.dart
+++ b/ngforms/lib/src/directives/shared.dart
@@ -1,5 +1,7 @@
-import 'dart:html';
-import 'dart:js_util' as js_util;
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
+
+import 'package:web/web.dart';
 
 import '../model.dart' show Control, AbstractControlGroup;
 import '../validators.dart' show Validators;
@@ -95,6 +97,6 @@ ControlValueAccessor<dynamic>? selectValueAccessor(
   return null;
 }
 
-void setElementDisabled(HtmlElement element, bool isDisabled) {
-  js_util.setProperty(element, 'disabled', isDisabled);
+void setElementDisabled(HTMLElement element, bool isDisabled) {
+  element['disabled'] = isDisabled.toJS;
 }
diff --git a/ngforms/mono_pkg.yaml b/ngforms/mono_pkg.yaml
index 055bbbf082..88e611a347 100644
--- a/ngforms/mono_pkg.yaml
+++ b/ngforms/mono_pkg.yaml
@@ -1,7 +1,7 @@
 sdk:
   - pubspec
-  - dev
   - stable
+  # - dev
 
 stages:
   - analyze:
@@ -10,6 +10,6 @@ stages:
           - pubspec
       - analyze: --fatal-infos .
   - build:
-      - command: dart run build_runner build --fail-on-severe
+      - command: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
   - unit_test:
-      - command: dart run build_runner test --fail-on-severe -- -P ci
+      - command: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
diff --git a/ngforms/pubspec.yaml b/ngforms/pubspec.yaml
index fd5776aa3e..728988245b 100644
--- a/ngforms/pubspec.yaml
+++ b/ngforms/pubspec.yaml
@@ -13,6 +13,7 @@ resolution: workspace
 dependencies:
   meta: ^1.16.0
   ngdart: ^8.0.0-dev.4
+  web: ^1.1.1
 
 dev_dependencies:
   build_runner: ^2.4.12
diff --git a/ngforms/test/accessor_test.dart b/ngforms/test/accessor_test.dart
index bdbb8fb5e9..0d2ba66e70 100644
--- a/ngforms/test/accessor_test.dart
+++ b/ngforms/test/accessor_test.dart
@@ -1,10 +1,11 @@
-import 'dart:html';
-import 'dart:js_util' as js_util;
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
 
 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;
 
@@ -70,7 +71,7 @@ typedef ChangeFunctionSimple = dynamic Function(dynamic value);
   ],
 )
 class IntValueAccessor implements ControlValueAccessor<dynamic>, Validator {
-  final HtmlElement _elementRef;
+  final HTMLElement _elementRef;
 
   @HostListener('input')
   void onChangeBinding() => onChange(null);
@@ -91,7 +92,7 @@ class IntValueAccessor implements ControlValueAccessor<dynamic>, Validator {
   @override
   void writeValue(dynamic value) {
     var normalizedValue = value!.toString();
-    js_util.setProperty(_elementRef, 'value', normalizedValue);
+    _elementRef['value'] = normalizedValue.toJS;
   }
 
   @override
diff --git a/ngforms/test/directives_test.dart b/ngforms/test/directives_test.dart
index 01963b9fa8..7243035a90 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(HTMLSelectElement());
       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(HTMLSelectElement());
       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/directives_test.mocks.dart b/ngforms/test/directives_test.mocks.dart
new file mode 100644
index 0000000000..0c9a490516
--- /dev/null
+++ b/ngforms/test/directives_test.mocks.dart
@@ -0,0 +1,66 @@
+// Mocks generated by Mockito 5.4.4 from annotations
+// in ngforms/test/directives_test.dart.
+// Do not manually edit this file.
+
+// ignore_for_file: no_leading_underscores_for_library_prefixes
+import 'package:mockito/mockito.dart' as _i1;
+import 'package:ngforms/src/directives/control_value_accessor.dart' as _i2;
+
+// ignore_for_file: type=lint
+// ignore_for_file: avoid_redundant_argument_values
+// ignore_for_file: avoid_setters_without_getters
+// ignore_for_file: comment_references
+// ignore_for_file: deprecated_member_use
+// ignore_for_file: deprecated_member_use_from_same_package
+// ignore_for_file: implementation_imports
+// ignore_for_file: invalid_use_of_visible_for_testing_member
+// ignore_for_file: prefer_const_constructors
+// ignore_for_file: unnecessary_parenthesis
+// ignore_for_file: camel_case_types
+// ignore_for_file: subtype_of_sealed_class
+
+/// A class which mocks [ControlValueAccessor].
+///
+/// See the documentation for Mockito's code generation for more information.
+class MockControlValueAccessor<T> extends _i1.Mock
+    implements _i2.ControlValueAccessor<T> {
+  MockControlValueAccessor() {
+    _i1.throwOnMissingStub(this);
+  }
+
+  @override
+  void writeValue(T? obj) => super.noSuchMethod(
+        Invocation.method(
+          #writeValue,
+          [obj],
+        ),
+        returnValueForMissingStub: null,
+      );
+
+  @override
+  void registerOnChange(_i2.ChangeFunction<T>? f) => super.noSuchMethod(
+        Invocation.method(
+          #registerOnChange,
+          [f],
+        ),
+        returnValueForMissingStub: null,
+      );
+
+  @override
+  void registerOnTouched(_i2.TouchFunction? f) => super.noSuchMethod(
+        Invocation.method(
+          #registerOnTouched,
+          [f],
+        ),
+        returnValueForMissingStub: null,
+      );
+
+  @override
+  void onDisabledChanged(bool? isDisabled) => super.noSuchMethod(
+        Invocation.method(
+          #onDisabledChanged,
+          [isDisabled],
+        ),
+        returnValueForMissingStub: null,
+      );
+}
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/dart_test.yaml b/ngrouter/dart_test.yaml
index dee0572412..a48fabf6bb 100644
--- a/ngrouter/dart_test.yaml
+++ b/ngrouter/dart_test.yaml
@@ -4,3 +4,7 @@ include: ../tool/dart_test_repo.yaml
 # This repository has only web tests.
 platforms:
   - chrome
+
+compilers:
+  - dart2js
+  - dart2wasm
diff --git a/ngrouter/lib/src/directives/router_link_active_directive.dart b/ngrouter/lib/src/directives/router_link_active_directive.dart
index e470634d00..9843508472 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,8 @@ class RouterLinkActive implements AfterViewInit, OnDestroy {
         break;
       }
     }
-    _element.classes.toggleAll(_classes, isActive);
+    for (var i = 0; i < _classes.length; i++) {
+      _element.classList.toggle(_classes[i], isActive);
+    }
   }
 }
diff --git a/ngrouter/lib/src/directives/router_link_directive.dart b/ngrouter/lib/src/directives/router_link_directive.dart
index b9b5141498..178cd533f3 100644
--- a/ngrouter/lib/src/directives/router_link_directive.dart
+++ b/ngrouter/lib/src/directives/router_link_directive.dart
@@ -1,8 +1,16 @@
 import 'dart:async';
-import 'dart:html'
-    show AnchorElement, Element, Event, KeyboardEvent, KeyCode, MouseEvent;
+import 'dart:js_interop';
 
 import 'package:ngdart/angular.dart';
+import 'package:web/web.dart'
+    show
+        Element,
+        ElementEventGetters,
+        Event,
+        HTMLAnchorElement,
+        KeyCode,
+        KeyboardEvent,
+        MouseEvent;
 
 import '../location.dart' show Location;
 import '../router/navigation_params.dart';
@@ -42,7 +50,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.isA<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..608d1f808c 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 event) fn) {
+    window.addEventListener('popstate', fn.toJS, false.toJS);
   }
 
   @override
-  void onHashChange(EventListener fn) {
-    window.addEventListener('hashchange', fn, false);
+  void onHashChange(void Function(Event 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
@@ -50,12 +51,12 @@ class BrowserPlatformLocation extends PlatformLocation {
   }
 
   @override
-  void pushState(Object? state, String title, String? url) {
+  void pushState(JSAny? state, String title, String? url) {
     _history.pushState(state, title, url);
   }
 
   @override
-  void replaceState(Object? state, String title, String? url) {
+  void replaceState(JSAny? state, String title, String? url) {
     _history.replaceState(state, title, url);
   }
 
diff --git a/ngrouter/lib/src/location/hash_location_strategy.dart b/ngrouter/lib/src/location/hash_location_strategy.dart
index f974b8f560..276c8cf9e3 100644
--- a/ngrouter/lib/src/location/hash_location_strategy.dart
+++ b/ngrouter/lib/src/location/hash_location_strategy.dart
@@ -1,6 +1,7 @@
-import 'dart:html' as html;
+import 'dart:js_interop';
 
 import 'package:ngdart/angular.dart' show Injectable, Inject, Optional;
+import 'package:web/web.dart' hide Location;
 
 import 'location.dart' show Location;
 import 'location_strategy.dart' show LocationStrategy, appBaseHref;
@@ -43,7 +44,7 @@ class HashLocationStrategy extends LocationStrategy {
   ]) : _baseHref = baseHref ?? '';
 
   @override
-  void onPopState(html.EventListener fn) {
+  void onPopState(void Function(Event event) fn) {
     _platformLocation.onPopState(fn);
   }
 
@@ -85,7 +86,7 @@ class HashLocationStrategy extends LocationStrategy {
   }
 
   @override
-  void pushState(Object? state, String title, String url, String queryParams) {
+  void pushState(JSAny? state, String title, String url, String queryParams) {
     var externalUrl =
         prepareExternalUrl(url + Location.normalizeQueryParams(queryParams));
     _platformLocation.pushState(state, title, externalUrl);
@@ -93,7 +94,7 @@ class HashLocationStrategy extends LocationStrategy {
 
   @override
   void replaceState(
-      Object? state, String title, String url, String queryParams) {
+      JSAny? state, String title, String url, String queryParams) {
     var normalizedUrl =
         prepareExternalUrl(url + Location.normalizeQueryParams(queryParams));
     _platformLocation.replaceState(state, title, normalizedUrl);
diff --git a/ngrouter/lib/src/location/location_strategy.dart b/ngrouter/lib/src/location/location_strategy.dart
index d5bc17199c..86e02199fc 100644
--- a/ngrouter/lib/src/location/location_strategy.dart
+++ b/ngrouter/lib/src/location/location_strategy.dart
@@ -1,6 +1,7 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 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:
@@ -20,12 +21,11 @@ abstract class LocationStrategy {
   String path();
   String hash();
   String prepareExternalUrl(String internal);
-  void pushState(Object? state, String title, String url, String queryParams);
-  void replaceState(
-      Object? state, String title, String url, String queryParams);
+  void pushState(JSAny? state, String title, String url, String queryParams);
+  void replaceState(JSAny? 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..7667ad6dbe 100644
--- a/ngrouter/lib/src/location/path_location_strategy.dart
+++ b/ngrouter/lib/src/location/path_location_strategy.dart
@@ -1,6 +1,7 @@
-import 'dart:html' as html;
+import 'dart:js_interop';
 
 import 'package:ngdart/angular.dart' show Injectable, Inject, Optional;
+import 'package:web/web.dart' hide Location;
 
 import 'location.dart' show Location;
 import 'location_strategy.dart' show LocationStrategy, appBaseHref;
@@ -39,7 +40,7 @@ class PathLocationStrategy extends LocationStrategy {
   }
 
   @override
-  void onPopState(html.EventListener fn) {
+  void onPopState(void Function(Event event) fn) {
     _platformLocation.onPopState(fn);
   }
 
@@ -60,7 +61,7 @@ class PathLocationStrategy extends LocationStrategy {
       Location.normalizeQueryParams(_platformLocation.search);
 
   @override
-  void pushState(Object? state, String title, String url, String queryParams) {
+  void pushState(JSAny? state, String title, String url, String queryParams) {
     var externalUrl =
         prepareExternalUrl(url + Location.normalizeQueryParams(queryParams));
     _platformLocation.pushState(state, title, externalUrl);
@@ -68,7 +69,7 @@ class PathLocationStrategy extends LocationStrategy {
 
   @override
   void replaceState(
-      Object? state, String title, String url, String queryParams) {
+      JSAny? state, String title, String url, String queryParams) {
     var externalUrl =
         prepareExternalUrl(url + Location.normalizeQueryParams(queryParams));
     _platformLocation.replaceState(state, title, externalUrl);
diff --git a/ngrouter/lib/src/location/platform_location.dart b/ngrouter/lib/src/location/platform_location.dart
index e1a51fb390..a1332a6d46 100644
--- a/ngrouter/lib/src/location/platform_location.dart
+++ b/ngrouter/lib/src/location/platform_location.dart
@@ -1,4 +1,6 @@
-import 'dart:html';
+import 'dart:js_interop';
+
+import 'package:web/web.dart';
 
 /// This class should not be used directly by an application developer. Instead, use
 /// [Location].
@@ -24,13 +26,13 @@ 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 event) fn);
+  void onHashChange(void Function(Event event) fn);
   String get pathname;
   String get search;
   String get hash;
-  void replaceState(Object? state, String title, String? url);
-  void pushState(Object? state, String title, String? url);
+  void replaceState(JSAny? state, String title, String? url);
+  void pushState(JSAny? state, String title, String? url);
   void forward();
   void back();
 }
diff --git a/ngrouter/lib/src/location/testing/mock_location_strategy.dart b/ngrouter/lib/src/location/testing/mock_location_strategy.dart
index e110ae9aea..764c21ebc7 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' hide Location;
 
 /// 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 event) fn) {
     _subject.stream.listen(fn);
   }
 
diff --git a/ngrouter/mono_pkg.yaml b/ngrouter/mono_pkg.yaml
index 055bbbf082..88e611a347 100644
--- a/ngrouter/mono_pkg.yaml
+++ b/ngrouter/mono_pkg.yaml
@@ -1,7 +1,7 @@
 sdk:
   - pubspec
-  - dev
   - stable
+  # - dev
 
 stages:
   - analyze:
@@ -10,6 +10,6 @@ stages:
           - pubspec
       - analyze: --fatal-infos .
   - build:
-      - command: dart run build_runner build --fail-on-severe
+      - command: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
   - unit_test:
-      - command: dart run build_runner test --fail-on-severe -- -P ci
+      - command: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
diff --git a/ngrouter/pubspec.yaml b/ngrouter/pubspec.yaml
index 74fef0244e..9582a4b073 100644
--- a/ngrouter/pubspec.yaml
+++ b/ngrouter/pubspec.yaml
@@ -13,6 +13,7 @@ resolution: workspace
 dependencies:
   collection: ^1.19.1
   ngdart: ^8.0.0-dev.4
+  web: ^1.1.1
 
 dev_dependencies:
   async: ^2.12.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..6b91ebd9a2 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, hasLength(0));
     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, hasLength(0));
     await fixture.update((_) {
       fakeRouter.current =
           RouterState('/user/bob', const [], queryParameters: {'param': '1'});
     });
-    expect(anchor.classes, isEmpty);
+    expect(anchor.classList, hasLength(0));
     await fixture.update((_) {
       fakeRouter.current = RouterState('/user/bob', const [], fragment: 'frag');
     });
-    expect(anchor.classes, isEmpty);
+    expect(anchor.classList, hasLength(0));
 
     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..6dd81e4455 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;
 
 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());
@@ -85,9 +86,7 @@ void main() {
 
 @Component(
   selector: 'test-router-link',
-  directives: [
-    RouterLink,
-  ],
+  directives: [RouterLink],
   template: r'''
     <a [routerLink]="routerLink"></a>
   ''',
@@ -107,9 +106,7 @@ class TestRouterLinkKeyPress {
 
 @Component(
   selector: 'test-router-link',
-  directives: [
-    RouterLink,
-  ],
+  directives: [RouterLink],
   template: r'''
     <a (click)="onClick($event)" [routerLink]="routerLink" target="_parent"></a>
   ''',
@@ -174,21 +171,21 @@ Event createKeyboardEvent(
   bool shiftKey = false,
   bool metaKey = false,
 }) {
-  if (!context.hasProperty(_createKeyboardEventName)) {
+  if (!globalContext.has(_createKeyboardEventName)) {
     final script = document.createElement('script')
       ..setAttribute('type', 'text/javascript')
-      ..text = _createKeyboardEventScript;
+      ..textContent = _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..729294d2ee 100644
--- a/ngrouter/test/regression/hash_location_strategy_test.dart
+++ b/ngrouter/test/regression/hash_location_strategy_test.dart
@@ -1,19 +1,22 @@
-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>()])
+// TODO(ykmnkmi): replace with BrowserPlatformLocation when `mockito` supports
+//  extension types.
+@GenerateNiceMocks([MockSpec<PlatformLocation>()])
 import 'hash_location_strategy_test.mocks.dart'; // ignore: uri_does_not_exist
 
 import 'hash_location_strategy_test.template.dart' as ng;
 
+// TODO(ykmnkmi): replace with MockBrowserPlatformLocation when `mockito`
+//  supports extension types.
 // ignore: undefined_function
-final platformLocation = MockBrowserPlatformLocation();
+final platformLocation = MockPlatformLocation();
 
 void main() {
   setUp(() {
@@ -59,7 +62,7 @@ class AppComponent {
   static final routes = [fooRoute];
 
   @ViewChild('routerLink')
-  HtmlElement? anchor;
+  HTMLAnchorElement? anchor;
 }
 
 @Component(selector: 'foo', template: '')
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/dart_test.yaml b/ngtest/dart_test.yaml
index dee0572412..681990bf4e 100644
--- a/ngtest/dart_test.yaml
+++ b/ngtest/dart_test.yaml
@@ -4,3 +4,7 @@ include: ../tool/dart_test_repo.yaml
 # This repository has only web tests.
 platforms:
   - chrome
+
+compilers:
+  - dart2js
+  - dart2wasm
\ No newline at end of file
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/mono_pkg.yaml b/ngtest/mono_pkg.yaml
index cafc1cf48c..376c2ad9fc 100644
--- a/ngtest/mono_pkg.yaml
+++ b/ngtest/mono_pkg.yaml
@@ -1,7 +1,7 @@
 sdk:
   - pubspec
-  - dev
   - stable
+  # - dev
 
 stages:
   - analyze:
@@ -10,9 +10,9 @@ stages:
           - pubspec
       - analyze: --fatal-infos .
   - build:
-      - command: dart run build_runner build --fail-on-severe
+      - command: dart run build_runner build --delete-conflicting-outputs --fail-on-severe
   - unit_test:
-      - command: dart run build_runner test --fail-on-severe -- -P ci
+      - command: dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci
 
 cache:
   directories:
diff --git a/ngtest/pubspec.yaml b/ngtest/pubspec.yaml
index ed7170430f..bb8c24888e 100644
--- a/ngtest/pubspec.yaml
+++ b/ngtest/pubspec.yaml
@@ -14,6 +14,7 @@ dependencies:
   collection: ^1.19.1
   meta: ^1.16.0
   ngdart: ^8.0.0-dev.4
+  web: ^1.1.1
 
 dev_dependencies:
   build_runner: ^2.4.12
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..54c129bf25 100644
--- a/ngtest/test/frontend/bed_error_test.dart
+++ b/ngtest/test/frontend/bed_error_test.dart
@@ -1,8 +1,10 @@
 import 'dart:async';
+import 'dart:js_interop';
 
 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 +125,8 @@ class CatchNativeEventSynchronousErrors {
     ).create();
     expect(
       fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       }),
       throwsA(isStateError),
     );
@@ -145,7 +148,8 @@ class CatchNativeEventAsynchronousErrors {
     ).create();
     expect(
       fixture.update((_) {
-        fixture.rootElement.querySelector('button')!.click();
+        (fixture.rootElement.querySelector('button') as HTMLButtonElement)
+            .click();
       }),
       throwsA(isStateError),
     );
@@ -229,7 +233,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.innerHTML as JSString;
     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..e8375e2146 100644
--- a/ngtest/test/frontend/bed_lifecycle_test.dart
+++ b/ngtest/test/frontend/bed_lifecycle_test.dart
@@ -1,8 +1,9 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 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 +12,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 +28,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, equals('New value'));
     await fixture.dispose();
-    print(docRoot.innerHtml);
-    expect(docRoot.text, isEmpty);
+    print((docRoot.innerHTML as JSString).toDart);
+    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..a7e46fd7bb 100644
--- a/ngtest/test/frontend/compatibility_test.dart
+++ b/ngtest/test/frontend/compatibility_test.dart
@@ -1,9 +1,10 @@
-import 'dart:html';
+import 'dart:js_interop';
 
 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 +13,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 +38,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.innerHTML as JSString).toDart);
+      expect(docRoot.textContent, isEmpty);
     });
     group('and beforeComponentCreated without error', () {
       test('should handle synchronous fn', () async {
@@ -53,7 +54,7 @@ void main() {
         }, beforeChangeDetection: (_) {
           expect(testService, isNotNull);
         });
-        expect(docRoot.text, 'New value');
+        expect(docRoot.textContent, 'New value');
         await fixture.dispose();
       });
 
@@ -64,7 +65,7 @@ void main() {
         }, beforeChangeDetection: (_) {
           expect(testService, isNotNull);
         });
-        expect(docRoot.text, 'New value');
+        expect(docRoot.textContent, 'New value');
         await fixture.dispose();
       });
 
@@ -76,7 +77,7 @@ void main() {
         }, beforeChangeDetection: (_) {
           expect(testService, isNotNull);
         });
-        expect(docRoot.text, 'New value');
+        expect(docRoot.textContent, 'New value');
         await fixture.dispose();
       });
     });
diff --git a/tool/ci.sh b/tool/ci.sh
index a0f621225a..870345e14c 100755
--- a/tool/ci.sh
+++ b/tool/ci.sh
@@ -68,20 +68,20 @@ for PKG in ${PKGS}; do
         dart analyze --fatal-infos . || EXIT_CODE=$?
         ;;
       command_0)
-        echo 'dart run build_runner build --fail-on-severe'
-        dart run build_runner build --fail-on-severe || EXIT_CODE=$?
+        echo 'dart run build_runner build --delete-conflicting-outputs --fail-on-severe'
+        dart run build_runner build --delete-conflicting-outputs --fail-on-severe || EXIT_CODE=$?
         ;;
       command_1)
         echo 'dart test -P vm'
         dart test -P vm || EXIT_CODE=$?
         ;;
       command_2)
-        echo 'dart run build_runner test --fail-on-severe -- -P browser'
-        dart run build_runner test --fail-on-severe -- -P browser || EXIT_CODE=$?
+        echo 'dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser'
+        dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P browser || EXIT_CODE=$?
         ;;
       command_3)
-        echo 'dart run build_runner test --fail-on-severe -- -P ci'
-        dart run build_runner test --fail-on-severe -- -P ci || EXIT_CODE=$?
+        echo 'dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci'
+        dart run build_runner test --delete-conflicting-outputs --fail-on-severe -- -P ci || EXIT_CODE=$?
         ;;
       format)
         echo 'dart format --output=none --set-exit-if-changed .'
diff --git a/tool/package_versions.yaml b/tool/package_versions.yaml
index d6344b5329..23af5c21f9 100644
--- a/tool/package_versions.yaml
+++ b/tool/package_versions.yaml
@@ -17,7 +17,6 @@ csslib: ^1.0.2
 dart_style: ^2.3.7
 glob: ^2.1.2
 intl: ^0.19.0
-js: ^0.7.1
 lints: ^5.0.0
 logging: ^1.3.0
 meta: ^1.16.0
@@ -28,6 +27,7 @@ ngdart: ^8.0.0-dev.4
 ngtest: ^5.0.0-dev.2
 package_config: ^2.1.1
 path: ^1.9.1
+sanitize_dom: ^0.1.0
 source_gen: ^1.5.0
 source_span: ^1.10.1
 stream_transform: ^2.1.0
@@ -35,3 +35,4 @@ string_scanner: ^1.4.0
 term_glyph: ^1.2.1
 test: ^1.25.9
 watcher: ^1.1.0
+web: ^1.1.1