diff --git a/ash/webui/common/resources/BUILD.gn b/ash/webui/common/resources/BUILD.gn
index 2d46bcd24a3f95..3bdb9be506628f 100644
--- a/ash/webui/common/resources/BUILD.gn
+++ b/ash/webui/common/resources/BUILD.gn
@@ -6,26 +6,84 @@ import("//build/config/chromeos/ui_mode.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
 import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/grit/repack.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/css_to_wrapper.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 
 assert(is_chromeos_ash)
 
 preprocessed_dir = "preprocessed"
-preprocessed_gen_manifest = "preprocessed_gen_manifest.json"
+preprocessed_manifest = "preprocessed_manifest.json"
 
 polymer_element_files = [
   "keyboard_diagram.js",
-  "keyboard_icons.js",
   "keyboard_key.js",
-  "navigation_icons.js",
   "navigation_selector.js",
-  "navigation_shared_vars.js",
   "navigation_view_panel.js",
   "page_toolbar.js",
 ]
 
+icons_html_files = [
+  "keyboard_icons.html",
+  "navigation_icons.html",
+]
+
+# Files that are passed as input to html_to_wrapper().
+html_files = []
+foreach(f, polymer_element_files) {
+  html_files += [ string_replace(f, ".js", ".html") ]
+}
+
+# Files that are generated by html_to_wrapper().
+html_wrapper_files = []
+foreach(f, html_files + icons_html_files) {
+  html_wrapper_files += [ f + ".js" ]
+}
+
+css_files = [ "navigation_shared_vars.css" ]
+
+# Files that are generated by css_to_wrapper().
+css_wrapper_files = []
+foreach(f, css_files) {
+  css_wrapper_files += [ f + ".js" ]
+}
+
+preprocess_if_expr("preprocess") {
+  in_folder = "."
+  out_folder = "$target_gen_dir/$preprocessed_dir"
+  out_manifest = "$target_gen_dir/$preprocessed_manifest"
+  in_files = polymer_element_files + icons_html_files + html_files + css_files
+}
+
+html_to_wrapper("html_wrapper_files") {
+  deps = [ ":preprocess" ]
+  in_folder = "$target_gen_dir/$preprocessed_dir"
+  out_folder = "$target_gen_dir/$preprocessed_dir"
+  in_files = html_files + icons_html_files
+  use_js = true
+}
+
+css_to_wrapper("css_wrapper_files") {
+  deps = [ ":preprocess" ]
+  in_folder = "$target_gen_dir/$preprocessed_dir"
+  out_folder = "$target_gen_dir/$preprocessed_dir"
+  in_files = css_files
+  use_js = true
+}
+
+generate_grd("build_html_css_wrapper_files_grdp") {
+  input_files = html_wrapper_files + css_wrapper_files
+  input_files_base_dir =
+      rebase_path("$target_gen_dir/$preprocessed_dir", root_build_dir)
+  public_deps = [
+    ":css_wrapper_files",
+    ":html_wrapper_files",
+  ]
+  grd_prefix = "ash_common"
+  out_grd = "$target_gen_dir/html_css_wrapper_files_resources.grdp"
+  resource_path_prefix = "ash/common"
+}
+
 generate_grd("build_grdp") {
   input_files = [
     "fake_method_resolver.js",
@@ -34,8 +92,8 @@ generate_grd("build_grdp") {
     "mojo_utils.js",
   ]
   input_files_base_dir = rebase_path(".", "//")
-  public_deps = [ ":preprocess_generated" ]
-  manifest_files = [ "$target_gen_dir/$preprocessed_gen_manifest" ]
+  public_deps = [ ":preprocess" ]
+  manifest_files = [ "$target_gen_dir/$preprocessed_manifest" ]
   grd_prefix = "ash_common"
   out_grd = "$target_gen_dir/${grd_prefix}_resources.grdp"
   resource_path_prefix = "ash/common"
@@ -47,7 +105,6 @@ js_type_check("closure_compile_module") {
     ":fake_method_resolver",
     ":fake_observables",
     ":keyboard_diagram",
-    ":keyboard_icons",
     ":keyboard_key",
     ":keyboard_layouts",
     ":mojo_utils",
@@ -74,15 +131,8 @@ js_library("keyboard_diagram") {
   ]
 }
 
-js_library("keyboard_icons") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("keyboard_key") {
   deps = [
-    ":keyboard_icons",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
@@ -97,13 +147,6 @@ js_library("mojo_utils") {
 }
 
 js_library("navigation_selector") {
-  deps = [
-    ":navigation_icons",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
-js_library("navigation_shared_vars") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
@@ -116,26 +159,8 @@ js_library("navigation_view_panel") {
   ]
 }
 
-js_library("navigation_icons") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("page_toolbar") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
-
-preprocess_if_expr("preprocess_generated") {
-  deps = [ ":web_components" ]
-  in_folder = target_gen_dir
-  out_folder = "$target_gen_dir/$preprocessed_dir"
-  out_manifest = "$target_gen_dir/$preprocessed_gen_manifest"
-  in_files = polymer_element_files
-}
-
-html_to_js("web_components") {
-  js_files = polymer_element_files
-}
diff --git a/ash/webui/common/resources/keyboard_diagram.js b/ash/webui/common/resources/keyboard_diagram.js
index f25788b327dbed..0c6561ea0b82b7 100644
--- a/ash/webui/common/resources/keyboard_diagram.js
+++ b/ash/webui/common/resources/keyboard_diagram.js
@@ -5,6 +5,7 @@
 import {I18nBehavior, I18nBehaviorInterface} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {getTemplate} from './keyboard_diagram.html.js';
 import {KeyboardKeyState} from './keyboard_key.js';
 import {getKeyboardLayoutForRegionCode} from './keyboard_layouts.js';
 
@@ -155,7 +156,7 @@ export class KeyboardDiagramElement extends KeyboardDiagramElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/ash/webui/common/resources/keyboard_icons.js b/ash/webui/common/resources/keyboard_icons.js
deleted file mode 100644
index 2b491650713078..00000000000000
--- a/ash/webui/common/resources/keyboard_icons.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright 2021 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
-
-import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-const template = html`{__html_template__}`;
-document.head.appendChild(template.content);
diff --git a/ash/webui/common/resources/keyboard_key.js b/ash/webui/common/resources/keyboard_key.js
index 901436191ee416..470fd38d22837b 100644
--- a/ash/webui/common/resources/keyboard_key.js
+++ b/ash/webui/common/resources/keyboard_key.js
@@ -3,11 +3,13 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
-import './keyboard_icons.js';
+import './keyboard_icons.html.js';
 
 import {I18nBehavior, I18nBehaviorInterface} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {getTemplate} from './keyboard_key.html.js';
+
 /**
  * @fileoverview
  * 'keyboard-key' provides a visual representation of a single key for the
@@ -83,7 +85,7 @@ export class KeyboardKeyElement extends KeyboardKeyElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/ash/webui/common/resources/navigation_icons.js b/ash/webui/common/resources/navigation_icons.js
deleted file mode 100644
index b401f8bb0a020e..00000000000000
--- a/ash/webui/common/resources/navigation_icons.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright 2021 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
-
-import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-const template = html`{__html_template__}`;
-document.head.appendChild(template.content);
\ No newline at end of file
diff --git a/ash/webui/common/resources/navigation_selector.js b/ash/webui/common/resources/navigation_selector.js
index 4048a2001cf5ff..09a161ed11b3cb 100644
--- a/ash/webui/common/resources/navigation_selector.js
+++ b/ash/webui/common/resources/navigation_selector.js
@@ -2,15 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-import './navigation_icons.js';
+import './navigation_icons.html.js';
 import 'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './navigation_selector.html.js';
+
 /**
  * @typedef {{
  *   name: string,
@@ -34,7 +36,7 @@ export class NavigationSelectorElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -114,4 +116,4 @@ export class NavigationSelectorElement extends PolymerElement {
   }
 }
 
-customElements.define(NavigationSelectorElement.is, NavigationSelectorElement);
\ No newline at end of file
+customElements.define(NavigationSelectorElement.is, NavigationSelectorElement);
diff --git a/ash/webui/common/resources/navigation_shared_vars.css b/ash/webui/common/resources/navigation_shared_vars.css
new file mode 100644
index 00000000000000..b4de1cba884c34
--- /dev/null
+++ b/ash/webui/common/resources/navigation_shared_vars.css
@@ -0,0 +1,55 @@
+/* Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* #css_wrapper_metadata_start
+ * #type=vars
+ * #import=chrome://resources/cr_elements/shared_vars_css.m.js
+ * #import=chrome://resources/polymer/v3_0/paper-styles/color.js
+ * #css_wrapper_metadata_end */
+
+html {
+  --areas-no-header-nav: "sideNav main";
+  --areas-no-header-nav-banner: "banner banner"
+                                "sideNav main";
+  --iron-icon-fill-color: var(--cros-icon-color-primary);
+  --iron-icon-height: 20px;
+  --iron-icon-width: 20px;
+  --left-aligned-top-offset: 64px;
+}
+
+/* calc formula: (viewport width - (padding + side nav size)) */
+@media (min-width: 600px) {
+  html {
+    --areas-nav: "head head"
+             "main main";
+    --areas-nav-banner: "head head"
+                        "banner banner"
+                        "main main";
+    --columns-nav: 1fr 1fr;
+    --container-padding-nav: 24px;
+    --container-max-width-nav: calc(100vw - 48px);
+    }
+}
+
+@media (min-width: 769px) {
+  html {
+    --areas-nav: "head head"
+             "sideNav main";
+    --areas-nav-banner: "head head"
+                        "banner banner"
+                        "sideNav main";
+    --columns-nav: 192px 1fr;
+    --container-padding-nav: 40px;
+    --container-max-width-nav: calc(100vw - 272px);
+    }
+}
+
+@media (min-width: 961px) {
+  html {
+    --columns-nav: 248px 1fr;
+    --container-padding-nav: 48px;
+    --container-max-width-nav: calc(100vw - 344px);
+
+  }
+}
diff --git a/ash/webui/common/resources/navigation_shared_vars.html b/ash/webui/common/resources/navigation_shared_vars.html
deleted file mode 100644
index ceea294aa3b92f..00000000000000
--- a/ash/webui/common/resources/navigation_shared_vars.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<custom-style>
-  <style>
-    html {
-      --areas-no-header-nav: "sideNav main";
-      --areas-no-header-nav-banner: "banner banner"
-                                    "sideNav main";
-      --iron-icon-fill-color: var(--cros-icon-color-primary);
-      --iron-icon-height: 20px;
-      --iron-icon-width: 20px;
-      --left-aligned-top-offset: 64px;
-    }
-
-   /* calc formula: (viewport width - (padding + side nav size)) */
-    @media (min-width: 600px) {
-      html {
-        --areas-nav: "head head"
-                 "main main";
-        --areas-nav-banner: "head head"
-                            "banner banner"
-                            "main main";
-        --columns-nav: 1fr 1fr;
-        --container-padding-nav: 24px;
-        --container-max-width-nav: calc(100vw - 48px);
-        }
-    }
-
-    @media (min-width: 769px) {
-      html {
-        --areas-nav: "head head"
-                 "sideNav main";
-        --areas-nav-banner: "head head"
-                            "banner banner"
-                            "sideNav main";
-        --columns-nav: 192px 1fr;
-        --container-padding-nav: 40px;
-        --container-max-width-nav: calc(100vw - 272px);
-        }
-    }
-
-    @media (min-width: 961px) {
-      html {
-        --columns-nav: 248px 1fr;
-        --container-padding-nav: 48px;
-        --container-max-width-nav: calc(100vw - 344px);
-
-      }
-    }
-  </style>
-</custom-style>
diff --git a/ash/webui/common/resources/navigation_shared_vars.js b/ash/webui/common/resources/navigation_shared_vars.js
deleted file mode 100644
index e81af16c8931e7..00000000000000
--- a/ash/webui/common/resources/navigation_shared_vars.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2021 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
-import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-const $_documentContainer = document.createElement('template');
-$_documentContainer.innerHTML = `{__html_template__}`;
-document.head.appendChild($_documentContainer.content);
diff --git a/ash/webui/common/resources/navigation_view_panel.js b/ash/webui/common/resources/navigation_view_panel.js
index 7fd6787a38c248..7a4b9943980e9c 100644
--- a/ash/webui/common/resources/navigation_view_panel.js
+++ b/ash/webui/common/resources/navigation_view_panel.js
@@ -6,13 +6,14 @@ import 'chrome://resources/cr_elements/cr_drawer/cr_drawer.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import 'chrome://resources/polymer/v3_0/iron-media-query/iron-media-query.js';
-import './navigation_shared_vars.js';
+import './navigation_shared_vars.css.js';
 import './page_toolbar.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {SelectorItem} from './navigation_selector.js';
+import {getTemplate} from './navigation_view_panel.html.js';
 
 const navigationPageChanged = 'onNavigationPageChanged';
 
@@ -39,7 +40,7 @@ export class NavigationViewPanelElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/ash/webui/common/resources/page_toolbar.js b/ash/webui/common/resources/page_toolbar.js
index c9e083bdc477d9..0e015e9d46090d 100644
--- a/ash/webui/common/resources/page_toolbar.js
+++ b/ash/webui/common/resources/page_toolbar.js
@@ -7,7 +7,9 @@ import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './page_toolbar.html.js';
 
 /** @polymer */
 export class PageToolbarElement extends PolymerElement {
@@ -16,7 +18,7 @@ export class PageToolbarElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/ash/webui/diagnostics_ui/resources/diagnostics_shared_css.js b/ash/webui/diagnostics_ui/resources/diagnostics_shared_css.js
index 95b66b67d47274..37bc187971ca5a 100644
--- a/ash/webui/diagnostics_ui/resources/diagnostics_shared_css.js
+++ b/ash/webui/diagnostics_ui/resources/diagnostics_shared_css.js
@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/ash/common/navigation_shared_vars.js';
+import 'chrome://resources/ash/common/navigation_shared_vars.css.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
diff --git a/ash/webui/shortcut_customization_ui/resources/shortcut_customization_shared_css.js b/ash/webui/shortcut_customization_ui/resources/shortcut_customization_shared_css.js
index 224aec87242cf8..131a17c567ff0d 100644
--- a/ash/webui/shortcut_customization_ui/resources/shortcut_customization_shared_css.js
+++ b/ash/webui/shortcut_customization_ui/resources/shortcut_customization_shared_css.js
@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/ash/common/navigation_shared_vars.js';
+import 'chrome://resources/ash/common/navigation_shared_vars.css.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_elements/md_select_css.m.js';
diff --git a/ui/webui/resources/BUILD.gn b/ui/webui/resources/BUILD.gn
index 057fe8c63a14a5..8656f3891bc994 100644
--- a/ui/webui/resources/BUILD.gn
+++ b/ui/webui/resources/BUILD.gn
@@ -94,16 +94,18 @@ generate_grd("build_grd") {
     public_deps += [
       ":build_cros_styles_grdp",
       "//ash/webui/common/resources:build_grdp",
+      "//ash/webui/common/resources:build_html_css_wrapper_files_grdp",
       "//chromeos/ash/components/cros_elements:build_grdp",
       "//third_party/material_web_components:build_grdp",
       "//third_party/web-animations-js:build_grdp",
     ]
     grdp_files += [
+      "$root_gen_dir/ash/webui/common/resources/ash_common_resources.grdp",
+      "$root_gen_dir/ash/webui/common/resources/html_css_wrapper_files_resources.grdp",
       "$root_gen_dir/chromeos/ash/components/cros_elements/cros_elements_resources.grdp",
-      "$root_gen_dir/ui/webui/resources/cros_styles_resources.grdp",
-      "$root_gen_dir/third_party/web-animations-js/web_animations_resources.grdp",
       "$root_gen_dir/third_party/material_web_components/material_web_components_resources.grdp",
-      "$root_gen_dir/ash/webui/common/resources/ash_common_resources.grdp",
+      "$root_gen_dir/third_party/web-animations-js/web_animations_resources.grdp",
+      "$root_gen_dir/ui/webui/resources/cros_styles_resources.grdp",
     ]
   }