move all dom interaction to connectedCallback

packages/client/src/helpers/custom-link-element.ts

@@ -8,9 +8,10 @@ export class CustomLinkElement extends HTMLElement {
         this.anchor.href = this.getAttribute("href") || "";
         this.anchor.innerHTML = this.innerHTML;
         this.anchor.classList.add(...this.classList);
+    }
 
+    connectedCallback() {
         this.classList.remove(...this.classList);
-
         this.innerHTML = "";
         this.appendChild(this.anchor);
     }

packages/client/src/views/breadcrumb.ts

@@ -1,10 +1,9 @@
 import { LenkeMedSporingElement } from "./lenke-med-sporing";
 
 class Breadcrumb extends LenkeMedSporingElement {
-    constructor() {
-        super();
-    }
     connectedCallback() {
+        super.connectedCallback();
+
         if (this.getAttribute("data-handle-in-app") !== null) {
             this.addEventListener("click", (e) => {
                 e.preventDefault();

packages/client/src/views/context-link.ts

@@ -47,6 +47,8 @@ class ContextLink extends CustomLinkElement {
     };
 
     connectedCallback() {
+        super.connectedCallback();
+
         window.addEventListener("activecontext", this.handleActiveContext);
         this.addEventListener("click", this.handleClick);
     }

packages/client/src/views/decorator-utils.ts

@@ -6,17 +6,8 @@ import { LanguageSelector } from "./language-selector";
 import i18n from "../i18n";
 
 class DecoratorUtils extends HTMLElement {
-    languageSelector: LanguageSelector;
-    breadcrumbs: HTMLElement;
-
-    constructor() {
-        super();
-
-        this.languageSelector = this.querySelector(
-            ":scope > div > language-selector",
-        )!;
-        this.breadcrumbs = this.querySelector(":scope > div > :first-child")!;
-    }
+    languageSelector!: LanguageSelector;
+    breadcrumbs!: HTMLElement;
 
     update = () => {
         const { availableLanguages, language, breadcrumbs, utilsBackground } =
@@ -42,6 +33,11 @@ class DecoratorUtils extends HTMLElement {
     }
 
     connectedCallback() {
+        this.languageSelector = this.querySelector(
+            ":scope > div > language-selector",
+        )!;
+        this.breadcrumbs = this.querySelector(":scope > div > :first-child")!;
+
         window.addEventListener("paramsupdated", this.update);
         setTimeout(this.update, 0);
     }

packages/client/src/views/language-selector.ts

@@ -9,9 +9,9 @@ declare global {
 }
 
 export class LanguageSelector extends HTMLElement {
-    menu;
-    container: HTMLDivElement;
-    button: HTMLButtonElement;
+    menu!: HTMLElement;
+    container!: HTMLDivElement;
+    button!: HTMLButtonElement;
     #open = false;
     options: (HTMLAnchorElement | HTMLButtonElement)[] = [];
     #language?: Language;
@@ -81,17 +81,13 @@ export class LanguageSelector extends HTMLElement {
         );
     }
 
-    constructor() {
-        super();
-
-        this.button = this.querySelector(`.${cls.button}`) as HTMLButtonElement;
+    connectedCallback() {
+        this.button = this.querySelector(`.${cls.button}`)!;
         this.container = this.querySelector(`.${cls.languageSelector}`)!;
         this.menu = document.createElement("ul");
         this.menu.classList.add(cls.menu, cls.hidden);
         this.container.appendChild(this.menu);
-    }
 
-    connectedCallback() {
         this.button.addEventListener("click", () => {
             this.open = !this.#open;
         });

packages/client/src/views/lenke-med-sporing.ts

@@ -4,8 +4,8 @@ import { CustomLinkElement } from "../helpers/custom-link-element";
 import { amplitudeEvent } from "../analytics/amplitude";
 
 export class LenkeMedSporingElement extends CustomLinkElement {
-    constructor() {
-        super();
+    connectedCallback() {
+        super.connectedCallback();
 
         const rawEventArgs = this.getAttribute("data-analytics-event-args");
         const eventArgs = tryParse<AnalyticsEventArgs, null>(

packages/client/src/views/loader.ts

@@ -1,9 +1,7 @@
 import html from "decorator-shared/html";
 
 export class Loader extends HTMLElement {
-    constructor() {
-        super();
-
+    connectedCallback() {
         const shadowRoot = this.attachShadow({ mode: "open" });
         const title = this.getAttribute("title") ?? "Laster forhåndsvisning";
 

packages/client/src/views/skip-link.ts

@@ -29,7 +29,9 @@ class SkipLinkElement extends LenkeMedSporingElement {
         setTimeout(() => observer.disconnect(), DEFERRED_UPDATE_TIME);
     }
 
-    private connectedCallback() {
+    connectedCallback() {
+        super.connectedCallback();
+
         this.updateDisplay();
         if (!this.hasMainContent()) {
             this.deferredUpdate();

packages/client/src/views/sticky.ts

@@ -3,16 +3,12 @@ import cls from "decorator-client/src/styles/sticky.module.css";
 class Sticky extends HTMLElement {
     // This element is positioned relative to the top of the document and should
     // update when the scroll position changes.
-    private readonly absoluteElement: HTMLElement = this.querySelector(
-        `.${cls.absoluteWrapper}`,
-    )!;
+    private absoluteElement!: HTMLElement;
 
     // This element is nested under the absolute element, and is set to a fixed
     // position when the header is fully scrolled into view. This prevents the
     // header from sometimes moving erratically when the user is scrolling upwards.
-    private readonly fixedElement: HTMLElement = this.querySelector(
-        `.${cls.fixedWrapper}`,
-    )!;
+    private fixedElement!: HTMLElement;
 
     // Why we use two levels of positioning in this implementation:
     // 1. Using only fixed positioning (and hiding the header with a negative top position)
@@ -159,11 +155,21 @@ class Sticky extends HTMLElement {
     };
 
     connectedCallback() {
-        if (!this.absoluteElement || !this.fixedElement) {
+        const fixedElement = this.querySelector(
+            `.${cls.fixedWrapper}`,
+        ) as HTMLElement | null;
+        const absoluteElement = this.querySelector(
+            `.${cls.absoluteWrapper}`,
+        ) as HTMLElement | null;
+
+        if (!absoluteElement || !fixedElement) {
             console.error("Required elements not found!");
             return;
         }
 
+        this.fixedElement = fixedElement;
+        this.absoluteElement = absoluteElement;
+
         window.addEventListener("scroll", this.calculateAndUpdatePosition);
         window.addEventListener("resize", this.calculateAndUpdatePosition);
 

packages/client/src/views/user-menu.ts

@@ -11,21 +11,17 @@ const Loader = () => html`
 `;
 
 class UserMenu extends HTMLElement {
-    constructor() {
-        super();
-        this.innerHTML = Loader().render(window.__DECORATOR_DATA__.params);
-    }
-
     private onAuthUpdated = (e: CustomEvent<CustomEvents["authupdated"]>) => {
         this.classList.add(cls.userMenuContainer);
         this.innerHTML = e.detail.usermenuHtml;
     };
 
-    private connectedCallback() {
+    connectedCallback() {
+        this.innerHTML = Loader().render(window.__DECORATOR_DATA__.params);
         window.addEventListener("authupdated", this.onAuthUpdated);
     }
 
-    private disconnectedCallback() {
+    disconnectedCallback() {
         window.removeEventListener("authupdated", this.onAuthUpdated);
     }
 }