JavaScript Academy · Lektion

Definiera anpassade element

Registrera element med customElements-API:t.

Lektion 1 av 413 steg

Definiera anpassade element är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad är Custom Elements?

Custom elements låter er definiera egna HTML-taggar som bygger på JavaScript-klasser. I stället för att sätta ihop ett virrvarr av div-element skapar ni en återanvändbar, fristående komponent som <user-card>.

De ingår i standarden Web Components.
De fungerar inbyggt i webbläsare utan att något ramverk krävs.
Ett namn på ett custom element måste innehålla ett bindestreck (t.ex. my-button).

Registret customElements

Webbläsaren tillhandahåller ett globalt register på window.customElements. Registrera en ny tagg genom att anropa customElements.define(name, constructor).

När taggen har definierats uppgraderas alla matchande taggar i dokumentet till instanser av er klass.

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

Utöka HTMLElement

Ett custom element är en klass som extends HTMLElement. Basklassen ger elementet alla standardfunktioner i DOM (attribut, händelser och stilsättning).

Anropa alltid super() först i konstruktorn så att elementet initieras korrekt.

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

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

Rendera innehåll

Inuti elementet kan ni ange this.innerHTML eller använda DOM-metoder för att bygga innehåll. Ett vanligt mönster är att rendera när elementet ansluts till sidan.

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

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

Använda elementet i HTML

När taggen har registrerats använder ni den precis som vilket inbyggt element som helst. Ni kan placera den direkt i markup eller skapa den med document.createElement.

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

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

Konstruktorns regler

Konstruktorn körs när en instans skapas. Det finns strikta regler:

Anropa super() först.
Inspektera eller lägg inte till attribut eller underordnade element här.
Skjut upp DOM-arbete till connectedCallback.

Använd konstruktorn endast för initialt tillstånd och konfigurering av händelselyssnare.

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

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

Lägga till beteende

Eftersom elementet är en riktig DOM-nod kan Ni lägga till händelselyssnare och uppdatera dess innehåll som svar 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 på bindestreck

Namn på anpassade element måste innehålla ett bindestreck. Det garanterar att de aldrig krockar med befintliga eller framtida inbyggda HTML-element.

my-widget är giltigt.
mywidget är ogiltigt och kastar ett fel.
Namn är skiftlägesokänsliga men skrivs med små bokstäver.

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

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

whenDefined och get

Två användbara metoder i registret:

customElements.get(name) returnerar konstruktorn eller undefined om elementet inte är registrerat.
customElements.whenDefined(name) returnerar ett Promise som löses när elementet har definierats.

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

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

Definiera endast en gång

Varje namn kan registreras endast en gång. Om Ni anropar define med ett namn som redan används kastas ett fel. Skydda gemensamma moduler mot dubbelregistrering.

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

Därför är Custom Elements viktiga

Custom Elements ger Er ramverksoberoende, inkapslat och återanvändbart användargränssnitt. De:

Standardiserar återanvändning av komponenter i alla stackar.
Integreras med webbläsarens egen livscykel.
Fungerar naturligt tillsammans med Shadow DOM och mallar, som behandlas senare.

Snabbtest

Testa Er förståelse av hur anpassade element definieras.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er att definiera anpassade element:

customElements.define(name, class) registrerar en tagg.
extends HTMLElement och anropar super() först.
Namn måste innehålla ett bindestreck.
Rendera innehåll i connectedCallback, inte i konstruktorn.
get och whenDefined hjälper Er att kontrollera registreringsstatus.

Nästa steg är att utforska hela livscykeln för ett anpassat element.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Definiera anpassade element” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Definiera anpassade element”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Definiera anpassade element”?

Registrera element med customElements-API:t. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Definiera anpassade element”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy