JavaScript Academy · Lektion

Definition af tilpassede elementer

Registrér elementer med customElements-API'en.

Lektion 1 af 413 trin

Definition af tilpassede elementer er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er brugerdefinerede elementer?

Brugerdefinerede elementer lader dig definere dine egne HTML-tags, der understøttes af JavaScript-klasser. I stedet for at lime en masse div-elementer sammen opretter du en genanvendelig, selvstændig komponent som <user-card>.

De er en del af standarden Web Components.
De fungerer indbygget i browsere uden brug af et framework.
Navnet på et brugerdefineret element skal indeholde en bindestreg (f.eks. my-button).

Registreringsdatabasen customElements

Browseren stiller en global registreringsdatabase til rådighed på window.customElements. Du registrerer et nyt tag ved at kalde customElements.define(name, constructor).

Når tagget er defineret, opgraderes alle tilsvarende tags i dokumentet til instanser af din klasse.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

Udvidelse af HTMLElement

Et brugerdefineret element er en klasse, der extends HTMLElement. Basisklassen giver dit element alle standardfunktioner fra DOM'en (attributter, hændelser og styling).

Kald altid super() først i konstruktøren, så elementet initialiseres korrekt.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Gengivelse af indhold

Inde i elementet kan du angive this.innerHTML eller bruge DOM-metoder til at opbygge indhold. Et almindeligt mønster er at gengive indhold, når elementet er koblet til siden.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Brug af elementet i HTML

Efter registreringen kan du bruge dit tag ligesom ethvert indbygget element. Du kan placere det direkte i HTML-markup eller oprette det med document.createElement.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Konstruktørens regler

Konstruktøren kører, når en instans oprettes. Der er strenge regler:

Kald super() først.
Undersøg eller tilføj IKKE attributter eller underordnede elementer her.
Udskyd DOM-arbejde til connectedCallback.

Brug kun konstruktøren til starttilstand og opsætning af hændelseslyttere.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Tilføj funktionalitet

Fordi dit element er en rigtig DOM-node, kan du tilknytte hændelseslyttere og opdatere indholdet som reaktion på interaktioner.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Kravet om bindestreg

Navne på brugerdefinerede elementer skal indeholde en bindestreg. Det sikrer, at de aldrig kolliderer med nuværende eller fremtidige indbyggede HTML-elementer.

my-widget er gyldigt.
mywidget er ugyldigt og udløser en fejl.
Der skelnes ikke mellem store og små bogstaver i navne, men de skrives med små bogstaver.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined og get

To nyttige registreringsmetoder:

customElements.get(name) returnerer konstruktøren eller undefined, hvis elementet ikke er registreret.
customElements.whenDefined(name) returnerer et Promise, der løses, når elementet er defineret.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Definér kun én gang

Hvert navn kan kun registreres én gang. Hvis du kalder define med et navn, der allerede er brugt, udløses en fejl. Beskyt delte moduler mod dobbeltregistrering.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Hvorfor brugerdefinerede elementer er vigtige

Brugerdefinerede elementer giver dig brugergrænseflader, der er uafhængige af rammeværk, indkapslede og genanvendelige. De:

standardiserer genbrug af komponenter på tværs af alle teknologistakke.
integreres med browserens egen livscyklus.
fungerer naturligt sammen med Shadow DOM og skabeloner, som gennemgås senere.

Hurtig test

Test din forståelse af, hvordan du definerer brugerdefinerede elementer.

Besvar den i den interaktive lektion

Opsummering

Du har lært, hvordan du definerer brugerdefinerede elementer:

customElements.define(name, class) registrerer et tag.
Klassen extends HTMLElement og kalder super() først.
Navne skal indeholde en bindestreg.
Gengiv indhold i connectedCallback, ikke i konstruktøren.
get og whenDefined hjælper dig med at kontrollere registreringsstatus.

Dernæst udforsker vi hele livscyklussen for et brugerdefineret element.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Definition af tilpassede elementer” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Definition af tilpassede elementer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Definition af tilpassede elementer”?

Registrér elementer med customElements-API'en. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Definition af tilpassede elementer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy