From 086734c7e440b02872fa1d436c983ebe19f1d19d Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Thu, 10 Oct 2024 09:53:57 +0100
Subject: [PATCH] Use `get` for `$root` in `GOVUKFrontendComponent`

Allows Typescript user to work around the lack of types
in GOVUKFrontend package, Typescript is not aware of $root
in components that extend GOVUKFrontendComponent

Co-authored-by: Romaric Pascal
<romaric.pascal@digital.cabinet-office.gov.uk>
---
 .../src/govuk/govuk-frontend-component.mjs      | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs b/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs
index 3c0141305d..2e389ddd9a 100644
--- a/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs
+++ b/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs
@@ -15,11 +15,24 @@ export class GOVUKFrontendComponent {
    */
   static elementType = HTMLElement
 
+  // allows Typescript user to work around the lack of types
+  // in GOVUKFrontend package, Typescript is not aware of $root
+  // in components that extend GOVUKFrontendComponent
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root
+  }
+
   /**
    * @protected
    * @type {RootElementType}
    */
-  $root
+  _$root
 
   /**
    * Constructs a new component, validating that GOV.UK Frontend is supported
@@ -51,7 +64,7 @@ export class GOVUKFrontendComponent {
         expectedType: childConstructor.elementType.name
       })
     } else {
-      this.$root = /** @type {RootElementType} */ ($root)
+      this._$root = /** @type {RootElementType} */ ($root)
     }
 
     childConstructor.checkSupport()