M

MLOG

Norsk

Utforsk kraften i Webkomponenter, med fokus på Custom Elements, for å bygge gjenbrukbare og innkapslede UI-komponenter for ulike nettapplikasjoner.

Webkomponenter: Et dypdykk i Custom Elements

Webkomponenter representerer et betydelig fremskritt innen webutvikling, og tilbyr en standardisert måte å skape gjenbrukbare og innkapslede UI-komponenter på. Blant kjerneteknologiene som utgjør Webkomponenter, fremstår Custom Elements som hjørnesteinen for å definere nye HTML-tagger med tilpasset oppførsel og rendering. Denne omfattende guiden dykker ned i detaljene rundt Custom Elements, og utforsker deres fordeler, implementering og beste praksis for å bygge moderne nettapplikasjoner.

Hva er Webkomponenter?

Webkomponenter er et sett med webstandarder som lar utviklere skape gjenbrukbare, innkapslede og interoperable HTML-elementer. De tilbyr en modulær tilnærming til webutvikling, som muliggjør opprettelsen av tilpassede UI-komponenter som enkelt kan deles og gjenbrukes på tvers av forskjellige prosjekter og rammeverk. Kjerneteknologiene bak Webkomponenter inkluderer:

Forståelse av Custom Elements

Custom Elements er kjernen i Webkomponenter, og gjør det mulig for utviklere å utvide HTML-vokabularet med sine egne elementer. Disse tilpassede elementene oppfører seg som standard HTML-elementer, men de kan skreddersys til spesifikke applikasjonsbehov, noe som gir større fleksibilitet og kodeorganisering.

Definering av Custom Elements

For å definere et tilpasset element, må du bruke metoden customElements.define(). Denne metoden tar to argumenter:

  1. Elementnavnet: En streng som representerer navnet på det tilpassede elementet. Navnet må inneholde en bindestrek (-) for å unngå konflikter med standard HTML-elementer. For eksempel er my-element et gyldig navn, mens myelement ikke er det.
  2. Elementklassen: En JavaScript-klasse som utvider HTMLElement og definerer oppførselen til det tilpassede elementet.

Her er et grunnleggende eksempel:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Hello, World!';
  }
}

customElements.define('my-element', MyElement);

I dette eksempelet definerer vi et tilpasset element kalt my-element. Klassen MyElement utvider HTMLElement og setter elementets indre HTML til "Hello, World!" i konstruktøren.

Livssyklus-callbacks for Custom Elements

Tilpassede elementer har flere livssyklus-callbacks som lar deg utføre kode på ulike stadier i elementets livssyklus. Disse callbackene gir muligheter til å initialisere elementet, respondere på attributtendringer og rydde opp i ressurser når elementet fjernes fra DOM-en.

Her er et eksempel som demonstrerer bruken av livssyklus-callbacks:

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

  connectedCallback() {
    this.shadow.innerHTML = `
Connected to the DOM!
`;
    console.log('Element connected');
  }

  disconnectedCallback() {
    console.log('Element disconnected');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);

I dette eksempelet logger connectedCallback() en melding til konsollen og setter den indre HTML-en til elementet når det kobles til DOM-en. disconnectedCallback() logger en melding når elementet kobles fra. attributeChangedCallback() kalles når data-message-attributtet endres, og oppdaterer elementets innhold tilsvarende. observedAttributes-getteren spesifiserer at vi ønsker å observere endringer i data-message-attributtet.

Bruk av Shadow DOM for innkapsling

Shadow DOM gir innkapsling for webkomponenter, og lar deg lage et separat DOM-tre for en komponent som er isolert fra resten av siden. Dette betyr at stiler og skript definert innenfor Shadow DOM ikke vil påvirke resten av siden, og omvendt. Denne innkapslingen bidrar til å forhindre konflikter og sikrer at komponentene dine oppfører seg forutsigbart.

For å bruke Shadow DOM, kan du kalle metoden attachShadow() på elementet. Denne metoden tar et opsjonsobjekt som spesifiserer modusen til Shadow DOM. mode kan være enten 'open' eller 'closed'. Hvis modusen er 'open', kan Shadow DOM nås fra JavaScript ved hjelp av shadowRoot-egenskapen til elementet. Hvis modusen er 'closed', kan ikke Shadow DOM nås fra JavaScript.

Her er et eksempel som demonstrerer bruken av Shadow DOM:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
This is inside the Shadow DOM.

    `;
  }
}

customElements.define('my-element', MyElement);

I dette eksempelet fester vi en Shadow DOM til elementet med mode: 'open'. Deretter setter vi den indre HTML-en til Shadow DOM-en til å inkludere en stil som setter fargen på avsnitt til blå, og et avsnittselement med litt tekst. Stilen definert innenfor Shadow DOM vil kun gjelde for elementer innenfor Shadow DOM, og vil ikke påvirke avsnitt utenfor Shadow DOM.

Fordeler ved å bruke Custom Elements

Custom Elements tilbyr flere fordeler for webutvikling:

Praktiske eksempler på Custom Elements

La oss utforske noen praktiske eksempler på hvordan Custom Elements kan brukes til å bygge vanlige UI-komponenter.

En enkel teller-komponent

Dette eksempelet viser hvordan man lager en enkel teller-komponent ved hjelp av Custom Elements.

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

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

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        
        ${this._count}
        
      

    `;
  }
}

