En Introduksjon til Web Components

0
34

Front-end utvikling beveger seg på en pause-hals tempo. Dette er gjort tydelig av utallige artikler, tutorials, og tråder bemoaning staten av det som en gang var en ganske enkel tech stabelen. I denne artikkelen vil jeg diskutere hvorfor Web Components er et flott verktøy for å levere høy kvalitet brukeropplevelser uten kompliserte rammeverk eller bygge trinn og som ikke risikerer å bli foreldet. I de påfølgende artiklene i denne fem-del-serien, vi vil dykke dypere inn i hver enkelt av spesifikasjoner.

Denne serien forutsetter en grunnleggende forståelse av HTML, CSS og JavaScript. Hvis du føler deg svak i ett av disse områdene, ikke bekymre deg, å bygge et tilpasset element faktisk forenkler mange kompleksiteten i front-end utvikling.

Artikkel-Serien:

  1. En Introduksjon til Web-Komponenter (Dette innlegget)
  2. Lage Gjenbrukbare HTML-Maler (Kommer snart!)
  3. Opprette en Egendefinert Element fra Scratch (Kommer snart!)
  4. Omfatter Stil og Struktur med Skygge DOM (Kommer snart!)
  5. Avanserte Verktøy for Web Components (Kommer snart!)

Hva er Web Components, likevel?

Web-Komponentene består av tre separate teknologier som brukes sammen:

  1. Tilpassede Elementer. Ganske enkelt, dette er fullt gyldig HTML-elementer med egendefinerte maler, atferd og tag-navn (f.eks. <en-dialog ->) laget med et sett av JavaScript-Api-er. Tilpassede Elementer er definert i HTML-Levende Standard spesifikasjon.
  2. Shadow DOM. I stand til å isolere CSS og JavaScript, nesten som en <iframe>. Dette er definert i den Levende Standard DOM spesifikasjon.
  3. HTML-maler. Brukerdefinerte maler i HTML som ikke gjengis til tilkalt. <Mal> – tag-er definert i HTML-Levende Standard spesifikasjon.

Disse er det som gjør opp Web Components spesifikasjon.

HTML-Import er sannsynlig å være den fjerde teknologi i bunken, men det har ennå ikke implementert i noen av de fire store nettlesere. Chrome-teamet har annonsert det en hensikt å implementere dem i en fremtidig versjon.

Web Components er generelt tilgjengelig i alle de store nettleserne, med unntak av Microsoft Kanten og Internet Explorer 11, men polyfills eksisterer for å fylle disse hullene.

Med henvisning til noen av disse som Web Components er teknisk korrekt, fordi begrepet i seg selv er litt overbelastet. Som et resultat, hver av teknologiene kan brukes uavhengig av hverandre eller kombineres med noen av de andre. Med andre ord, de er ikke gjensidig utelukkende.

La oss ta en rask titt på hver av de tre første. Vi vil dykke dypere inn i dem i andre artikler i denne serien.

Tilpassede elementer

Som navnet tilsier, tilpassede elementer er HTML-elementer, som <div>, <section> – eller <artikkel>, men noe vi kan kalle oss selv som er definert via en nettleser API. Tilpassede elementer er akkurat som de standard HTML-elementer — navn i vinkelparenteser — bortsett fra at de alltid har en strek i dem, som <nyheter-glidebryteren> eller <bacon-cheeseburger>. Fremover, nettleser leverandører som har forpliktet seg til ikke å opprette nye innebygde elementer som inneholder en strek i deres navn, for å hindre konflikter.

Tilpassede elementer inneholde sin egen semantikk, atferd, markup og kan deles på tvers av rammer og nettlesere.

klasse MyComponent strekker seg HTMLElement {
connectedCallback() {
dette.innerHTML = `<h1>Hello world</h1>`;
}
}

customElements.define(‘min-komponent’, MyComponent);

Se Penn
Tilpassede elementer demo av Caleb Williams (@calebdwilliams)
på CodePen.

I dette eksemplet, vi definerer <min-komponent>, vår egen HTML-element. Riktignok, det gjør ikke mye, men dette er den grunnleggende byggesteinen i et tilpasset element. Alle tilpassede elementer må på noen måte utvide en HTMLElement for å bli registrert med nettleseren.

Tilpassede elementer eksisterer uten tredjeparts rammeverk og leseren leverandører er dedikert til fortsatt bakoverkompatibilitet av spec, men alle som garanterer at komponenter er skrevet i henhold til spesifikasjonene vil ikke lide fra å bryte API endringer. Hva er mer, disse komponentene kan generelt brukes ut-av-boksen med dagens mest populære rammeverkene, inkludert Kantete, Reagere, Vue, og andre med minimal innsats.

Shadow DOM

Den shadow DOM er en sammenfattet versjon av DOM. Dette lar forfattere å effektivt isolere DOM fragmenter fra en annen, inkludert noe som kan brukes som en CSS-velgeren og stiler forbundet med dem. Generelt, innhold innsiden av dokumentets omfang som er referert til som lys DOM, og noe inne i en skygge roten er referert til som skyggen DOM.

Når du bruker lys DOM, et element som kan velges ved hjelp av dokumentet.querySelector (selector’) eller ved å målrette mot alle element er barn ved hjelp av elementet.querySelector (selector’); på samme måte, en skygge root ‘ s barn kan være målrettet ved å ringe shadowRoot.querySelector hvor shadowRoot er en referanse til det dokument fragment — forskjellen er at skyggen root ‘ s barn vil ikke bli velg-stand fra lys DOM. For eksempel, Hvis vi har en skygge roten med en < – knappen> innsiden av det, ringer shadowRoot.querySelector (“knappen”) vil returnere vår-knappen, men ikke bruken av dokumentet søket selector vil gå tilbake som element fordi det tilhører en annen DocumentOrShadowRoot eksempel. Stil-velgere fungerer på samme måte.

I denne forbindelse, skyggen DOM virker liksom som en <iframe> – hvor innholdet er avskåret fra resten av dokumentet, men når vi oppretter en skygge rot, vi har fortsatt full kontroll over at en del av vår side, men omfattet til en kontekst. Dette er hva vi kaller innkapsling.

Hvis du har noen gang skrevet en komponent som gjenbruker samme id eller bygger på enten CSS-i-JS verktøy eller CSS navngi strategier (som BEM), shadow DOM har potensial til å forbedre din utvikler-opplevelse.

Tenk deg følgende scenario:

<div>
<div id=”eksempel”>
<!– Pseudo-kode som brukes til å utpeke en skygge rot –>
<#skygge-root>
<style>
knappen {
bakgrunn: tomat;
color: white;
}
</style>
<- knappen id=”knappen”>Denne vil bruke CSS bakgrunn tomat</button>
</#skygge-root>
</div>
<- knappen id=”knappen”>Ikke tomat</button>
</div>

Bortsett fra pseudo-kode i <#skygge-root> (som er brukt her for å markere skyggen grense som ikke har noen HTML-element), HTML er fullt ut gyldig. Til å feste en skygge roten til noden ovenfor, ville vi kjøre noe sånt som:

const shadowRoot = – dokument.bürgerliches(‘eksempel’).attachShadow({ modus: ‘åpne’ });
shadowRoot.innerHTML = `<style>
knappen {
farge: tomat;
}
</style>
<- knappen id=”knappen”>Denne vil bruke CSS farge tomat <slot></slot></button>`;

En skygge roten kan også inkludere innhold fra sin som inneholder dokumentet ved å bruke <slot> – element. Ved hjelp av en spilleautomat vil slippe bruker innhold fra ytre dokumentet på et bestemt sted i skyggen din rot.

Se Penn
Shadow DOM stil innkapsling demo av Caleb Williams (@calebdwilliams)
på CodePen.

HTML-maler

Det treffende navnet HTML <mal> – element gjør det mulig for oss å stemple ut gjenbrukbare maler av koden i et vanlig HTML-flow som ikke vil umiddelbart bli gjort, men kan brukes på et senere tidspunkt.

<mal id=”reserve-mal”>
<li><span class=”title”></span> &mdash; <span class=”forfatter”></span></li>
</template>

<ul id=”bøker”></ul>

Eksempelet ovenfor ville ikke gjengi noe av innholdet til et skript har brukt malen, startet koden og fortalte leseren hva du skal gjøre med det.

const fragment = – dokument.bürgerliches(‘bok-mal’);
const bøker = [
{ title: ‘The Great Gatsby’, forfatter: ‘F. Scott Fitzgerald’ },
{ title: ‘A Farewell to Arms’, forfatter: ‘Ernest Hemingway’ },
{ title: ‘Catch 22′, forfatter: “Joseph Heller’ }
];

bøker.forEach(bestill => {
// Oppretter en forekomst av malen innhold
const eksempel = – dokument.importNode(fragment.innhold, true);
// Legg til relevant innhold til mal
forekomsten.querySelector(‘.tittel’).innerHTML = reserve.tittel;
forekomsten.querySelector(‘.forfatter’).innerHTML = reserve.forfatter;
// Legg til forekomsten ot DOM
dokumentet.bürgerliches(‘bøker’).appendChild(eksempel);
});

Legg merke til at i dette eksemplet opprettes en mal (<mal id=”reserve-mal”>) uten noen andre Web-Komponenter, illustrerer igjen at de tre teknologiene i stakken kan brukes uavhengig av hverandre eller kollektivt.

Tilsynelatende, brukere av en tjeneste, som bruker malen API kunne skrive en mal av enhver form eller struktur som kan opprettes på et senere tidspunkt. En annen side på et nettsted kan bruke den samme tjenesten, men strukturen malen på denne måten:

<mal id=”reserve-mal”>
<li><span class=”forfatter”></span>s klassiske roman <span class=”title”></span></li>
</template>

<ul id=”bøker”></ul>

Se Penn
Eksempel på en mal av Caleb Williams (@calebdwilliams)
på CodePen.

Som oppsummerer vår introduksjon til Web Components

Som web-utvikling fortsetter å bli mer og mer komplisert, og det vil begynne å gi mening for utviklere som oss til å begynne å utsette mer og mer utvikling til web-plattformen i seg selv som har fortsatt å modne. Web Components spesifikasjoner er et sett av lavt nivå Api-er som vil fortsette å vokse og utvikle seg som våre behov som utviklere utvikle seg.

I neste artikkel vil vi ta en dypere titt på HTML-maler en del av dette. Deretter vil vi følge opp med en diskusjon av tilpassede elementer og skygge DOM. Endelig, vi vil bryte det hele opp ved å se på høyere nivå verktøy og inkorporering med dagens populære biblioteker og rammer.

Artikkel-Serien:

  1. En Introduksjon til Web-Komponenter (Dette innlegget)
  2. Lage Gjenbrukbare HTML-Maler (Kommer snart!)
  3. Opprette en Egendefinert Element fra Scratch (Kommer snart!)
  4. Omfatter Stil og Struktur med Skygge DOM (Kommer snart!)
  5. Avanserte Verktøy for Web Components (Kommer snart!)