Share
I den tidigare handledningen "Hur" Lazy Load "Embedded YouTube Videos" tittade vi på hur man bara laddar upp en Youtube-video när en användare klickar på det. Detta hjälper i sin tur till att vår webbsida laddas lite snabbare, speciellt om den innehåller flera Youtube-videor.
Om du följde handledningen noggrant har du sett att vi var tvungna att lägga till ett par div element, tillsammans med klasser, stilar och skript för att få det att fungera.
Att lägga till allt detta varje gång är inte det mest praktiska tillvägagångssättet. vad händer om vi skulle kunna ersätta allt detta genom att istället använda ett element som inte är i kassan, som
# Shadow-rot? Läs vidare för att få veta merInnan du får smutsiga händer rekommenderar jag dock starkt att du tittar på en av Kezz Braceys fantastiska handledningar, Hur du skapar dina egna HTML-element med webbkomponenter. Detta kommer att ge dig en inblick i webbkomponenter och saker som "Shadow DOM" (även känd som "Shadow Root"), HTML-import och element.
Till att börja med måste vi skapa en ny HTML-fil. Vi heter "youtube-embed.html". Den här filen innehåller all kod som ska registreras och bygger vårt nya element,
Det kommer att innehålla följande JavaScript, så låt oss ta en titt på de nakna benen:
Accentsconagua
(funktion (fönster, dokument, odefinierad) // (1) var thatDoc = dokument; var thisDoc = (thatDoc._currentScript || thatDoc.currentScript) .ownerDocument; // (2) varmall = thisDoc.querySelector ') .content; // (3) var YoutubeProto = Object.create (HTMLElement.prototype); // (4) YoutubeProto.createdCallback = funktion () // (5) var shadowRoot = this.createShadowRoot (); var klon = thatDoc.importNode (mall, sant); shadowRoot.appendChild (klon); // Lägg till anpassad kod här ...; // (6) window.youtubeEmbed = thatDoc.registerElement ("youtube-embed", prototype: YoutubeProto );) (fönster, dokument);Några saker, men numreras logiskt, så låt oss ta en titt på vad det gör:
thatDoc, refererar till huvuddokumentet där vi distribuerar det anpassade elementet. Den andra variabeln, thisDoc, är det dokument där vi registrerar vårt nya HTML-element, i detta fall, det youtube-embed.html.HTMLElement objekt. Detta gör det möjligt för vårt nya element att ärva metoder och egenskaper av något HTML-element som id, klassnamn, clientHeith, scrollTop, och childeNodes.createdCallback är funktionen som omedelbart ska instantieras när det nya elementet skapas.Därefter inom huvud dokument, där våra videor kommer att inbäddas, importerar vi youtube-embed.html.
Webkomponenter är en serie webbtekniker (Mall, HTML Import, Custom Element och Shadow DOM) sammanställda. Vissa webbläsare som Opera och Chrome stöder redan dessa funktioner, men Firefox, Edge och Safari har egna synpunkter på att stödja dem, eftersom de bara stöder dem delvis eller inte alls.
Så, om du vill att ditt element ska vara användbart i ett brett spektrum av webbläsare (det gör du självklart), måste du också ladda webbkomponenterna polyfill.
När vi har gjort alla dessa saker och sätter filerna på plats, är vi nu redo att lägga till de andra kodstyckena för att göra vårt anpassade element levande.
Till att börja med, i "youtube-embed.html" lägger vi till element. Då nestar vi div och de stilar som vi skapade i vår tidigare handledning inom den.
Vid denna tidpunkt, om vi distribuerar vår div element och stilar vi just har lagt till visas nu under det anpassade elementet Shadow DOM.
Gå tillbaka till vår JavaScript, vi måste lägga till följande kod för att välja videoomslagningselementet från skuggdomen. Observera att vi använder querySelector () från vår shadowRoot variabel; Det här är det element där vi kommer att lägga till Youtube iframe senare.
YoutubeProto.createdCallback = function () ... var video = shadowRoot.querySelector (".youtube"); // Välj videobandspelaren;I vår tidigare handledning använde vi data embed ange för att skicka Youtube video ID. Som en påminnelse används ID för att hämta miniatyrbilden för bildbild och för att peka på rätt inbäddning URL för videon.
När det gäller webbkomponenter är ett anpassat namn attribut acceptabelt. I det här fallet kan vi till exempel introducera en bädda in attribut.
Därefter inom createdCallback funktion vi behöver lägga till följande för att få bädda in attributvärde.
YoutubeProto.createdCallback = function () ... var video = shadowRoot.querySelector (".youtube"); // Välj videoomslaget. var embed = this.getAttribute ("embed"); // Hämta inbäddningsattributvärdet. ; Vi kommer att skicka dessa två variabler till vår anpassade funktion.
Kanske är mitt huvud fullt, men jag kan inte tänka på ett riktigt namn för funktionen, alltså doTheThing.
YoutubeProto.createdCallback = function () ... var embed = this.getAttribute ("embed"); var video = shadowRoot.querySelector (".youtube"); this.doTheThing (inbädda, video); ; YoutubeProto.doTheThing = funktion (embedID, videoElem) var source = "https://img.youtube.com/vi/"+ embedID +" / sddefault.jpg "; var bild = ny bild (); image.src = source; image.addEventListener ("load", function () videoElem.appendChild (bild);); videofilm .setAttribute ("src", "https://www.youtube.com/embed/"+ embedID +"? rel = 0 & showinfo = 0 & autoplay = 1 "); this.innerHTML =" "; this.appendChild (iframe); ); ;Den här funktionen utför samma koder som vi lade till i vår tidigare handledning, om än med några justeringar. Funktionen visar miniatyrbilden för Youtube-videobild och lägger till Youtube-videon i wrappelementet, .Youtube, på användarklickan.
Och vi är alla uppsatta! Kolla in källkoden och demo webbplatsen.
I den här handledningen har vi paketerat kod från vår tidigare handledning till en webbkomponent. Vi kan nu bädda in en Youtube-video mer elegant med vårt nya anpassade element:
All kod (JavaScript, CSS, HTML) är inkapslad i separat HTML, vilket hindrar eventuella fel i den filen att bryta hela webbplatsen. Och när vi behöver återanvända det i andra projekt, går vi vidare och importerar HTML, youtube-embed.html.
Kolla in demo på GithubDetta är bara ett exempel på hur vi kan använda webbkomponenter. Du kan hitta mer fantastiska implementeringar av webbkomponenter på customelements.io. Slutligen hoppas jag att du haft denna handledning och fann det en lätt att följa referens.
