Definition af elementer med customElements.define
Registrér en klasse for et tilpasset element i browseren
Definition af elementer med customElements.define er en gratis HTML 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 HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad er brugerdefinerede elementer?
Brugerdefinerede elementer lader dig opfinde dine egne HTML-tags, der bygger på en JavaScript-klasse. Når de er defineret, opfører <my-card> sig som ethvert indbygget element: det kan skrives i HTML, forespørges, formateres, styres med scripts og bruges uændret i rammeværker.
Kravet om bindestreg
Navnet på hvert brugerdefineret element skal indeholde mindst én bindestreg — user-avatar, app-button, my-card. Bindestregen adskiller brugerdefinerede elementer fra aktuelle og fremtidige indbyggede HTML-tags og håndhæves af specifikationen.
Definition af en klasse
Et brugerdefineret element er en klasse, der udvider HTMLElement (eller en indbygget underklasse). Klassen kan erklære en constructor og livscyklusfunktioner. Offentlige egenskaber og metoder på klassen bliver elementets scriptgrænseflade.
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}Registrering med define
customElements.define("my-card", MyCard) registrerer klassen under tag-navnet. Efter registreringen opgraderes alle eksisterende og fremtidige <my-card> i dokumentet til instanser af klassen.
super() er obligatorisk
Konstruktøren skal kalde super() som sin første sætning, før der røres ved this. Hvis du springer super() over, kastes "Failed to construct 'HTMLElement'". Betragt det som den standardregel for JavaScript-klassekonstruktører, den er.
Ingen DOM-læsninger i constructor
Konstruktøren må ikke læse elementets attributter eller børn — de er måske endnu ikke fortolket på konstruktionstidspunktet. Flyt opsætning, der berører DOM'en, til connectedCallback, som først udløses, efter at elementet er i dokumentet.
Registrering er permanent
Et elementnavn kan kun registreres én gang pr. side. Hvis samme navn registreres igen, kastes en NotSupportedError. Genindlæs siden for at teste ændringer under udviklingen; i produktion skal hver komponent registreres én gang ved opstart.
Kompatibilitetsudvidelser
Brugerdefinerede elementer findes i alle moderne browsere. Til meget gamle browsere (som stort set er udfasede) leverer webcomponents.js-kompatibilitetsudvidelsen en reserve løsning. Nye projekter kan levere den indbyggede funktionalitet og helt undlade kompatibilitetsudvidelsen.
Registreringens status
customElements.get("my-card") returnerer klassen, hvis den er defineret, og undefined ellers. customElements.whenDefined("my-card") returnerer et promise, der opfyldes, når elementet er registreret — nyttigt for kode, der skal vente på definitioner, som indlæses sent.
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});Brug af elementet
Når elementet er defineret, bruges det præcis som et indbygget tag: skriv det i HTML (<my-card></my-card>), opret det via document.createElement("my-card"), eller instantiér det via new MyCard() og indsæt det. Alle tre veje giver den samme opgraderede instans.
Navngivningskonventioner
Sæt et projekt- eller virksomhedsnavn foran brugerdefinerede elementer (cd-card, app-modal) for at undgå sammenstød med andre biblioteker på samme side. Webkomponentøkosystemet er ubundtet — alle på din side kan registrere et hvilket som helst navn, og den første registrering vinder.
Videnstjek
Hvorfor skal alle navne på brugerdefinerede elementer indeholde en bindestreg?
Opsummering
Brugerdefinerede elementer er JavaScript-klasser, der udvider HTMLElement, og registreres via customElements.define("name", Class), hvor navnet skal indeholde en bindestreg. Konstruktøren skal kalde super() først og må ikke læse DOM'en; udsæt DOM-arbejde til connectedCallback. Definerede elementer opfører sig præcis som indbyggede tags overalt.
Lær HTML 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
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Definition af elementer med customElements.define” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Definition af elementer med customElements.define”, 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. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Definition af elementer med customElements.define”?
Registrér en klasse for et tilpasset element i browseren Du øver dig i HTML 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å HTML Academy?
Der kræves ingen tidligere erfaring. HTML 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 elementer med customElements.define”?
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 HTML Academy-lektion?
Ja. Alle HTML 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
- Definition af elementer med customElements.define
- connectedCallback og disconnectedCallback
- Observerede attributter og attributeChangedCallback
- Udvidelse af indbyggede elementer