Utmaningar

Nedan finns sex frågor om hur webbkomponenter byggs ihop och kommunicerar utan att bli beroende av varandra. Frågorna bygger på veckans artiklar Bra komponenter, Komponenter i komponenter och Kommunikation mellan komponenter.

Varje fråga har ett antal alternativ att välja bland. Klicka på “Visa lösning” för att se svaret och förklaringen.

Om du är osäker kan du alltid testa i webbläsaren själv eller ta upp frågan på en handledning.

Fråga 13-01: Vad är fel i koden?

export class MyComponent extends HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.append(template.content.cloneNode(true))

    const paragraphs = document.querySelectorAll('p')

    // ...
  }
}

1. Shadow DOM ska alltid ha mode: 'closed'.
2. Komponenten har ett beroende till dokumentet utanför sig själv.
3. append() fungerar inte på en shadow-rot.
4. En komponent ska ärva från HTMLComponent.

Tips

AI-assistent

×

Vad är fel i koden ovan? Ge mig svaret direkt.

✔

Förklara varför det är problematiskt att en webbkomponent använder document.querySelectorAll för att hämta element. Vad händer om komponenten finns två gånger på sidan, och var borde den söka i stället?

Lösningsförslag

Svaret är alternativ 2. document.querySelectorAll('p') söker igenom hela sidan, inte bara komponenten. Komponenten hittar då stycken som inte är dess egna, och fungerar bara på en sida som ser ut på ett visst sätt. Sök från this eller this.shadowRoot i stället. Däremot är det i sin ordning att använda document.createElement().

Visa lösning

Fråga 13-02: Timern

Givet två, av varandra oberoende, element: my-timer och en knapp. När användaren klickar på knappen ska timern stoppas.

Vilken konstruktion är lämpligast?

1. Knappen bäddas in i my-timer-komponenten.
2. Knappen anropar timerns publika metod stop().
3. Timern lyssnar på knappens click-händelse och anropar sin egen metod stop().
4. index.js lyssnar på knappens click-händelse och anropar timerns publika metod stop().

Tips

AI-assistent

×

Vilken konstruktion är lämpligast för att koppla ihop knappen och timern? Ge mig svaret.

✔

Förklara varför två oberoende webbkomponenter helst inte bör känna till varandra direkt, och vilken roll en orkestrerande fil (som index.js, eller en omslutande komponent) kan spela för att koppla ihop dem via händelser och publika metoder.

Lösningsförslag

Svaret är alternativ 4.

Alternativ 1 skulle fungera, men faller på att komponenterna bör vara oberoende av varandra. Alternativ 2 är olämpligt även om det skulle fungera: knappen får ett beroende till timern och kan inte användas utan den. Alternativ 3 är samma sak åt andra hållet; nu kan timern inte fungera om inte knappen finns där.

Alternativ 4 är lämpligt. Knappen behöver inte känna till timern och timern behöver inte känna till knappen. I stället “limmar” index.js, eller en omslutande komponent, ihop dem.

Visa lösning

Fråga 13-03: Spelet

Ett spel innehåller brickor. Vid spelets slut ska samtliga brickors framsida visas.

Vilket är det lämpligaste sättet att åstadkomma detta?

1. Brickorna lyssnar på spelets händelse gameover och vänder sig själva.
2. Spelet anropar respektive brickas metod flip() för att vända på brickan.
3. Spelet vänder brickorna genom att sätta attributet flipped.
4. Spelet utlöser händelsen gameover, varpå index.js fångar händelsen, söker ut samtliga brickor och ser till att de vänds.

Tips

AI-assistent

×

Vilket är det lämpligaste sättet att vända alla brickor vid spelets slut? Ge mig svaret.

✔

Förklara varför en barnkomponent (bricka) helst inte bör känna till sin förälder (spelet), och varför det är säkrare att kommunicera via ett attribut som föräldern sätter, snarare än att förutsätta att barnen är åtkomliga i den vanliga DOM:en utanför förälderns shadow DOM.

Lösningsförslag

Svaret är alternativ 3.

