diff --git a/administrator/components/com_associations/tmpl/association/edit.php b/administrator/components/com_associations/tmpl/association/edit.php
index 5731d8ec210cb..4f7799079f373 100644
--- a/administrator/components/com_associations/tmpl/association/edit.php
+++ b/administrator/components/com_associations/tmpl/association/edit.php
@@ -22,7 +22,9 @@
 
 HTMLHelper::_('script', 'com_associations/sidebyside.js', ['version' => 'auto', 'relative' => true]);
 HTMLHelper::_('stylesheet', 'com_associations/sidebyside.css', ['version' => 'auto', 'relative' => true]);
-HTMLHelper::_('webcomponent', 'system/joomla-core-loader.min.js', ['version' => 'auto', 'relative' => true]);
+
+$this->document->getWebAssetManager()
+	->useScript('webcomponent.core-loader');
 
 $options = [
 	'layout'   => $this->app->input->get('layout', '', 'string'),
diff --git a/administrator/components/com_categories/layouts/joomla/form/field/categoryedit.php b/administrator/components/com_categories/layouts/joomla/form/field/categoryedit.php
index 3766e3b7ab319..c395f9ed1bc2c 100644
--- a/administrator/components/com_categories/layouts/joomla/form/field/categoryedit.php
+++ b/administrator/components/com_categories/layouts/joomla/form/field/categoryedit.php
@@ -131,7 +131,9 @@
 	$attr2 .= ' onchange="Joomla.categoryHasChanged(this)"';
 
 	HTMLHelper::_('script', 'layouts/joomla/form/field/category-change.min.js', ['version' => 'auto', 'relative' => true], ['defer' => true]);
-	HTMLHelper::_('webcomponent', 'system/joomla-core-loader.min.js', ['relative' => true, 'version' => 'auto']);
+
+	Factory::getDocument()->getWebAssetManager()
+		->useScript('webcomponent.core-loader');
 
 	// Pass the element id to the javascript
 	Factory::getDocument()->addScriptOptions('category-change', $id);
@@ -144,9 +146,9 @@
 Text::script('JGLOBAL_SELECT_NO_RESULTS_MATCH');
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
-Factory::getDocument()->getWebAssetManager()->usePreset('choicesjs');
-
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-fancy-select.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->usePreset('choicesjs')
+	->useScript('webcomponent.field-fancy-select');
 ?>
 
 <joomla-field-fancy-select <?php echo $attr2; ?>><?php echo implode($html); ?></joomla-field-fancy-select>
diff --git a/administrator/components/com_config/tmpl/application/default_mail.php b/administrator/components/com_config/tmpl/application/default_mail.php
index 69774c7cc1273..80e3e1314fc1f 100644
--- a/administrator/components/com_config/tmpl/application/default_mail.php
+++ b/administrator/components/com_config/tmpl/application/default_mail.php
@@ -16,7 +16,8 @@
 defined('_JEXEC') or die;
 
 HTMLHelper::_('form.csrf');
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-send-test-mail.min.js', ['version' => 'auto', 'relative' => true]);
+$this->document->getWebAssetManager()
+	->useScript('webcomponent.field-send-test-mail');
 
 // Load JavaScript message titles
 Text::script('ERROR');
diff --git a/administrator/components/com_fields/Field/TypeField.php b/administrator/components/com_fields/Field/TypeField.php
index 8f6233d0c2b7c..a36ab0d295a58 100644
--- a/administrator/components/com_fields/Field/TypeField.php
+++ b/administrator/components/com_fields/Field/TypeField.php
@@ -77,8 +77,9 @@ function ($a, $b)
 			}
 		);
 
-		// Loadd the Joomla spinner
-		HTMLHelper::_('webcomponent', 'system/joomla-core-loader.min.js', ['relative' => true, 'version' => 'auto']);
+		// Load the Joomla spinner
+		Factory::getDocument()->getWebAssetManager()
+			->useScript('webcomponent.core-loader');
 
 		// Load the field interactivity script
 		HTMLHelper::_('script', 'com_fields/admin-field-typehaschanged.min.js', ['relative' => true, 'version' => 'auto']);
