Översikt

Denna vecka tar vi och lugnar ner oss lite! Vi samlar ihop oss, repeterar och fokuserar på hur komponenter kan samarbeta.

“Stand up”-vlogg

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

Stödjande inspelningar

Komposition av komponenter

1h 8m | Presentation | Exempel - Todo Application

📕 Errata

Om bubbles och composed

I videon är vi lite förvirrade när det kommer till bubbles: true. Det är inte dåligt att sätta bubbles till true utan det kommer att innebära att händelsen bubblar upp i DOM:en men stannar när den når en ShadowRoot. Detta gör att komponenter som är in bäddade i en Shadow DOM inte kommer att skicka sina händelser utanför denna DOM. I exemplet är todo-items slottade in och således en del av den utanförliggande, vanliga DOMen och kan därför bubbla sina händelser så som vi vill. Det vi ska undvika är composed: true i våra komponenter då detta gör att händelsen kan vandra förbi en ShadowRoot.

    this.dispatchEvent(new window.CustomEvent('change', {
      detail: strikethrough,
      composed: false,
      bubbles: true
    }))

composed och bubbles har standardvärdet false

Var du bör koppla händelsehanterare

En fråga som ofta förekommer är, var ska vi koppla våra händelsehanterare? I connectedCallback eller i konstruktorn. Som vanligt är beskedet. Det beror på.

Händelsehanterare som sätts på element som är i vår shadowDOM sätter vi lämpligast i konstruktorn. Sätter vi händelsehanterare på något som är utanför vår shadowDOM så bör vi sätta dessa i connectedCallback vilket också innebär att vi i dessa fall behöver ta bort händelsehanterarna i disconnectedCallback.

En bra genomgång kring detta ges som svar på följande fråga på Stack Overflow.

Nyansering: undantag i komponenter

I videon nämns det att ni ska undvika att kasta undantag från komponenter. Jag vill omformulera detta till “Försök undvika att kasta undantag från komponenter”. Om det är nödvändigt, så som ex. om en fetch misslyckas kan det vara bra att kasta undantag så att yttre komponenter kan fånga upp detta och visa felmeddelanden till användaren eller försöka självläka applikationen.

• Introduktion
• Vad är en bra komponent Niklas?
• Komposition av komponenter
• Exempel - Todo application
• Designregler - Bubbling av event (se informationstext nedan)
• Nestling av komponenter
• Nestling av komponenter i normala DOMen
• Nestling av komponenter i shadow DOMen
• Designregler - Härma de inbyggda elementen
• Designregler - Konfigurering via attribut
• Designregler - Inkapsling
• Orkestrering - Kommunikation mellan komponenter
• Case study - Flygkalkylatorn
• Designregler - Fallera tyst
• Lyssnar på förändring med “slotchange”
• Avslutning

Läsanvisningar

Denna vecka introduceras egentligen ingen ny teori, utan befäster snarare tidigare begrepp. Därav finns det inga direkta läsanvisningar.

Ö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 B2

Fortsätt arbetet med examinationsuppgift B2.

Utmaningar

Det finns ett par utmaningar att titta på och fundera kring lösningar.

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. Finns det best practice kring hur man jobbar med webbkomponenter?
2. Kan man bygga webbkomponenter som består av andra webbkomponenter, så kallad komposition av webbkomponenter?

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. Jobba på med B2. Se till att komma långt denna veckan, nästa vecka är leverans.
2. Titta på föreläsningen och se om det finns tips du kan dra nytta av för att strukturera din kod i B2.