14. september 2025Norsk

En dybdegående titt på livssyklusen til web components, som dekker opprettelse, tilkobling, attributtendringer og frakobling av egendefinerte elementer. Lær å bygge robuste og gjenbrukbare komponenter for moderne webapplikasjoner.

Livssyklusen til Web Components: Mestre opprettelse og administrasjon av egendefinerte elementer

Web components er et kraftig verktøy for å bygge gjenbrukbare og innkapslede UI-elementer i moderne webutvikling. Å forstå livssyklusen til en web component er avgjørende for å skape robuste, vedlikeholdbare og effektive applikasjoner. Denne omfattende guiden utforsker de ulike stadiene i livssyklusen til en web component, med detaljerte forklaringer og praktiske eksempler for å hjelpe deg med å mestre opprettelse og administrasjon av egendefinerte elementer.

Hva er Web Components?

Web components er et sett med webplattform-API-er som lar deg lage gjenbrukbare, egendefinerte HTML-elementer med innkapslet stil og atferd. De består av tre hovedteknologier:

Custom Elements (Egendefinerte elementer): Lar deg definere dine egne HTML-tagger og deres tilknyttede JavaScript-logikk.
Shadow DOM: Tilbyr innkapsling ved å opprette et separat DOM-tre for komponenten, som beskytter den mot stilene og skriptene i det globale dokumentet.
HTML Templates (HTML-maler): Lar deg definere gjenbrukbare HTML-fragmenter som effektivt kan klones og settes inn i DOM-en.

Web components fremmer gjenbruk av kode, forbedrer vedlikeholdbarheten og gjør det mulig å bygge komplekse brukergrensesnitt på en modulær og organisert måte. De støttes av alle store nettlesere og kan brukes med ethvert JavaScript-rammeverk eller -bibliotek, eller til og med helt uten et rammeverk.

Livssyklusen til en Web Component

Livssyklusen til en web component definerer de ulike stadiene et egendefinert element går gjennom, fra det opprettes til det fjernes fra DOM-en. Ved å forstå disse stadiene kan du utføre spesifikke handlinger til rett tid, og dermed sikre at komponenten din oppfører seg korrekt og effektivt.

De sentrale livssyklusmetodene er:

constructor(): Konstruktøren kalles når elementet opprettes eller oppgraderes. Det er her du initialiserer komponentens tilstand og oppretter dens shadow DOM (hvis nødvendig).
connectedCallback(): Kalles hver gang det egendefinerte elementet kobles til dokumentets DOM. Dette er et godt sted for å utføre oppsettsoppgaver, som å hente data, legge til hendelseslyttere eller rendre komponentens initiell innhold.
disconnectedCallback(): Kalles hver gang det egendefinerte elementet kobles fra dokumentets DOM. Det er her du bør rydde opp i ressurser, som å fjerne hendelseslyttere eller avbryte tidtakere, for å forhindre minnelekkasjer.
attributeChangedCallback(name, oldValue, newValue): Kalles hver gang et av det egendefinerte elementets attributter legges til, fjernes, oppdateres eller erstattes. Dette lar deg respondere på endringer i komponentens attributter og oppdatere dens atferd deretter. Du må spesifisere hvilke attributter du vil observere ved å bruke den statiske getteren observedAttributes.
adoptedCallback(): Kalles hver gang det egendefinerte elementet flyttes til et nytt dokument. Dette er relevant når man jobber med iframes eller flytter elementer mellom forskjellige deler av applikasjonen.

En dypere titt på hver livssyklusmetode

1. constructor()

Konstruktøren er den første metoden som kalles når en ny instans av det egendefinerte elementet ditt opprettes. Det er det ideelle stedet for å:

Initialisere komponentens interne tilstand.
Opprette Shadow DOM ved hjelp av this.attachShadow({ mode: 'open' }) eller this.attachShadow({ mode: 'closed' }). mode bestemmer om Shadow DOM er tilgjengelig fra JavaScript utenfor komponenten (open) eller ikke (closed). Det anbefales generelt å bruke open for enklere feilsøking.
Binde hendelseshåndteringsmetoder til komponentinstansen (ved hjelp av this.methodName = this.methodName.bind(this)) for å sikre at this refererer til komponentinstansen inne i håndtereren.

Viktige hensyn for konstruktøren:

Du bør not utføre noen DOM-manipulasjon i konstruktøren. Elementet er ennå ikke fullstendig koblet til DOM-en, og forsøk på å endre det kan føre til uventet atferd. Bruk connectedCallback for DOM-manipulasjon.
Unngå å bruke attributter i konstruktøren. Attributter er kanskje ikke tilgjengelige ennå. Bruk heller connectedCallback eller attributeChangedCallback.
Kall super() først. Dette er obligatorisk hvis du utvider fra en annen klasse (vanligvis HTMLElement).

Eksempel:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // Opprett en shadow root
    this.shadow = this.attachShadow({mode: 'open'});
    this.message = "Hello, world!";
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.message);
  }
}

2. connectedCallback()

connectedCallback kalles når det egendefinerte elementet kobles til dokumentets DOM. Dette er det primære stedet for å:

Hente data fra et API.
Legge til hendelseslyttere på komponenten eller dens Shadow DOM.
Rendre komponentens initiell innhold inn i Shadow DOM.
Observere attributtendringer hvis umiddelbar observasjon i konstruktøren ikke er mulig.

Eksempel:


class MyCustomElement extends HTMLElement {
  // ... constructor ...

  connectedCallback() {
    // Opprett et knappeelement
    const button = document.createElement('button');
    button.textContent = 'Click me!';
    button.addEventListener('click', this.handleClick);
    this.shadow.appendChild(button);

    // Hent data (eksempel)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
        this.render(); // Kall en render-metode for å oppdatere UI-et
      });
  }

  render() {
    // Oppdater Shadow DOM basert på dataene
    const dataElement = document.createElement('p');
    dataElement.textContent = JSON.stringify(this.data);
    this.shadow.appendChild(dataElement);
  }

  handleClick() {
      alert("Button clicked!");
  }
}

3. disconnectedCallback()

disconnectedCallback kalles når det egendefinerte elementet kobles fra dokumentets DOM. Dette er avgjørende for å:

Fjerne hendelseslyttere for å forhindre minnelekkasjer.
Avbryte eventuelle tidtakere eller intervaller.
Frigjøre eventuelle ressurser som komponenten holder på.

Eksempel:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback ...

  disconnectedCallback() {
    // Fjern hendelseslytteren
    this.shadow.querySelector('button').removeEventListener('click', this.handleClick);

    // Avbryt eventuelle tidtakere (eksempel)
    if (this.timer) {
      clearInterval(this.timer);
    }

    console.log('Component disconnected from the DOM.');
  }
}

4. attributeChangedCallback(name, oldValue, newValue)

attributeChangedCallback kalles hver gang et attributt på det egendefinerte elementet endres, men kun for attributter som er listet i den statiske getteren observedAttributes. Denne metoden er essensiell for å:

Reagere på endringer i attributtverdier og oppdatere komponentens atferd eller utseende.
Validere attributtverdier.

Nøkkelaspekter:

Du må definere en statisk getter kalt observedAttributes som returnerer en matrise med attributtnavn du vil observere.
attributeChangedCallback vil kun bli kalt for attributter som er listet i observedAttributes.
Metoden mottar tre argumenter: name for attributtet som ble endret, oldValue (gammel verdi), og newValue (ny verdi).
oldValue vil være null hvis attributtet nettopp ble lagt til.