diff --git a/administrator/components/com_media/layouts/toolbar/create-folder.php b/administrator/components/com_media/layouts/toolbar/create-folder.php
index bd893aa8e635b..c810cf4893b62 100644
--- a/administrator/components/com_media/layouts/toolbar/create-folder.php
+++ b/administrator/components/com_media/layouts/toolbar/create-folder.php
@@ -9,10 +9,11 @@
 
 defined('_JEXEC') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('webcomponent.toolbar-button');
 
 $title = Text::_('COM_MEDIA_CREATE_NEW_FOLDER');
 ?>
diff --git a/administrator/components/com_media/layouts/toolbar/delete.php b/administrator/components/com_media/layouts/toolbar/delete.php
index e1ac4eea8700f..eb5e6668b1c4a 100644
--- a/administrator/components/com_media/layouts/toolbar/delete.php
+++ b/administrator/components/com_media/layouts/toolbar/delete.php
@@ -9,10 +9,11 @@
 
 defined('_JEXEC') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('webcomponent.toolbar-button');
 
 $title = Text::_('JTOOLBAR_DELETE');
 ?>
diff --git a/administrator/components/com_media/layouts/toolbar/upload.php b/administrator/components/com_media/layouts/toolbar/upload.php
index 732909b72e788..f0df001308ed3 100644
--- a/administrator/components/com_media/layouts/toolbar/upload.php
+++ b/administrator/components/com_media/layouts/toolbar/upload.php
@@ -9,10 +9,11 @@
 
 defined('_JEXEC') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('webcomponent.toolbar-button');
 
 $title = Text::_('JTOOLBAR_UPLOAD');
 ?>
diff --git a/administrator/components/com_modules/layouts/joomla/form/field/modulespositionedit.php b/administrator/components/com_modules/layouts/joomla/form/field/modulespositionedit.php
index b44a532c05833..24dc3e3f74ee2 100644
--- a/administrator/components/com_modules/layouts/joomla/form/field/modulespositionedit.php
+++ b/administrator/components/com_modules/layouts/joomla/form/field/modulespositionedit.php
@@ -72,8 +72,9 @@
 Text::script('JGLOBAL_SELECT_NO_RESULTS_MATCH');
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
-Factory::getDocument()->getWebAssetManager()->usePreset('choicesjs');
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-fancy-select.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->usePreset('choicesjs')
+	->useScript('webcomponent.field-fancy-select');
 
 ?>
 <joomla-field-fancy-select <?php echo implode(' ', $attributes); ?>><?php
diff --git a/administrator/components/com_modules/tmpl/modules/default_batch_body.php b/administrator/components/com_modules/tmpl/modules/default_batch_body.php
index 68358c9010956..4b0ee7935d8a1 100644
--- a/administrator/components/com_modules/tmpl/modules/default_batch_body.php
+++ b/administrator/components/com_modules/tmpl/modules/default_batch_body.php
@@ -31,8 +31,9 @@
 Text::script('JGLOBAL_SELECT_NO_RESULTS_MATCH');
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
-$this->document->getWebAssetManager()->usePreset('choicesjs');
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-fancy-select.min.js', ['version' => 'auto', 'relative' => true]);
+$this->document->getWebAssetManager()
+	->usePreset('choicesjs')
+	->useScript('webcomponent.field-fancy-select');
 
 ?>
 
