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 <[email protected]>
alphagov · Oct 10, 2024 · 4dc6be9 · 4dc6be9
1 parent 74c8102
commit 4dc6be9
Showing 1 changed file with 15 additions and 2 deletions.
diff --git 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()