Det här är ett inlägg om Skosnöre, ett komponentbibliotek av Cory LaViska, men med en twist. Den definierar alla dina vanliga UX-komponenter: flikar, modaler, dragspel, autokompletteringar och mycket, mycket mer. De ser vackra ut ur lådan, är tillgängliga och helt anpassningsbara. Men istället för att skapa dessa komponenter i React, eller Solid, eller Svelte, etc., skapar den dem med Webbkomponenter; det betyder att du kan använda dem med vilken som helst ramverk.
Några preliminära saker
Webbkomponenter är bra, men det finns för närvarande några små problem att vara medveten om.
Reagera
Jag sa att de fungerar i alla JavaScript-ramverk, men som jag har skrivit tidigare är Reacts stöd för webbkomponenter för närvarande fattiga. För att ta itu med detta, skosnöre faktiskt skapade omslag bara för React.
Ett annat alternativ, som jag personligen gillar, är att skapa en tunn React-komponent som accepterar taggnamnet för en webbkomponent och alla dess attribut och egenskaper, och sedan gör det smutsiga arbetet med att hantera Reacts brister. Jag pratade om det här alternativet i ett tidigare inlägg. Jag gillar den här lösningen eftersom den är utformad för att raderas. Webbkomponentens interoperabilitetsproblem är för närvarande fixat i Reacts experimentella gren, så när den väl har skickats kan alla tunna webbkomponentkompatibla komponenter som du använder sökas igenom och tas bort, vilket ger dig direkt användning av webbkomponenten, utan några React-omslag.
Server-Rendering (SSR)
Stödet för SSR är också dåligt när detta skrivs. I teorin finns det något som heter Deklarativ Shadow DOM (DSD) som skulle möjliggöra SSR. Men webbläsarstödet är minimalt, och i alla händelser kräver DSD faktiskt serverstöd att arbeta rätt, vilket innebär Nästa, Remix, eller vad du nu råkar använda på servern kommer att behöva bli kapabel till någon speciell hantering.
Som sagt, det finns andra sätt att få webbkomponenter till bara arbeta
med en webbapp som är SSR'd med något som Next. Den korta versionen är att skripten som registrerar dina webbkomponenter måste köras i ett blockerande skript innan din uppmärkning tolkas. Men det är ett ämne för ett annat inlägg.
Naturligtvis, om du bygger någon form av klient-renderat SPA, är detta ett icke-problem. Det här kommer vi att arbeta med i det här inlägget.
Låt oss börja
Eftersom jag vill att det här inlägget ska fokusera på skosnören och dess webbkomponentkaraktär kommer jag att använda det Smal för allt. Jag kommer också att använda detta Stackblitz projekt för demonstration. Vi kommer att bygga den här demon tillsammans, steg för steg, men öppna den REPL när som helst för att se slutresultatet.
Jag ska visa dig hur du använder skosnören, och ännu viktigare, hur du anpassar den. Vi ska prata om Shadow DOMs och vilka stilar de blockerar från omvärlden (liksom vilka de inte gör det). Vi kommer också att prata om ::part CSS-väljare – som kan vara helt ny för dig – och vi kommer till och med att se hur Shoelace tillåter oss att åsidosätta och anpassa dess olika animationer.
Om du tycker att du gillar Shoelace efter att ha läst det här inlägget och vill testa det i ett React-projekt är mitt råd att använda ett omslag som jag nämnde i inledningen. Detta gör att du kan använda vilken som helst av Shoelaces komponenter, och den kan tas bort helt och hållet när React skickar de webbkomponentfixar de redan har (leta efter det i version 19).
Vi presenterar skosnören
Skosnören har ganska detaljerad installations instruktioner. Som enklast kan du dumpa och taggar i ditt HTML-dokument, och det är det. För alla produktionsappar vill du dock antagligen endast selektivt importera det du vill ha, och det finns instruktioner för det också.
Med Shoelace installerat, låt oss skapa en Svelte-komponent för att rendera en del innehåll och sedan gå igenom stegen för att helt anpassa det. För att välja något ganska icke-trivialt, gick jag med flikarna och en dialogruta (vanligen kallad en modal) komponenter. Här är lite markering till stor del hämtad från dokumenten:
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
Hello World!
Detta ger några snygga, stilade flikar. Understrykningen på den aktiva fliken animerar till och med snyggt och glider från en aktiv flik till nästa.
Jag kommer inte att slösa bort din tid på att gå igenom varje tum av API:erna som redan är väldokumenterade på Shoelace-webbplatsen. Låt oss istället titta på hur man bäst interagerar med och helt anpassar dessa webbkomponenter.
Interagera med API:t: metoder och händelser
Anropsmetoder och prenumeration på händelser på en webbkomponent kan vara något annorlunda än vad du är van vid med ditt vanliga ramverk, men det är inte alltför komplicerat. Låt oss se hur.
Flikar
Tabs-komponenten () har en show metod, som manuellt visar en viss flik. För att kunna kalla detta måste vi få tillgång till det underliggande DOM-elementet på våra flikar. I Svelte betyder det att använda bind:this. I React skulle det vara en ref. Och så vidare. Eftersom vi använder Svelte, låt oss deklarera en variabel för vår tabs exempel:
let tabs;
...och bind den:
Nu kan vi lägga till en knapp för att kalla det:
Det är samma idé för evenemang. Det finns en sl-tab-show händelse som aktiveras när en ny flik visas. Vi skulle kunna använda addEventListener på vår tabs variabel, eller så kan vi använda Sveltes on:event-name genväg.
console.log(e)}>Det fungerar och loggar händelseobjekten när du visar olika flikar.
Vanligtvis renderar vi flikar och låter användaren klicka mellan dem, så det här arbetet är vanligtvis inte ens nödvändigt, men det finns där om du behöver det. Låt oss nu göra dialogkomponenten interaktiv.
dialog
Dialogkomponenten () tar en open prop som styr om dialogrutan är... öppen. Låt oss deklarera det i vår Svelte-komponent:
let tabs;
let open = false;
Det har också en sl-hide händelse för när dialogrutan är dold. Låt oss passera vår open stödja och binda till hide händelse så att vi kan återställa den när användaren klickar utanför dialogrutans innehåll för att stänga den. Och låt oss lägga till en klickhanterare till den stängningsknappen för att ställa in vår open stötta till false, vilket också skulle stänga dialogrutan.
open = false}>
Hello World!
Till sist, låt oss koppla upp vår öppna dialogknapp:
Och det är det. Att interagera med ett komponentbiblioteks API är mer eller mindre enkelt. Om det var allt det här inlägget gjorde skulle det vara ganska tråkigt.
Men Shoelace – byggd med webbkomponenter – betyder att vissa saker, särskilt stilar, kommer att fungera lite annorlunda än vi kanske är vana vid.
Anpassa alla stilar!
När detta skrivs är Shoelace fortfarande i beta och skaparen överväger att ändra vissa standardstilar, eventuellt till och med ta bort vissa standardinställningar helt och hållet så att de inte längre åsidosätter din värdapplikations stilar. Koncepten vi kommer att täcka är relevanta i båda fallen, men bli inte förvånad om några av de skosnörsspecifikationer jag nämner är annorlunda när du använder det.
Hur snygga Shoelaces standardstilar än är, vi kanske har vår egen design i vår webbapp, och vi vill att våra UX-komponenter ska matcha. Låt oss se hur vi skulle gå tillväga i en webbkomponentvärld.
Det kommer vi faktiskt inte att försöka förbättra något. Shoelace-skaparen är en mycket bättre designer än jag någonsin kommer att vara. Istället ska vi bara titta på hur byta saker, så att du kan anpassa dig till dina egna webbappar.
En snabb rundtur i Shadow DOMs
Ta en titt på en av dessa flikrubriker i dina DevTools; det borde se ut ungefär så här:
Vårt flikelement har skapat en div behållare med en .tab och .tab--active klass och en tabindex, samtidigt som vi visar texten vi skrev in för den fliken. Men märk att den sitter inne i en skuggrot. Detta gör att webbkomponentförfattare kan lägga till sina egna markeringar till webbkomponenten samtidigt som de ger en plats för innehållet we förse. Lägg märke till element? Det betyder i princip "lägg in det innehåll som användaren renderade mellan Web Component-taggarna här.. "
Så komponenten skapar en skuggrot, lägger till lite innehåll till den för att återge den snyggt utformade flikhuvudet tillsammans med en platshållare () som återger vårt innehåll inuti.
Inkapslade stilar
Ett av de klassiska, mer frustrerande problemen inom webbutveckling har alltid varit stilar cascading till platser där vi inte vill ha dem. Du kanske oroar dig för att någon stil reglerar i vår applikation som anger något liknande div.tab skulle störa dessa flikar. Det visar sig att detta inte är ett problem; skuggrötter kapslar in stilar. Stilar utanför skuggroten påverkar inte vad som finns inuti skuggroten (med några undantag som vi kommer att prata om), och vice versa.
Undantagen från detta är ärftliga stilar. Du behöver naturligtvis inte ansöka om en font-family stil för varje element i din webbapp. Istället kan du ange din font-family en gång, på :root or html och få det att ärva överallt under det. Detta arv kommer faktiskt också att tränga igenom skuggroten.
Anpassade CSS-egenskaper (ofta kallade "css-variabler") är ett relaterat undantag. En skuggrot kan absolut läsa en CSS-egenskap som är definierad utanför skuggroten; detta kommer att bli aktuellt om ett ögonblick.
Smakämnen ::part väljare
Vad sägs om stilar som inte ärva. Tänk om vi vill skräddarsy något som cursor, som inte ärver, på något inuti skuggroten. Har vi tur? Det visar sig att vi inte är det. Ta en titt på flikelementbilden ovan och dess skuggrot. Lägg märke till part attribut på div? Det gör att du kan rikta in och styla det elementet utanför skuggroten med hjälp av ::part väljare. Vi ska gå igenom ett exempel är lite.
Åsidosättande skosnören stilar
Låt oss se var och en av dessa tillvägagångssätt i aktion. Från och med nu, mycket av skosnörsstilar, inklusive typsnitt, får standardvärden från anpassade CSS-egenskaper. För att anpassa dessa teckensnitt med din applikations stilar, åsidosätt de anpassade rekvisita i fråga. Ser dokumenten för information om vilka CSS-variabler Shoelace använder, eller så kan du helt enkelt inspektera stilarna i ett givet element i DevTools.
Ärver stilar genom skuggroten
Öppna app.css fil i src katalogen för StackBlitz-projekt. I :root sektionen längst ner, bör du se en letter-spacing: normal; deklaration. Sedan letter-spacing egendom är ärvlig, prova att ställa in ett nytt värde, som 2px. När du sparar kommer allt innehåll, inklusive flikrubrikerna som definieras i skuggroten, att justeras därefter.
Skriver över Shoelace CSS-variabler
Smakämnen komponent läser en --indicator-color Anpassad CSS-egenskap för den aktiva flikens understrykning. Vi kan åsidosätta detta med några grundläggande CSS:
sl-tab-group {
--indicator-color: green;
}Och precis så har vi nu en grön indikator!
Fråga delar
I versionen av Shoelace jag använder just nu (2.0.0-beta.83) har alla icke-inaktiverade flikar en pointer markören. Låt oss ändra det till en standardmarkör för den aktiva (valda) fliken. Vi såg redan att element lägger till en part="base" attribut på behållaren för flikhuvudet. Den för närvarande valda fliken får också en active attribut. Låt oss använda dessa fakta för att rikta in oss på den aktiva fliken och ändra markören:
sl-tab[active]::part(base) {
cursor: default;
}Och det är det!
Anpassa animationer
För lite grädde på den metaforiska kakan, låt oss se hur Shoelace tillåter oss att anpassa animationer. Skosnören använder Web Animations API, och avslöjar en setDefaultAnimation API för att styra hur olika element animerar sina olika interaktioner. Se dokumenten för detaljer, men som ett exempel, här är hur du kan ändra Shoelaces standarddialoganimering från att expandera utåt och krympa inåt, till att istället animera in från toppen och rulla ned medan du gömmer dig.
import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
setDefaultAnimation("dialog.show", {
keyframes: [
{ opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
],
options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
keyframes: [
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
{ opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
],
options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});Den koden finns i App.svelte fil. Kommentera den för att se den ursprungliga standardanimeringen.
Inslagning upp
Shoelace är ett otroligt ambitiöst komponentbibliotek som är byggt med webbkomponenter. Eftersom webbkomponenter är ramverksoberoende kan de användas i alla projekt, med vilket ramverk som helst. Med nya ramverk som börjar komma ut med både fantastiska prestandaegenskaper och även användarvänlighet, har möjligheten att använda widgets för användarupplevelser av hög kvalitet som inte är knutna till något ramverk aldrig varit mer övertygande.