Alternativ 1 går att få att fungera, men nu uppstår återigen ett beroende åt fel håll: barnen ska inte behöva känna till sin förälder. Det är bättre att föräldern talar om för barnet vad det ska göra. Alternativ 2 är absolut en väg att gå, det fungerar, men att kommunicera ett tillstånd via ett attribut (alternativ 3) är lämpligare, eftersom det härmar hur de inbyggda elementen fungerar.

Alternativ 4 är inte säkert att det ens fungerar, eftersom det förutsätter att brickorna går att nå från dokumentet och inte ligger i spelets eget shadow DOM. Och även om de gjorde det skulle index.js börja bero på hur spelet är byggt inuti.

Visa lösning

Fråga 13-04: Vad blir tiden?

<my-timer seconds="20"></my-timer>

Inuti my-timer står:

const total = this.getAttribute('seconds') + 5

Vad blir total?

1. 25
2. '205'
3. NaN
4. Ett TypeError kastas.

Tips

AI-assistent

×

Vad blir total i koden ovan?

✔

Vilken datatyp har värdet som getAttribute() returnerar, och vad gör operatorn + när den ena operanden är en sträng? Hur borde komponenten läsa ett attribut som ska vara ett tal, och vad ska hända om attributet saknas?

Lösningsförslag

Svaret är alternativ 2. Ett attributs värde är alltid en sträng, även när det ser ut som ett tal. '20' + 5 slår ihop strängarna till '205'. Komponenten måste göra om värdet till ett tal själv, gärna med ett standardvärde: Number(this.getAttribute('seconds') ?? 20) + 5.

Visa lösning

Fråga 13-05: Var finns bilderna?

En komponent image-gallery används så här:

<image-gallery>
  <img src="cat.jpg" alt="A cat" />
  <img src="dog.jpg" alt="A dog" />
</image-gallery>

Komponentens mall har ett <slot> där bilderna visas, och två egna knappar, Previous och Next. Vilket anrop inuti komponenten hittar de två bilderna?

1. this.querySelectorAll('img')
2. this.shadowRoot.querySelectorAll('img')
3. document.querySelectorAll('img')
4. Både 1 och 2.

Tips

AI-assistent

×

Vilket anrop hittar bilderna? Svara med alternativets nummer.

✔

Förklara skillnaden mellan ett elements barn i light DOM och elementen i dess shadow-träd. Om ett barn visas i en slot, i vilket träd ligger det då? Och i vilket träd ligger knapparna?

Lösningsförslag

Svaret är alternativ 1. Bilderna är skrivna av den som använder komponenten och är vanliga barn till image-gallery i dokumentets träd. Att de visas i komponentens slot flyttar dem inte in i shadow-trädet, så this.shadowRoot.querySelectorAll('img') ger en tom lista. Knapparna däremot ligger i shadow-trädet och nås från this.shadowRoot. Alternativ 3 hittar bilderna, men också alla andra bilder på sidan.

Visa lösning

Fråga 13-06: När utlöses slotchange?

todo-list lyssnar på slotchange på sin slot, där dess todo-item visas. Vilka av de här ändringarna utlöser slotchange?

1. En ny todo-item läggs till med list.append(item).
2. En todo-item bockas av, och får attributet done.
3. Texten i en todo-item ändras med item.textContent = 'Buy oat milk'.
4. En todo-item tas bort med item.remove().

Tips

AI-assistent

×

Vilka ändringar utlöser slotchange? Ge mig svaret.

✔

Vad betyder det att ett element är tilldelat (assigned) en slot? Vilka sorters ändringar gör att listan över tilldelade element ändras, och vilka ändrar bara något inuti ett element som redan är tilldelat?

Lösningsförslag

Svaret är alternativ 1 och 4. slotchange utlöses när de element som är tilldelade slotten ändras, alltså när ett barn kommer eller går.

Ett nytt attribut på ett barn ändrar inte vilka barn som finns. Inte heller ny text i en todo-item; texten är barn till todo-item, och visas i dess egen slot, inte i listans. Att en uppgift bockas av får listan veta på annat sätt, genom den händelse todo-item utlöser när användaren klickar.

Visa lösning