PricingLoginStart free
JavaScript Academy · leksjon

Definere egendefinerte elementer

Registrer elementer med customElements-API-et.

Leksjon 1 av 413 trinn

Definere egendefinerte elementer er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva er egendefinerte elementer?

Egendefinerte elementer lar deg definere dine egne HTML-tagger som støttes av JavaScript-klasser. I stedet for å lime sammen en masse div-elementer oppretter du en gjenbrukbar, selvstendig komponent som <user-card>.

  • De er en del av standarden Web Components.
  • De fungerer innebygd i nettlesere uten at du trenger et rammeverk.
  • Navnet på et egendefinert element må inneholde en bindestrek (for eksempel my-button).

Registeret customElements

Nettleseren tilbyr et globalt register på window.customElements. Registrer en ny tagg ved å kalle customElements.define(name, constructor).

Når taggen er registrert, oppgraderes alle tilsvarende tagger i dokumentet til instanser av klassen din.

// 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.

Utvide HTMLElement

Et egendefinert element er en klasse som extends HTMLElement. Basisklassen gir elementet alle standardfunksjonene til DOM-en, som attributter, hendelser og styling.

Kall alltid super() først i konstruktøren, slik at elementet initialiseres riktig.

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

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

Gjengi innhold

Inne i elementet kan du angi this.innerHTML eller bruke DOM-metoder til å bygge innhold. Et vanlig mønster er å gjengi innholdet når elementet kobles til siden.

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

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

Bruke elementet i HTML

Etter registreringen bruker du taggen på samme måte som et innebygd element. Du kan plassere den direkte i HTML-koden eller opprette den med document.createElement.

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

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

Regler for konstruktøren

Konstruktøren kjøres når en instans opprettes. Det finnes strenge regler:

  • Kall super() først.
  • Ikke les eller legg til attributter eller barn her.
  • Vent med DOM-arbeid til connectedCallback.

Bruk bare konstruktøren til starttilstand og oppsett av hendelseslyttere.

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

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

Legge til funksjonalitet

Siden elementet er en ekte DOM-node, kan du koble til hendelseslyttere og oppdatere innholdet som svar på interaksjon.

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 bindestrek

Navn på egendefinerte elementer må inneholde en bindestrek. Dette garanterer at de aldri kolliderer med nåværende eller fremtidige innebygde HTML-elementer.

  • my-widget er gyldig.
  • mywidget er ugyldig og utløser en feil.
  • Navn skiller ikke mellom store og små bokstaver, men skrives med små bokstaver.
// Valid:
customElements.define('app-header', AppHeader);

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

whenDefined og get

To nyttige registermetoder:

  • customElements.get(name) returnerer konstruktøren, eller undefined hvis elementet ikke er registrert.
  • customElements.whenDefined(name) returnerer et Promise som fullføres når elementet er definert.
customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

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

Definere bare én gang

Hvert navn kan bare registreres én gang. Hvis du kaller define med et navn som allerede er brukt, utløses en feil. Beskytt mot dobbeltregistrering i delte moduler.

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

Hvorfor egendefinerte elementer er viktige

Egendefinerte elementer gir deg rammeverksuavhengig, innkapslet og gjenbrukbart brukergrensesnitt. De:

  • standardiserer gjenbruk av komponenter på tvers av alle teknologistakker.
  • integreres med nettleserens egen livssyklus.
  • passer naturlig sammen med Shadow DOM og maler (som gjennomgås senere).

Kort sjekk

Test forståelsen din av hvordan egendefinerte elementer defineres.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært hvordan du definerer egendefinerte elementer:

  • customElements.define(name, class) registrerer en tagg.
  • Klassen extends HTMLElement og kaller super() først.
  • Navn må inneholde en bindestrek.
  • Gjengi innhold i connectedCallback, ikke i konstruktøren.
  • get og whenDefined hjelper deg med å kontrollere registreringsstatusen.

Deretter skal vi utforske hele livssyklusen til et egendefinert element.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
59
Leksjoner
200
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Definere egendefinerte elementer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Definere egendefinerte elementer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Definere egendefinerte elementer»?

Registrer elementer med customElements-API-et. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Definere egendefinerte elementer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Definere egendefinerte elementer
  2. Livssykluskall
  3. Shadow DOM og inkapsling
  4. Templates og slots
← Tilbake til JavaScript Academy