Eksempel:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback, disconnectedCallback ...

  static get observedAttributes() {
    return ['message', 'data-count']; // Observer 'message'- og 'data-count'-attributtene
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'message') {
      this.message = newValue; // Oppdater den interne tilstanden
      this.renderMessage(); // Re-render meldingen
    } else if (name === 'data-count') {
      const count = parseInt(newValue, 10);
      if (!isNaN(count)) {
        this.count = count; // Oppdater den interne telleren
        this.renderCount(); // Re-render telleren
      } else {
        console.error('Invalid data-count attribute value:', newValue);
      }
    }
  }

  renderMessage() {
    // Oppdater meldingsvisningen i Shadow DOM
    let messageElement = this.shadow.querySelector('.message');

    if (!messageElement) {
      messageElement = document.createElement('p');
      messageElement.classList.add('message');
      this.shadow.appendChild(messageElement);
    }

    messageElement.textContent = this.message;
  }

  renderCount(){
    let countElement = this.shadow.querySelector('.count');

    if(!countElement){
        countElement = document.createElement('p');
        countElement.classList.add('count');
        this.shadow.appendChild(countElement);
    }

    countElement.textContent = `Count: ${this.count}`;
  }
}

Effektiv bruk av attributeChangedCallback:

Valider input: Bruk callback-en til å validere den nye verdien for å sikre dataintegritet.
Debounce oppdateringer: For beregningsmessig krevende oppdateringer, vurder å bruke "debouncing" på hendelseshåndtereren for attributtendringer for å unngå overdreven re-rendring.
Vurder alternativer: For komplekse data, vurder å bruke egenskaper (properties) i stedet for attributter og håndter endringer direkte i egenskapens setter.

5. adoptedCallback()

adoptedCallback kalles når det egendefinerte elementet flyttes til et nytt dokument (f.eks. når det flyttes fra én iframe til en annen). Dette er en mindre brukt livssyklusmetode, men det er viktig å være klar over den når man jobber med mer komplekse scenarioer som involverer dokumentkontekster.

Eksempel:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback, disconnectedCallback, attributeChangedCallback ...

  adoptedCallback() {
    console.log('Component adopted into a new document.');
    // Utfør nødvendige justeringer når komponenten flyttes til et nytt dokument
    // Dette kan innebære å oppdatere referanser til eksterne ressurser eller gjenopprette tilkoblinger.
  }
}

Definere et egendefinert element

Når du har definert klassen for det egendefinerte elementet ditt, må du registrere den hos nettleseren ved hjelp av customElements.define():


customElements.define('my-custom-element', MyCustomElement);

Det første argumentet er taggnavnet for det egendefinerte elementet (f.eks. 'my-custom-element'). Taggnavnet må inneholde en bindestrek (-) for å unngå konflikter med standard HTML-elementer.

Det andre argumentet er klassen som definerer atferden til det egendefinerte elementet (f.eks. MyCustomElement).

Etter å ha definert det egendefinerte elementet, kan du bruke det i HTML-koden din som ethvert annet HTML-element:


<my-custom-element message="Hello from attribute!" data-count="10"></my-custom-element>

Beste praksis for håndtering av Web Component-livssyklusen

Hold konstruktøren lett: Unngå å utføre DOM-manipulasjon eller komplekse beregninger i konstruktøren. Bruk connectedCallback til slike oppgaver.
Rydd opp i ressurser i disconnectedCallback: Fjern alltid hendelseslyttere, avbryt tidtakere og frigjør ressurser i disconnectedCallback for å forhindre minnelekkasjer.
Bruk observedAttributes med omhu: Observer kun attributter du faktisk trenger å reagere på. Å observere unødvendige attributter kan påvirke ytelsen.
Vurder å bruke et rendringsbibliotek: For komplekse UI-oppdateringer, vurder å bruke et rendringsbibliotek som LitElement eller uhtml for å forenkle prosessen og forbedre ytelsen.
Test komponentene dine grundig: Skriv enhetstester for å sikre at komponentene dine oppfører seg korrekt gjennom hele livssyklusen.

Eksempel: En enkel tellekomponent

La oss lage en enkel tellekomponent som demonstrerer bruken av livssyklusen til en web component:


class CounterComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.count = 0;
    this.increment = this.increment.bind(this);
  }

  connectedCallback() {
    this.render();
    this.shadow.querySelector('button').addEventListener('click', this.increment);
  }

  disconnectedCallback() {
    this.shadow.querySelector('button').removeEventListener('click', this.increment);
  }

  increment() {
    this.count++;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <p>Count: ${this.count}</p>
      <button>Increment</button>
    `;
  }
}

customElements.define('counter-component', CounterComponent);

Denne komponenten vedlikeholder en intern count-variabel og oppdaterer visningen når knappen klikkes. connectedCallback legger til hendelseslytteren, og disconnectedCallback fjerner den.

Avanserte Web Component-teknikker

1. Bruke egenskaper (Properties) i stedet for attributter

Selv om attributter er nyttige for enkle data, tilbyr egenskaper (properties) mer fleksibilitet og typesikkerhet. Du kan definere egenskaper på det egendefinerte elementet og bruke gettere og settere for å kontrollere hvordan de aksesseres og endres.


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._data = null; // Bruk en privat egenskap for å lagre dataene
  }

  get data() {
    return this._data;
  }

  set data(value) {
    this._data = value;
    this.renderData(); // Re-render komponenten når dataene endres
  }

  connectedCallback() {
    // Initiell rendring
    this.renderData();
  }

  renderData() {
    // Oppdater Shadow DOM basert på dataene
    this.shadow.innerHTML = `<p>Data: ${JSON.stringify(this._data)}</p>`;
  }
}

customElements.define('my-data-element', MyCustomElement);

Du kan deretter sette data-egenskapen direkte i JavaScript:


const element = document.querySelector('my-data-element');
element.data = { name: 'John Doe', age: 30 };

2. Bruke hendelser (Events) for kommunikasjon

Egendefinerte hendelser (custom events) er en kraftig måte for web components å kommunisere med hverandre og med verden utenfor. Du kan sende ut egendefinerte hendelser fra komponenten din og lytte etter dem i andre deler av applikasjonen.


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback ...

  dispatchCustomEvent() {
    const event = new CustomEvent('my-custom-event', {
      detail: { message: 'Hello from the component!' },
      bubbles: true, // La hendelsen "boble" oppover DOM-treet
      composed: true // La hendelsen krysse grensen til shadow DOM
    });

    this.dispatchEvent(event);
  }
}

customElements.define('my-event-element', MyCustomElement);

// Lytt etter den egendefinerte hendelsen i foreldredokumentet
document.addEventListener('my-custom-event', (event) => {
  console.log('Custom event received:', event.detail.message);
});

3. Styling av Shadow DOM

Shadow DOM gir stil-innkapsling, noe som forhindrer at stiler lekker inn eller ut av komponenten. Du kan style dine web components ved hjelp av CSS innenfor Shadow DOM.

Innebygde stiler:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>This is a styled paragraph.</p>
    `;
  }
}

Eksterne stilark:

Du kan også laste inn eksterne stilark i Shadow DOM:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });

    const linkElem = document.createElement('link');
    linkElem.setAttribute('rel', 'stylesheet');
    linkElem.setAttribute('href', 'my-component.css');

    this.shadow.appendChild(linkElem);
    this.shadow.innerHTML += '<p>This is a styled paragraph.</p>';
  }
}

Konklusjon

Å mestre livssyklusen til web components er essensielt for å bygge robuste og gjenbrukbare komponenter for moderne webapplikasjoner. Ved å forstå de ulike livssyklusmetodene og bruke beste praksis, kan du lage komponenter som er enkle å vedlikeholde, har god ytelse og integreres sømløst med andre deler av applikasjonen din. Denne guiden har gitt en omfattende oversikt over livssyklusen til web components, inkludert detaljerte forklaringer, praktiske eksempler og avanserte teknikker. Omfavn kraften i web components og bygg modulære, vedlikeholdbare og skalerbare webapplikasjoner.

Videre lesing:

MDN Web Docs: Omfattende dokumentasjon om web components og egendefinerte elementer.
WebComponents.org: En fellesskapsdrevet ressurs for utviklere av web components.
LitElement: En enkel baseklasse for å lage raske og lette web components.