customElements.define('my-counter', Counter);

Denne koden definerer en Counter-klasse som utvider HTMLElement. Konstruktøren initialiserer komponenten, fester en Shadow DOM, og setter den opprinnelige tellingen til 0. connectedCallback()-metoden legger til hendelseslyttere på øknings- og minkningsknappene. increment()- og decrement()-metodene oppdaterer tellingen og kaller render()-metoden for å oppdatere komponentens rendering. render()-metoden setter den indre HTML-en til Shadow DOM-en for å inkludere tellervisningen og knappene.

En bildekarusell-komponent

Dette eksempelet viser hvordan man lager en bildekarusell-komponent ved hjelp av Custom Elements. For korthets skyld er bildékildene plassholdere og kunne vært lastet dynamisk fra et API, et CMS, eller lokal lagring. Stylingen har også blitt minimert.

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  \"Carousel
  

  
  
  

  

  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Denne koden definerer en ImageCarousel-klasse som utvider HTMLElement. Konstruktøren initialiserer komponenten, fester en Shadow DOM, og setter den opprinnelige bildelisten og gjeldende indeks. connectedCallback()-metoden legger til hendelseslyttere på forrige- og neste-knappene. nextImage()- og prevImage()-metodene oppdaterer gjeldende indeks og kaller render()-metoden for å oppdatere komponentens rendering. render()-metoden setter den indre HTML-en til Shadow DOM-en for å inkludere det gjeldende bildet og knappene.

Beste praksis for arbeid med Custom Elements

Her er noen beste praksiser å følge når du jobber med Custom Elements:

Custom Elements og rammeverk

Custom Elements er designet for å være interoperable med andre webteknologier og rammeverk. De kan brukes i forbindelse med populære rammeverk som React, Angular og Vue.js.

Bruk av Custom Elements i React

For å bruke Custom Elements i React, kan du enkelt rendere dem som ethvert annet HTML-element. Du må imidlertid kanskje bruke en ref for å få tilgang til det underliggende DOM-elementet og samhandle direkte med det.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Access the custom element's API
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Custom event received:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

I dette eksempelet bruker vi en ref for å få tilgang til my-element-komponenten og legge til en hendelseslytter på den. Dette lar oss lytte etter tilpassede hendelser sendt av komponenten og respondere deretter.

Bruk av Custom Elements i Angular

For å bruke Custom Elements i Angular, må du konfigurere Angular til å gjenkjenne det tilpassede elementet. Dette kan gjøres ved å legge til det tilpassede elementet i schemas-arrayet i modulens konfigurasjon.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Når det tilpassede elementet er registrert, kan du bruke det i dine Angular-maler som ethvert annet HTML-element.

Bruk av Custom Elements i Vue.js

Vue.js støtter også Custom Elements nativt. Du kan bruke dem direkte i malene dine uten spesiell konfigurasjon.

Vue vil automatisk gjenkjenne det tilpassede elementet og rendere det korrekt.

Hensyn til tilgjengelighet

Når du bygger Custom Elements, er det avgjørende å ta hensyn til tilgjengelighet for å sikre at komponentene dine kan brukes av alle, inkludert personer med nedsatt funksjonsevne. Her er noen sentrale hensyn til tilgjengelighet:

Internasjonalisering og lokalisering

Når du utvikler Custom Elements for et globalt publikum, er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n). Her er noen sentrale hensyn:

Konklusjon

Custom Elements er et kraftig verktøy for å bygge gjenbrukbare og innkapslede UI-komponenter. De tilbyr flere fordeler for webutvikling, inkludert gjenbrukbarhet, innkapsling, interoperabilitet, vedlikeholdbarhet og ytelse. Ved å følge beste praksis som er beskrevet i denne guiden, kan du utnytte Custom Elements til å bygge moderne nettapplikasjoner som er robuste, vedlikeholdbare og tilgjengelige for et globalt publikum. Etter hvert som webstandarder fortsetter å utvikle seg, vil Webkomponenter, inkludert Custom Elements, bli stadig viktigere for å skape modulære og skalerbare nettapplikasjoner.

Omfavn kraften i Custom Elements for å bygge fremtidens web, én komponent om gangen. Husk å ta hensyn til tilgjengelighet, internasjonalisering og lokalisering for å sikre at komponentene dine kan brukes av alle, overalt.