diff --git a/build/build-modules-js/settings.json b/build/build-modules-js/settings.json
index a489e4e58010b..d09f35086108b 100644
--- a/build/build-modules-js/settings.json
+++ b/build/build-modules-js/settings.json
@@ -310,24 +310,28 @@
         },
         "provideAssets": [
           {
-            "name": "joomla-alert",
+            "name": "webcomponent.joomla-alert",
             "type": "style",
-            "uri": "joomla-alert.min.css"
+            "uri": "joomla-alert.min.css",
+            "webcomponent": true
           },
           {
-            "name": "joomla-tab",
+            "name": "webcomponent.joomla-tab",
             "type": "style",
-            "uri": "joomla-tab.min.css"
+            "uri": "joomla-tab.min.css",
+            "webcomponent": true
           },
           {
-            "name": "joomla-alert",
-            "type": "webcomponent",
-            "uri": "joomla-alert.min.js"
+            "name": "webcomponent.joomla-alert",
+            "type": "script",
+            "uri": "joomla-alert.min.js",
+            "webcomponent": true
           },
           {
-            "name": "joomla-tab",
-            "type": "webcomponent",
-            "uri": "joomla-tab.min.js"
+            "name": "webcomponent.joomla-tab",
+            "type": "script",
+            "uri": "joomla-tab.min.js",
+            "webcomponent": true
           }
         ],
         "dependencies": [],
diff --git a/build/media_source/system/joomla.asset.json b/build/media_source/system/joomla.asset.json
index 5bfc2260bd13b..714f6146d7dfe 100644
--- a/build/media_source/system/joomla.asset.json
+++ b/build/media_source/system/joomla.asset.json
@@ -83,6 +83,118 @@
         "punycode"
       ],
       "uri": "media/system/js/fields/validate.min.js"
+    },
+
+    {
+      "name": "webcomponent.field-fancy-select",
+      "type": "script",
+      "uri": "system/fields/joomla-field-fancy-select.min.js",
+      "webcomponent": true,
+      "dependencies": [
+        "choicesjs"
+      ]
+    },
+    {
+      "name": "webcomponent.field-media",
+      "type": "style",
+      "uri": "system/fields/joomla-field-media.min.css",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-media",
+      "type": "script",
+      "uri": "system/fields/joomla-field-media.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-module-order",
+      "type": "script",
+      "uri": "system/fields/joomla-field-module-order.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-permissions",
+      "type": "style",
+      "uri": "system/fields/joomla-field-permissions.min.css",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-permissions",
+      "type": "script",
+      "uri": "system/fields/joomla-field-permissions.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-send-test-mail",
+      "type": "script",
+      "uri": "system/fields/joomla-field-send-test-mail.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-simple-color",
+      "type": "style",
+      "uri": "system/fields/joomla-field-simple-color.min.css",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-simple-color",
+      "type": "script",
+      "uri": "system/fields/joomla-field-simple-color.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-subform",
+      "type": "script",
+      "uri": "system/fields/joomla-field-subform.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.field-user",
+      "type": "script",
+      "uri": "system/fields/joomla-field-user.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.core-loader",
+      "type": "script",
+      "uri": "system/joomla-core-loader.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.hidden-mail",
+      "type": "script",
+      "uri": "system/joomla-hidden-mail.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.toolbar-button",
+      "type": "script",
+      "uri": "system/joomla-toolbar-button.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.joomla-alert",
+      "type": "style",
+      "uri": "vendor/joomla-custom-elements/joomla-alert.min.css",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.joomla-alert",
+      "type": "script",
+      "uri": "vendor/joomla-custom-elements/joomla-alert.min.js",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.joomla-tab",
+      "type": "style",
+      "uri": "vendor/joomla-custom-elements/joomla-tab.min.css",
+      "webcomponent": true
+    },
+    {
+      "name": "webcomponent.joomla-tab",
+      "type": "script",
+      "uri": "vendor/joomla-custom-elements/joomla-tab.min.js",
+      "webcomponent": true
     }
   ]
 }
diff --git a/layouts/joomla/form/field/color/simple.php b/layouts/joomla/form/field/color/simple.php
index 8fe1c3f45dcf0..1ff910e6a408e 100644
--- a/layouts/joomla/form/field/color/simple.php
+++ b/layouts/joomla/form/field/color/simple.php
@@ -9,7 +9,7 @@
 
 defined('JPATH_BASE') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
 extract($displayData, null);
@@ -53,7 +53,10 @@
 $disabled = $disabled ? ' disabled' : '';
 $readonly = $readonly ? ' readonly' : '';
 
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-simple-color.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useStyle('webcomponent.field-simple-color')
+	->useScript('webcomponent.field-simple-color');
+
 ?>
 <joomla-field-simple-color text-select="<?php echo Text::_('JFIELD_COLOR_SELECT'); ?>" text-color="<?php echo Text::_('JFIELD_COLOR_VALUE'); ?>" text-close="<?php echo Text::_('JLIB_HTML_BEHAVIOR_CLOSE'); ?>" text-transparent="<?php echo Text::_('JFIELD_COLOR_TRANSPARENT'); ?>">
 	<select name="<?php echo $name; ?>" id="<?php echo $id; ?>"<?php
diff --git a/layouts/joomla/form/field/list-fancy-select.php b/layouts/joomla/form/field/list-fancy-select.php
index 5bdef777d5c9e..7ce8f34352e4a 100644
--- a/layouts/joomla/form/field/list-fancy-select.php
+++ b/layouts/joomla/form/field/list-fancy-select.php
@@ -104,8 +104,9 @@
 Text::script('JGLOBAL_SELECT_NO_RESULTS_MATCH');
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
-Factory::getDocument()->getWebAssetManager()->usePreset('choicesjs');
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-fancy-select.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->usePreset('choicesjs')
+	->useScript('webcomponent.field-fancy-select');
 
 ?>
 
diff --git a/layouts/joomla/form/field/media.php b/layouts/joomla/form/field/media.php
index 6c75ece033b17..c24cd3c2f0960 100644
--- a/layouts/joomla/form/field/media.php
+++ b/layouts/joomla/form/field/media.php
@@ -10,6 +10,7 @@
 defined('JPATH_BASE') or die;
 
 use Joomla\CMS\Component\ComponentHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Uri\Uri;
@@ -101,6 +102,11 @@
 		: 'index.php?option=com_media&amp;tmpl=component&amp;asset='
 		. $asset . '&amp;author=' . $authorId)
 	. '&amp;fieldid={field-media-id}&amp;path=local-0:/' . $folder);
+
+Factory::getDocument()->getWebAssetManager()
+	->useStyle('webcomponent.field-media')
+	->useScript('webcomponent.field-media');
+
 ?>
 <joomla-field-media class="field-media-wrapper"
 		type="image" <?php // @TODO add this attribute to the field in order to use it for all media types ?>
@@ -136,7 +142,6 @@
 		)
 	);
 
-	HTMLHelper::_('webcomponent', 'system/fields/joomla-field-media.min.js', ['version' => 'auto', 'relative' => true]);
 	Text::script('JLIB_FORM_MEDIA_PREVIEW_EMPTY', true);
 	?>
 	<?php if ($showPreview) : ?>
diff --git a/layouts/joomla/form/field/moduleorder.php b/layouts/joomla/form/field/moduleorder.php
index fcace8abf9718..b132d4197c14f 100644
--- a/layouts/joomla/form/field/moduleorder.php
+++ b/layouts/joomla/form/field/moduleorder.php
@@ -9,7 +9,7 @@
 
 defined('JPATH_BASE') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 
 extract($displayData);
 
@@ -76,6 +76,8 @@
 	$attributes['onchange'] = 'onchange="' . $onchange . '"';
 }
 
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-module-order.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('webcomponent.field-module-order');
+
 ?>
 <joomla-field-module-order <?php echo implode(' ', $attributes); ?>></joomla-field-module-order>
