Utforming av et Web-Komponenten

0
45

Dette forvirret meg litt her så jeg skriver den ut mens det er friskt i tankene. Bare fordi du bruker en web-komponent betyr ikke stiler av det er helt isolert. Du kan ha innhold i en web-komponent som er stylet normalt sammen med resten av ditt nettsted. Som dette:

Se Penn Web-Komponenten med Global Stiler (fordi ingen Skygge DOM) av Chris Coyier (@chriscoyier) på CodePen.

At <whats up-> – element isolert JavaScript-drevet funksjonalitet av seg selv ved å feste et klikk fører til < – knappen> innsiden av det. Men styling av den knappen kommer fra global CSS brukes til siden.

Men la oss si at vi flytter som < – knappen> til web-komponenten, slik at vi kan bruke <whats up-> alle av seg selv. Vi kan gjøre det med .innerHTML ‘ ing tilpasset element:

Se Penn Web-Komponenten med Global Stiler (fordi ingen Skygge DOM) av Chris Coyier (@chriscoyier) på CodePen.

Igjen, helt stylet av den globale CSS. Kjølig. Det kan være ønskelig. Det er også ikke kan være ønskelig. Kanskje du er ute etter å web components for å isolere stiler for deg. Web-komponenter, kan gjøre det via Skyggen DOM. Her er det samme komponent, ved hjelp av Skygge DOM i stedet:

Se Penn Web-Komponenten med Lokale Stiler av Chris Coyier (@chriscoyier) på CodePen.

Vær oppmerksom på at funksjonaliteten fungerer fortsatt (selv om vi måtte querySelector<code> ved <code>shadowRoot), men vi har helt mistet den globale styling. Skyggen DOM boundry (skygge root) hindrer styling som kommer inn eller går ut (sorta som en iframe).

Shadow Rot

Det er ingen globale måte å trenge at grense som jeg er klar over, så hvis du ønsker å bringe stiler i, du må bringe dem inn i malen.

Se Penn Web-Komponenten med Lokale Stiler av Chris Coyier (@chriscoyier) på CodePen.

Dette ville være svært ubehagelige hvis du virkelig ønsket å bruke Skyggen DOM, men ønsket også den globale stiler. Det er morsomt at det er en Skygge DOM “mode” for å åpne og lukkede for å tillate eller tillate JavaScript i og ut, men ikke CSS.

Hvis det er deg, må du sannsynligvis @import uansett globale stilark du kan for å få i de globale stiler og håper de blir bufret og nettleseren er smart om det på en slik måte at det ikke er en stor ytelse hit.

Jeg vil bruke CodePen er direkte link til CSS-funksjonen for å importere stiler fra Pennen seg inn i web-komponenten:

Se Penn Web-Komponenten med Lokale Stiler av Chris Coyier (@chriscoyier) på CodePen.

En annen viktig ting å vite er at CSS egendefinerte egenskaper trenge Skyggen DOM! Det er riktig, det gjør de. Du kan velge web-komponenten i CSS og sett dem det:

Se Penn Web-Komponenten med Custom Egenskaper ved Chris Coyier (@chriscoyier) på CodePen.