Översikt

Vi börjar nu på allvar strukturera upp vår kod på klienten genom att paketera den i komponenter!

“Stand up”-vlogg

Förra årets vlogg för den som vill få en extra introduktion till veckan.

Stödjande inspelningar

Webbkomponenter - En introduktion till “Custom Elements”

20m | Presentation

• Templates as Strings in Javascript
• Custom Elements
• Custom Elements - Timing in loading
• Custom Elements - Naming

Webbkomponenter - Filstruktur

29m | Presentation

• Introduktion
• Vår valda filstruktur
• Relativa länkar i komponenter (import.meta.url och URL)
• Använda färdiga npm-moduler

Webbkomponenter - Skapa Custom Elements

1h 21m | Presentation

📕 Errata

Använd alltid gemener i attributnamn

När vi arbetar med attribut i webbkomponenter bör vi alltid använda oss av enbart gemener i attributnamnen. Gör alltså:

   static get observedAttributes () {
     return ['time', 'manywordsinattribute']
   }

och INTE

   static get observedAttributes () {
     return ['Time', 'manyWordsInAttribute']
   }

Detta eftersom webbläsaren kommer att göra om samtliga attribut till lowercase. Alltså kommer:

<my-component MittATTRIBUT="test">

göras om till mittattribut.

• Introduktion
• Hur skapar vi ett custom element
• Shadow DOM
• Webkomponenter
• Webbkomponentens livscykel
• En mall för en Webbkomponent
• Konstruktorn i ett custom element
• attributeChangedCallback
• Slot
• Named slots
• Stila custom elements
• Best practices
• Dokumentera webbkomponenter

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under veckan.

Övningar

Under Övningsuppgifter hittar du övningsuppgifter som det är lämpligt att du arbetar med under veckan.

Handledning

Skicka gärna in frågor på förhand via vårt formulär som du når här:

• Frågor inför handledning

Examinationsuppgift A3

Inlämning av examinationsuppgift A3 och därtill hörande muntlig examination!

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din AI-assistent. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

1. Förklara kortfattat grunden i webbkomponenter i javascript i webbläsaren.
2. Hur ser det ut i HTML-koden när man använder en webbkomponent?
3. Måste, eller bör jag, använda shadow dom?
4. Måste, eller bör jag, använda mig av HTML templates?
5. Finns det förslag till kodstruktur och uppdelning av filer, när jag skapar en komponent?
6. Är webbkomponenter någon form av best practice som används ofta ute i industrin?

Här är en utskrift från hur det såg ut när jag diskuterade ovan frågor med min AI-assistent Ajj.

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Missa inte att träna på den teoretiska delen inför examinationen.
2. När du har examinationen, se till att du har koll på alla delar i din kod. Om examinatorn frågar dig “var gör du detta” så bör du kunna hitta den delen på ett smidigt sätt och samtidigt översiktligt förklara vad koden gör i sammanhanget. Dykar man ner i detaljer så bör du kunna förklara även detta. Det är ju din kod som du själv har skrivit.
3. Genomför övningsuppgiften “Tiny Tunes”.