Utöka inbyggda element
Anpassa befintliga element med is-attributet
Utöka inbyggda element är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 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 HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Två typer av anpassade element
Specifikationen definierar autonoma anpassade element (som ärver HTMLElement och används som <my-card>) samt anpassade inbyggda element (som ärver en specifik inbyggd klass och används som <button is="my-button">). Anpassade inbyggda element ärver inbyggd semantik utan extra arbete.
Varför utöka ett inbyggt element?
Autonoma <my-button> får inget av det inbyggda beteendet hos <button> – ingen aktivering med Enter eller blanksteg, inget deltagande i formulär och inget role="button" för hjälpmedel. En anpassad knapp (is="my-button") ärver automatiskt allt detta.
Ärv från klassen
Ärv från den specifika HTML-klassen i stället för HTMLElement: class MyButton extends HTMLButtonElement {}. Elementet behåller allt inbyggt beteende – formulärskickning, fokushantering och inaktiverat tillstånd – och ni kan lägga till era förbättringar ovanpå det.
class MyButton extends HTMLButtonElement {
connectedCallback() {
this.style.fontWeight = "bold";
}
}Registrering med extends-alternativet
customElements.define("my-button", MyButton, { extends: "button" }). Det tredje argumentet anger för registret vilken inbyggd tagg elementet utökar. Utan det kastar registreringen ett undantag.
Attributet is
Använd anpassade inbyggda element med attributet is på den befintliga taggen: <button is="my-button">Click</button>. Om ni i stället skriver <my-button> skapas ett autonomt element och det inbyggda beteendet går förlorat.
Safari stöder inte detta
Safari har avstått från att implementera anpassade inbyggda element med hänvisning till tillgänglighetsproblem. De fungerar i Chrome, Edge och Firefox. I Safari ignoreras attributet is och elementet fungerar som ett vanligt <button>. Använd den officiella polyfillen när stöd för Safari krävs.
Alternativ med polyfill
Polyfillen @ungap/custom-elements återställer stöd för anpassade inbyggda element i Safari. Den är liten och väl underhållen. Inkludera den när teamet behöver stöd i flera webbläsare utan att överge mönstret med is-attributet.
Autonomt alternativ
Om Safari utan polyfill är viktigt kan ni i stället skapa ett autonomt element och återskapa det beteende som behövs manuellt: lägg till role="button", tabindex="0", tangentbordshanterare för Enter eller blanksteg samt formulärkoppling via ElementInternals API.
API för formulärkoppling
Autonoma element kan delta i formulärskickning genom att ange static formAssociated = true och använda this.attachInternals(). Det returnerade ElementInternals-objektet tillhandahåller setFormValue och setValidity för fullständig formulärintegration.
När ska ni välja vilket?
Välj anpassade inbyggda element för komponenter som i huvudsak beter sig som ett inbyggt element (en avancerad knapp eller ett smart inmatningsfält) och när plattformen ni stöder är Chrome/Firefox eller ni accepterar polyfillen. Välj autonoma element för helt nya komponenter (kort och dialogrutor) utan någon inbyggd motsvarighet.
Fallgrop: autonoma knappar
Det vanligaste misstaget med webbkomponenter är att skapa <my-button> som ett autonomt element. Det kan inte skicka formulär, reagerar inte på Enter eller blanksteg och identifieras inte som en knapp. Ärv antingen från HTMLButtonElement eller återskapa noggrant alla beteenden hos en riktig knapp.
Kunskapskontroll
Vilken praktisk fördel har det att ärva från HTMLButtonElement (anpassat inbyggt element) jämfört med att ärva från HTMLElement (autonomt) för en knappsliknande komponent?
Sammanfattning
Anpassade inbyggda element utökar en specifik HTML-klass (HTMLButtonElement, HTMLInputElement) och används via attributet is, vilket gör att de ärver allt inbyggt beteende. Registrera dem med alternativet { extends: "button" }. Safari stöder dem inte inbyggt – använd en polyfill eller autonoma element med manuellt återskapat beteende när fullständigt stöd i flera webbläsare krävs.
Lär dig HTML 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
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Utöka inbyggda element” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Utöka inbyggda 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 HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Utöka inbyggda element”?
Anpassa befintliga element med is-attributet Ni övar på HTML 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 HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML 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 4 av 4.
Hur lång tid tar lektionen ”Utöka inbyggda 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 HTML Academy-lektionen?
Ja. Varje HTML 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
- Definiera element med customElements.define
- connectedCallback och disconnectedCallback
- Observerade attribut och attributeChangedCallback
- Utöka inbyggda element