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