Styling en Web Component

0
12

Detta förvirrade mig för lite här så jag skriver ut det medan det är färskt i minnet. Bara för att du är med hjälp av en web-komponent betyder inte att de stilar av det är helt isolerade. Du kanske har innehållet i en web component som är utformade normalt tillsammans med resten av din webbplats. Så här:

Se Pennan Web Component med Globala Stilar (eftersom ingen Skugga DOM) av Chris Coyier (@chriscoyier) på CodePen.

<Whats-upp> – elementet isolerade JavaScript-drivna funktioner av sig själv genom att fästa ett klick handler till på knappen <> i den. Men stylingen på den knappen kommer från globala CSS som används på sidan.

Men låt oss säga att vi flyttar knappen <> i web component, så vi kan använda <whats-up – > allt av sig själv. Vi skulle kunna göra det .innerHTML ‘ ing den egna element:

Se Pennan Web Component med Globala Stilar (eftersom ingen Skugga DOM) av Chris Coyier (@chriscoyier) på CodePen.

Igen, helt stylad av den globala CSS. Coola. Det kan vara önskvärt. Det kanske inte heller önskvärt. Kanske du är ute efter att web components för att isolera stilar för dig. Web components kan göra det via Skuggan DOM. Här är samma komponent, med hjälp av Shadow DOM istället:

Se Pennan Web Component med Lokala Stilar av Chris Coyier (@chriscoyier) på CodePen.

Observera att funktionaliteten fungerar fortfarande (även om vi hade att querySelector<code> genom <code>shadowRoot), men vi har helt förlorat den globala styling. Skuggan DOM boundry (shadow root) förhindrar styling som kommer in eller går ut (sorta som en iframe).

Skugga Root

Det finns ingen övergripande sätt för att penetrera den gränsen att jag är medveten om, så om du vill ta stilar, du måste sätta dem i mallen.

Se Pennan Web Component med Lokala Stilar av Chris Coyier (@chriscoyier) på CodePen.

Detta skulle vara mycket påträngande om ni båda verkligen ville använda Skugga men DOM ville också din globala stilar. Det är roligt att det är en Skugga DOM “mode” för att öppna och stängda för att tillåta eller inte tillåta JavaScript in och ut, men inte CSS.

Om det är du, du kommer förmodligen att behöva @import oavsett globala stilmallar som du kan för att få in de globala stilar och hoppas att de är cachade och webbläsaren är smart om det på ett sådant sätt att det inte är en stor prestanda hit.

Jag kommer att använda CodePen är direkt länken till CSS-funktionen för att importera format från Pennan sig i web component:

Se Pennan Web Component med Lokala Stilar av Chris Coyier (@chriscoyier) på CodePen.

En annan viktig sak att veta är att CSS anpassade egenskaper tränga in i Skuggan DOM! Det är rätt, det gör de. Du kan välja web component i CSS och ställa dem där.

Se Pennan Web Component med Anpassade Egenskaper med Chris Coyier (@chriscoyier) på CodePen.