diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
index ba0602b0db..10aaf05ff8 100644
--- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
+++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -19,9 +19,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class Accordion extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {AccordionConfig}
@@ -116,20 +113,10 @@ export class Accordion extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Accordion,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       Accordion.defaults,
       config,
-      normaliseDataset(Accordion, $root.dataset)
+      normaliseDataset(Accordion, this.$root.dataset)
     )
 
     this.i18n = new I18n(this.config.i18n)
diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
index 2295292604..93d974aa89 100644
--- a/packages/govuk-frontend/src/govuk/components/button/button.mjs
+++ b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -1,6 +1,5 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
@@ -11,9 +10,6 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
  * @preserve
  */
 export class Button extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {ButtonConfig}
@@ -33,20 +29,10 @@ export class Button extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Button,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       Button.defaults,
       config,
-      normaliseDataset(Button, $root.dataset)
+      normaliseDataset(Button, this.$root.dataset)
     )
 
     this.$root.addEventListener('keydown', (event) => this.handleKeyDown(event))
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
index a7eb3f16e6..0a9d60ee72 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -22,9 +22,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class CharacterCount extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $textarea
 
@@ -68,15 +65,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: CharacterCount,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $textarea = $root.querySelector('.govuk-js-character-count')
+    const $textarea = this.$root.querySelector('.govuk-js-character-count')
     if (
       !(
         $textarea instanceof HTMLTextAreaElement ||
@@ -92,7 +81,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
     }
 
     // Read config set using dataset ('data-' values)
-    const datasetConfig = normaliseDataset(CharacterCount, $root.dataset)
+    const datasetConfig = normaliseDataset(CharacterCount, this.$root.dataset)
 
     // To ensure data-attributes take complete precedence, even if they change
     // the type of count, we need to reset the `maxlength` and `maxwords` from
@@ -124,13 +113,12 @@ export class CharacterCount extends GOVUKFrontendComponent {
 
     this.i18n = new I18n(this.config.i18n, {
       // Read the fallback if necessary rather than have it set in the defaults
-      locale: closestAttributeValue($root, 'lang')
+      locale: closestAttributeValue(this.$root, 'lang')
     })
 
     // Determine the limit attribute (characters or words)
     this.maxLength = this.config.maxwords ?? this.config.maxlength ?? Infinity
 
-    this.$root = $root
     this.$textarea = $textarea
 
     const textareaDescriptionId = `${this.$textarea.id}-info`
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
index 07d6d2c040..36e51e5f5c 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -7,9 +7,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class Checkboxes extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $inputs
 
@@ -30,15 +27,7 @@ export class Checkboxes extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Checkboxes,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $inputs = $root.querySelectorAll('input[type="checkbox"]')
+    const $inputs = this.$root.querySelectorAll('input[type="checkbox"]')
     if (!$inputs.length) {
       throw new ElementError({
         component: Checkboxes,
@@ -46,7 +35,6 @@ export class Checkboxes extends GOVUKFrontendComponent {
       })
     }
 
-    this.$root = $root
     this.$inputs = $inputs
 
     this.$inputs.forEach(($input) => {
diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
index 0fba96e062..cab0982feb 100644
--- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
+++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -4,7 +4,6 @@ import {
   setFocus
 } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -16,9 +15,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class ErrorSummary extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {ErrorSummaryConfig}
@@ -32,20 +28,10 @@ export class ErrorSummary extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: ErrorSummary,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       ErrorSummary.defaults,
       config,
-      normaliseDataset(ErrorSummary, $root.dataset)
+      normaliseDataset(ErrorSummary, this.$root.dataset)
     )
 
     /**
diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs
index 6b1a2722cd..8f50119657 100644
--- a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs
+++ b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs
@@ -10,9 +10,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class ExitThisPage extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {ExitThisPageConfig}
@@ -81,15 +78,7 @@ export class ExitThisPage extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: ExitThisPage,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $button = $root.querySelector('.govuk-exit-this-page__button')
+    const $button = this.$root.querySelector('.govuk-exit-this-page__button')
     if (!($button instanceof HTMLAnchorElement)) {
       throw new ElementError({
         component: ExitThisPage,
@@ -102,11 +91,10 @@ export class ExitThisPage extends GOVUKFrontendComponent {
     this.config = mergeConfigs(
       ExitThisPage.defaults,
       config,
-      normaliseDataset(ExitThisPage, $root.dataset)
+      normaliseDataset(ExitThisPage, this.$root.dataset)
     )
 
     this.i18n = new I18n(this.config.i18n)
-    this.$root = $root
     this.$button = $button
 
     const $skiplinkButton = document.querySelector(
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
index 2db72d65fb..1609f93b13 100644
--- a/packages/govuk-frontend/src/govuk/components/header/header.mjs
+++ b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -8,9 +8,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class Header extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $menuButton
 
@@ -45,16 +42,7 @@ export class Header extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!$root) {
-      throw new ElementError({
-        component: Header,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-    const $menuButton = $root.querySelector('.govuk-js-header-toggle')
+    const $menuButton = this.$root.querySelector('.govuk-js-header-toggle')
 
     // Headers don't necessarily have a navigation. When they don't, the menu
     // toggle won't be rendered by our macro (or may be omitted when writing
diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
index 5bb1930149..1a90e4c460 100644
--- a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
+++ b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
@@ -1,6 +1,5 @@
 import { mergeConfigs, setFocus } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -9,9 +8,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class NotificationBanner extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {NotificationBannerConfig}
@@ -25,20 +21,10 @@ export class NotificationBanner extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: NotificationBanner,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       NotificationBanner.defaults,
       config,
-      normaliseDataset(NotificationBanner, $root.dataset)
+      normaliseDataset(NotificationBanner, this.$root.dataset)
     )
 
     /**
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs b/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs
index 546097571f..7fa60a45f1 100644
--- a/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs
+++ b/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs
@@ -11,9 +11,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class PasswordInput extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {PasswordInputConfig}
@@ -43,17 +40,9 @@ export class PasswordInput extends GOVUKFrontendComponent {
    * @param {PasswordInputConfig} [config] - Password input config
    */
   constructor($root, config = {}) {
-    super()
-
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: PasswordInput,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
+    super($root)
 
-    const $input = $root.querySelector('.govuk-js-password-input-input')
+    const $input = this.$root.querySelector('.govuk-js-password-input-input')
     if (!($input instanceof HTMLInputElement)) {
       throw new ElementError({
         component: PasswordInput,
@@ -69,7 +58,7 @@ export class PasswordInput extends GOVUKFrontendComponent {
       )
     }
 
-    const $showHideButton = $root.querySelector(
+    const $showHideButton = this.$root.querySelector(
       '.govuk-js-password-input-toggle'
     )
     if (!($showHideButton instanceof HTMLButtonElement)) {
@@ -87,19 +76,18 @@ export class PasswordInput extends GOVUKFrontendComponent {
       )
     }
 
-    this.$root = $root
     this.$input = $input
     this.$showHideButton = $showHideButton
 
     this.config = mergeConfigs(
       PasswordInput.defaults,
       config,
-      normaliseDataset(PasswordInput, $root.dataset)
+      normaliseDataset(PasswordInput, this.$root.dataset)
     )
 
     this.i18n = new I18n(this.config.i18n, {
       // Read the fallback if necessary rather than have it set in the defaults
-      locale: closestAttributeValue($root, 'lang')
+      locale: closestAttributeValue(this.$root, 'lang')
     })
 
     // Show the toggle button element
diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
index 23ef519b05..d8ece9a966 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
+++ b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -7,9 +7,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class Radios extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $inputs
 
@@ -30,15 +27,7 @@ export class Radios extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Radios,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $inputs = $root.querySelectorAll('input[type="radio"]')
+    const $inputs = this.$root.querySelectorAll('input[type="radio"]')
     if (!$inputs.length) {
       throw new ElementError({
         component: Radios,
@@ -46,7 +35,6 @@ export class Radios extends GOVUKFrontendComponent {
       })
     }
 
-    this.$root = $root
     this.$inputs = $inputs
 
     this.$inputs.forEach(($input) => {
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs
index 4c6a3270e5..529e14f25c 100644
--- a/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs
+++ b/packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs
@@ -8,9 +8,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class ServiceNavigation extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $menuButton
 
@@ -39,19 +36,9 @@ export class ServiceNavigation extends GOVUKFrontendComponent {
    * @param {Element | null} $root - HTML element to use for header
    */
   constructor($root) {
-    super()
-
-    if (!$root) {
-      throw new ElementError({
-        component: ServiceNavigation,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
+    super($root)
 
-    const $menuButton = $root.querySelector(
+    const $menuButton = this.$root.querySelector(
       '.govuk-js-service-navigation-toggle'
     )
 
diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
index 912b80c514..5dd9ce8bf5 100644
--- a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
+++ b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
@@ -6,10 +6,10 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * Skip link component
  *
  * @preserve
+ * @augments GOVUKFrontendComponent<HTMLAnchorElement>
  */
 export class SkipLink extends GOVUKFrontendComponent {
-  /** @private */
-  $root
+  static elementType = HTMLAnchorElement
 
   /**
    * @param {Element | null} $root - HTML element to use for skip link
@@ -20,17 +20,6 @@ export class SkipLink extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!($root instanceof HTMLAnchorElement)) {
-      throw new ElementError({
-        component: SkipLink,
-        element: $root,
-        expectedType: 'HTMLAnchorElement',
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     const hash = this.$root.hash
     const href = this.$root.getAttribute('href') ?? ''
 
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
index a316d47ff4..271a32cadf 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -8,9 +8,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class Tabs extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $tabs
 
@@ -47,15 +44,7 @@ export class Tabs extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!$root) {
-      throw new ElementError({
-        component: Tabs,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $tabs = $root.querySelectorAll('a.govuk-tabs__tab')
+    const $tabs = this.$root.querySelectorAll('a.govuk-tabs__tab')
     if (!$tabs.length) {
       throw new ElementError({
         component: Tabs,
@@ -63,7 +52,6 @@ export class Tabs extends GOVUKFrontendComponent {
       })
     }
 
-    this.$root = $root
     this.$tabs = $tabs
 
     // Save bound functions so we can remove event listeners during teardown