diff --git a/layouts/joomla/form/field/rules.php b/layouts/joomla/form/field/rules.php
index 52daaeff01d08..6f248711d617e 100644
--- a/layouts/joomla/form/field/rules.php
+++ b/layouts/joomla/form/field/rules.php
@@ -53,8 +53,11 @@
 
 // Add Javascript for permission change
 HTMLHelper::_('form.csrf');
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-permissions.min.js', ['version' => 'auto', 'relative' => true]);
-HTMLHelper::_('webcomponent', 'vendor/joomla-custom-elements/joomla-tab.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useStyle('webcomponent.field-permissions')
+	->useScript('webcomponent.field-permissions')
+	->useStyle('webcomponent.joomla-tab')
+	->useScript('webcomponent.joomla-tab');
 
 // Load JavaScript message titles
 Text::script('ERROR');
diff --git a/layouts/joomla/form/field/subform/repeatable-table.php b/layouts/joomla/form/field/subform/repeatable-table.php
index 6a2f1bd7506c8..e900690de9c0a 100644
--- a/layouts/joomla/form/field/subform/repeatable-table.php
+++ b/layouts/joomla/form/field/subform/repeatable-table.php
@@ -10,7 +10,6 @@
 defined('_JEXEC') or die;
 
 use Joomla\CMS\Factory;
-use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 
 /**
@@ -34,7 +33,8 @@
 // Add script
 if ($multiple)
 {
-	HTMLHelper::_('webcomponent', 'system/fields/joomla-field-subform.min.js', ['version' => 'auto', 'relative' => true]);
+	Factory::getDocument()->getWebAssetManager()
+		->useScript('webcomponent.field-subform');
 }
 
 // Build heading
diff --git a/layouts/joomla/form/field/subform/repeatable.php b/layouts/joomla/form/field/subform/repeatable.php
index f4b3297c92934..2eeccb910919a 100644
--- a/layouts/joomla/form/field/subform/repeatable.php
+++ b/layouts/joomla/form/field/subform/repeatable.php
@@ -9,7 +9,7 @@
 
 defined('_JEXEC') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
 /**
@@ -33,8 +33,10 @@
 // Add script
 if ($multiple)
 {
-	HTMLHelper::_('webcomponent', 'system/fields/joomla-field-subform.min.js', ['version' => 'auto', 'relative' => true]);
+	Factory::getDocument()->getWebAssetManager()
+		->useScript('webcomponent.field-subform');
 }
+
 $sublayout = empty($groupByFieldset) ? 'section' : 'section-byfieldsets';
 ?>
 
diff --git a/layouts/joomla/form/field/tag.php b/layouts/joomla/form/field/tag.php
index f0dafedbd0d2a..1e866e09840c2 100644
--- a/layouts/joomla/form/field/tag.php
+++ b/layouts/joomla/form/field/tag.php
@@ -121,8 +121,9 @@
 Text::script('JGLOBAL_SELECT_NO_RESULTS_MATCH');
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
-Factory::getDocument()->getWebAssetManager()->usePreset('choicesjs');
-HTMLHelper::_('webcomponent', 'system/fields/joomla-field-fancy-select.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->usePreset('choicesjs')
+	->useScript('webcomponent.field-fancy-select');
 
 ?>
 
diff --git a/layouts/joomla/form/field/user.php b/layouts/joomla/form/field/user.php
index 26bcabbe2824c..a050d1c490562 100644
--- a/layouts/joomla/form/field/user.php
+++ b/layouts/joomla/form/field/user.php
@@ -9,6 +9,7 @@
 
 defined('JPATH_BASE') or die;
 
+use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Uri\Uri;
@@ -50,7 +51,8 @@
 
 if (!$readonly)
 {
-	HTMLHelper::_('webcomponent', 'system/fields/joomla-field-user.min.js', ['version' => 'auto', 'relative' => true]);
+	Factory::getDocument()->getWebAssetManager()
+		->useScript('webcomponent.field-user');
 }
 
 $uri = new Uri('index.php?option=com_users&view=users&layout=modal&tmpl=component&required=0');
diff --git a/layouts/joomla/system/message.php b/layouts/joomla/system/message.php
index 41ed68f6517c2..b7de5fb23d877 100644
--- a/layouts/joomla/system/message.php
+++ b/layouts/joomla/system/message.php
@@ -10,7 +10,7 @@
 defined('JPATH_BASE') or die;
 
 use Joomla\CMS\Application\CMSApplication;
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
 $msgList = $displayData['msgList'];
@@ -28,7 +28,10 @@
 ];
 
 // Alerts progressive enhancement
-HTMLHelper::_('webcomponent', 'vendor/joomla-custom-elements/joomla-alert.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useStyle('webcomponent.joomla-alert')
+	->useScript('webcomponent.joomla-alert');
+
 ?>
 <div id="system-message-container" aria-live="polite">
 	<div id="system-message">
diff --git a/layouts/joomla/toolbar/basic.php b/layouts/joomla/toolbar/basic.php
index 7de499dd98749..15944a6e6cebf 100644
--- a/layouts/joomla/toolbar/basic.php
+++ b/layouts/joomla/toolbar/basic.php
@@ -9,11 +9,12 @@
 
 defined('JPATH_BASE') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-HTMLHelper::_('behavior.core');
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['relative' => true, 'version' => 'auto', 'detectDebug' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('core')
+	->useScript('webcomponent.toolbar-button');
 
 /**
  * @var  int     $id
diff --git a/layouts/joomla/toolbar/modal.php b/layouts/joomla/toolbar/modal.php
index fcd769caa6cb5..1f05e0639a26f 100644
--- a/layouts/joomla/toolbar/modal.php
+++ b/layouts/joomla/toolbar/modal.php
@@ -9,10 +9,12 @@
 
 defined('JPATH_BASE') or die;
 
+use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('webcomponent.toolbar-button');
 
 /**
  * Generic toolbar button layout to open a modal
@@ -57,4 +59,4 @@
 						. Text::_('COM_BANNERS_TRACKS_EXPORT') . '</button>',
 	]
 );
-?>
+
diff --git a/layouts/joomla/toolbar/popup.php b/layouts/joomla/toolbar/popup.php
index f55084bbba160..64324285b166e 100644
--- a/layouts/joomla/toolbar/popup.php
+++ b/layouts/joomla/toolbar/popup.php
@@ -9,11 +9,12 @@
 
 defined('JPATH_BASE') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\Utilities\ArrayHelper;
 
-HTMLHelper::_('behavior.core');
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('core')
+	->useScript('webcomponent.toolbar-button');
 
 /**
  * @var  int     $id
diff --git a/layouts/joomla/toolbar/standard.php b/layouts/joomla/toolbar/standard.php
index baf08d432e231..b5c1052d18178 100644
--- a/layouts/joomla/toolbar/standard.php
+++ b/layouts/joomla/toolbar/standard.php
@@ -9,10 +9,11 @@
 
 defined('JPATH_BASE') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 
-HTMLHelper::_('behavior.core');
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('core')
+	->useScript('webcomponent.toolbar-button');
 
 /**
  * @var  string  $id
diff --git a/layouts/joomla/toolbar/versions.php b/layouts/joomla/toolbar/versions.php
index c9962f03e667d..db889ad7082a9 100644
--- a/layouts/joomla/toolbar/versions.php
+++ b/layouts/joomla/toolbar/versions.php
@@ -9,12 +9,14 @@
 
 defined('JPATH_BASE') or die;
 
+use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Session\Session;
 
-HTMLHelper::_('behavior.core');
-HTMLHelper::_('webcomponent', 'system/joomla-toolbar-button.min.js', ['version' => 'auto', 'relative' => true]);
+Factory::getDocument()->getWebAssetManager()
+	->useScript('core')
+	->useScript('webcomponent.toolbar-button');
 
 /**
  * @var  string  $id
diff --git a/libraries/cms/html/email.php b/libraries/cms/html/email.php
index 11b03d710a774..407e2314635fe 100644
--- a/libraries/cms/html/email.php
+++ b/libraries/cms/html/email.php
@@ -7,7 +7,7 @@
  * @license     GNU General Public License version 2 or later; see LICENSE.txt
  */
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\String\PunycodeHelper;
 use Joomla\CMS\Uri\Uri;
@@ -57,7 +57,8 @@ public static function cloak($mail, $mailto = true, $text = '', $email = true, $
 		$domain = @$mail[1];
 
 		// Include the email cloaking script
-		HTMLHelper::_('webcomponent', 'system/joomla-hidden-mail.js', ['version' => 'auto', 'relative' => true]);
+		Factory::getDocument()->getWebAssetManager()
+			->useScript('webcomponent.hidden-mail');
 
 		return '<joomla-hidden-mail '
 			. $attribsBefore . ' is-link="'
diff --git a/libraries/cms/html/uitab.php b/libraries/cms/html/uitab.php
index ce8a2e474c254..888c9438d733a 100644
--- a/libraries/cms/html/uitab.php
+++ b/libraries/cms/html/uitab.php
@@ -9,7 +9,7 @@
 
 defined('JPATH_PLATFORM') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 
 /**
  * Utility class for the Joomla core UI Tab element.
@@ -41,7 +41,9 @@ public static function startTabSet($selector = 'myTab', $params = array())
 		if (!isset(static::$loaded[__METHOD__][$sig]))
 		{
 			// Include the custom element
-			HTMLHelper::_('webcomponent', 'vendor/joomla-custom-elements/joomla-tab.min.js', ['version' => 'auto', 'relative' => true]);
+			Factory::getDocument()->getWebAssetManager()
+				->useStyle('webcomponent.joomla-tab')
+				->useScript('webcomponent.joomla-tab');
 
 			// Setup options object
 			$opt['active'] = (isset($params['active']) && ($params['active'])) ? (string) $params['active'] : '';
diff --git a/libraries/src/Document/Renderer/Html/MetasRenderer.php b/libraries/src/Document/Renderer/Html/MetasRenderer.php
index 6d04b639276bf..7ff33e91080ab 100644
--- a/libraries/src/Document/Renderer/Html/MetasRenderer.php
+++ b/libraries/src/Document/Renderer/Html/MetasRenderer.php
@@ -14,7 +14,6 @@
 use Joomla\CMS\Document\DocumentRenderer;
 use Joomla\CMS\Factory;
 use Joomla\CMS\Helper\TagsHelper;
-use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface;
 use Joomla\Utilities\ArrayHelper;
 
@@ -45,24 +44,32 @@ public function render($head, $params = array(), $content = null)
 			$this->_doc->_metaTags['name']['tags'] = implode(', ', $tagsHelper->getTagNames($this->_doc->_metaTags['name']['tags']));
 		}
 
-		if ($this->_doc->getScriptOptions())
-		{
-			HTMLHelper::_('behavior.core');
-		}
-
 		/** @var \Joomla\CMS\Application\CMSApplication $app */
 		$app = Factory::getApplication();
 		$wa  = $this->_doc->getWebAssetManager();
+		$wc  = $this->_doc->getScriptOptions('webcomponents');
+
+		if ($this->_doc->getScriptOptions())
+		{
+			$wa->useScript('core');
+		}
 
-		// Check for AttachBehavior
+		// Check for AttachBehavior and web components
 		foreach ($wa->getAssets('script', true) as $asset)
 		{
 			if ($asset instanceof WebAssetAttachBehaviorInterface)
 			{
 				$asset->onAttachCallback($this->_doc);
 			}
+
+			if ($asset->getOption('webcomponent'))
+			{
+				$wc[] = $asset->getUri();
+			}
 		}
 
+		$this->_doc->addScriptOptions('webcomponents', $wc);
+
 		// Trigger the onBeforeCompileHead event
 		$app->triggerEvent('onBeforeCompileHead');
 
diff --git a/libraries/src/Document/Renderer/Html/ScriptsRenderer.php b/libraries/src/Document/Renderer/Html/ScriptsRenderer.php
index 61c5982a761b4..a1a38f864dc0c 100644
--- a/libraries/src/Document/Renderer/Html/ScriptsRenderer.php
+++ b/libraries/src/Document/Renderer/Html/ScriptsRenderer.php
@@ -52,6 +52,11 @@ public function render($head, $params = array(), $content = null)
 		{
 			$asset = $item instanceof WebAssetItemInterface ? $item : null;
 
+			if ($asset && $asset->getOption('webcomponent'))
+			{
+				continue;
+			}
+
 			if ($asset)
 			{
 				$src = $asset->getUri();
diff --git a/libraries/src/HTML/HTMLHelper.php b/libraries/src/HTML/HTMLHelper.php
index ac714d75492a4..cd6962806a4a6 100644
--- a/libraries/src/HTML/HTMLHelper.php
+++ b/libraries/src/HTML/HTMLHelper.php
@@ -750,6 +750,10 @@ public static function script($file, $options = array(), $attribs = array())
 	 * @see     HTMLHelper::script()
 	 *
 	 * @return  void
+	 *
+	 * @deprecated 4.0
+	 *
+	 * @TODO: Remove the method after installation will use AssetManager
 	 */
 	public static function webcomponent(string $file, array $options = [])
 	{
diff --git a/plugins/editors/codemirror/layouts/editors/codemirror/element.php b/plugins/editors/codemirror/layouts/editors/codemirror/element.php
index 18e9a83296701..b1206db860be3 100644
--- a/plugins/editors/codemirror/layouts/editors/codemirror/element.php
+++ b/plugins/editors/codemirror/layouts/editors/codemirror/element.php
@@ -10,6 +10,7 @@
 // No direct access
 defined('_JEXEC') or die;
 
+use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Uri\Uri;
 
@@ -34,9 +35,14 @@
 $editor          = 'editor="' . ltrim(HTMLHelper::_('script',  $basePath . 'lib/codemirror' . $extJS, ['version' => 'auto', 'pathOnly' => true]), '/') . '"';
 $addons          = 'addons="' . ltrim(HTMLHelper::_('script', $basePath . 'lib/addons' . $extJS, ['version' => 'auto', 'pathOnly' => true]), '/') . '"';
 
-HTMLHelper::_('stylesheet', $basePath . 'lib/codemirror' . $extCSS, array('version' => 'auto'));
-HTMLHelper::_('stylesheet', $basePath . 'lib/addons' . $extCSS, array('version' => 'auto'));
-HTMLHelper::_('webcomponent', 'plg_editors_codemirror/joomla-editor-codemirror.min.js', array('version' => 'auto', 'relative' => true));
+Factory::getDocument()->getWebAssetManager()
+	->registerAndUseStyle('codemirror.lib.main', $basePath . 'lib/codemirror' . $extCSS)
+	->registerAndUseStyle('codemirror.lib.addons', $basePath . 'lib/addons' . $extCSS, [], [], ['codemirror.lib.main'])
+	->registerAndUseScript(
+		'webcomponent.editor-codemirror',
+		'plg_editors_codemirror/joomla-editor-codemirror.min.js',
+		['webcomponent' => true]
+	);
 
 ?>
 <joomla-editor-codemirror <?php echo $editor . ' ' . $addons . ' ' . $modPath . ' ' . $fsCombo . ' ' . $option; ?>>
diff --git a/plugins/editors/none/none.php b/plugins/editors/none/none.php
index acb3e0b4c1ca7..90a0d1bab5bef 100644
--- a/plugins/editors/none/none.php
+++ b/plugins/editors/none/none.php
@@ -9,7 +9,7 @@
 
 defined('_JEXEC') or die;
 
-use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Factory;
 use Joomla\CMS\Layout\LayoutHelper;
 use Joomla\CMS\Plugin\CMSPlugin;
 use Joomla\Event\Event;
@@ -59,7 +59,12 @@ public function onDisplay($name, $content, $width, $height, $col, $row, $buttons
 
 		$readonly = !empty($params['readonly']) ? ' readonly disabled' : '';
 
-		HTMLHelper::_('webcomponent', 'plg_editors_none/joomla-editor-none.min.js', ['version' => 'auto', 'relative' => true]);
+		Factory::getDocument()->getWebAssetManager()
+			->registerAndUseScript(
+				'webcomponent.editor-none',
+				'plg_editors_none/joomla-editor-none.min.js',
+				['webcomponent' => true]
+			);
 
 		return '<joomla-editor-none>'
 			. '<textarea name="' . $name . '" id="' . $id . '" cols="' . $col . '" rows="' . $row