Inspelningar

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.‌‌‌‌‌

composed och bubbles har standardvärdet false

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.

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.