Vad är Web Components?
Ett samlingsnamn för fyra inbyggda webbläsartekniker som tillsammans gör det möjligt att definiera egna HTML-element med egen funktionalitet och styling
Vad är Custom Elements?
Custom Elements är en JS web api som ger möjligheten att skapa egna HTML-element med definierat beteende.
Vad är Shadow DOM?
Ett sätt att kapsla innehåll och styling så att det inte läcker ut till resten av sidan (eller påverkas av andra stilar).
Hur kan man skapa en Shadow DOM?
Imperativt, via JS
~~~
host.attachShadow({ mode: “open” })
~~~
Eller deklarativt via HTML:
<div>
<template>
<span>I'm in the shadow DOM</span>
</template>
</div>
Vilka två html-element används för att skapa webcomponents?
<template> och <slot>
</slot></template>
Är webcomponents oberoende av ramverk?
Ja
Vad avgör mode: ‘open’ eller mode: ‘closed’ i en webcomponent?
Om shadow DOM ska gå att komma åt med js via ‘shadowRoot’
När är det praktiskt med mode: ‘open’ i en webcomponent?
VId debuggning
När används <slot>?</slot>
För att låta användare “stoppa in” eget innehåll i komponenten.
Vad tillåter attribut, properties och events i webcomponents?
Kommunikation.
Vad är shadow host?
Den vanliga nod som shadow DOM kopplas till.
Vad är shadow tree?
Den trädstruktur som shadow DOM innehåller.
Vad är shadow root?
Rot-noden i shadow DOM
Vad är shadow boundary?
Där shadow DOM tar slut och den vanliga DOM börjar igen.
Vad gör metoden attachShadow() ?
Kopplar en shadow DOM till den DOM nod den anropas på:
hostnode.attachShadow()
Vilka argument har attachShadow()?
Ett options-objekt. Kanske mest använt: {mode: “open”}
Hur kommer man åt noderna i shadow DOM?
Via egenskapen shadowRoot på shadow host noden:
hostnode.shadowRoot.querySelector(“.class”).
Vad krävs för att man ska kunna komma åt noderna i shadow DOM via js/css?
I html krävs attributet shadowrootmode=”open” eller att attachShadow() körts med argumentet {mode=”open”}
Är {mode:”closed”} en stark säkerhetsmekanism för shadow DOM?
Nej, det finns sätt att komma runt det. Det är mer en indikation att den övriga sidan kod inte ska in i shadowDOM
Vilka två sätt finns för att applicera stil i shadowDOM?
- Programmatiskt (via JS)
- Deklarativt (via HTML)
