Samuel Brynolf

‘So I’ve been inside the shadow dom the whole time?’ —Dave Rupert om Webcomponents

Jag har sett begreppet tidigare men trott att det handlat om metodiken att arbeta med skalbar gränssnitts-struktur (a la Brad Frosts Atomic Web design). Där tog jag fel.

I avsnitt 124 av Shop Talk Show är Rob Dodson på besök. Rob arbetar med web components (och polymer) på Google som utvecklare. Avsnittet är en bra introduktion till hela begreppet:

  • Det är många features på webben som kräver markup vars enda syfte är att vara hookar åt Javascript, bära CSS eller skjuta in layout
  • Markupen blir fort skräpig = svåranvänd
  • Element som <video>, input, textarea etc bär redan gömda element

Skapa egna HTML-element av web-components som döljer det du vill ska döljas och är laddade med egenskaper som du själv bestämmer. De element som du önskade skulle vara implementerade av browsers redan—skapa dem! Det finns massor av features utöver detta som behandlar hur CSS ärvs eller inte ärvs för element. Det här är något av en Pandoras ask.

För att förstå det kan man referera det som <video>-elementet som ju innehåller massvis med information utöver det som syns i markupen. Eller som när vi manipulerar DOM / skapar interaktioner med javascript och pseudo-element på enkla element för att bygga funktionalitet.

Skillnaden är att vi kan bygga enheter som håller allt detta i sig själva. Det gör det enkelt att återanvända användbara features—handsydda för specifika behov utan en massa bös i markupen.

So we have already been doing this thing with webcomponents for a while — we just didn’t know it

Rob Dodson, ShopTalk Show episode 124

Exempel på web components

Web Components gör det möjligt att skapa egna element som är sig själva nog. Bildväxlare kräver en hel del trassliga divvar och scripts för att fungera. Göm undan skräpet i ett egenskapat element som bara håller en rad bilder.

<slider>
  <img src="bild1.jpg" />
  <img src="bild2.jpg" />
  <img src="bild3.jpg" />
</slider>

I tillägg kan du skapa input på elementet för att skjuta in parametrar och justera elementet. Goggle gör exempelvis en tagg för att använda deras kartor som tar attribut:

<google-map latitude="37.77493" longitude="-122.41942">
</google-map>

Fler färdiga exempel att titta på:

Web components i framtiden

De första tankarna som dyker upp hos mig är

  • Jag skulle gärna se en paneldebatt mellan Steven Wittens och Rob Dodson om hur man bäst delar upp interaktion/styling/content. Eller inte längre delar upp. (Referens: Steven Wittens gjorde ett statement om sin take på det här)
  • Industrin har under de senate åren varit bra på att enas om standarder för hur man bäst gör webbutveckling. Men vad händer när varje sida i praktiken kan ha en helt unik markup? På vilken abstraktionsnivå behöver man lägga sig för att skapa standards för web-components? Behövs lika noggranna best-practice-standards i framtiden om tekniken i sig ger en tydlig riktning på hur man gör saker och ting?

Min första tillämpning?

Min egna första tillämpning skulle vara att arbeta igenom den grid som jag använder för webbplatser. Den är rätt bantad som den är men det vore fint att komprimera markup ytterliggare och kanske addera flexbox (med fallbacks) + layoutstyrda scripts—direkt i layout-element.