Vi har alla projekt som vi g\u00e4rna inte vill jobba p\u00e5. Koden har blivit ohanterlig, omfattningen \u00e4ndrats, snabba korrigeringar till\u00e4mpas ovanp\u00e5 andra korrigeringar, och strukturen kollapsade under dess vikt av spaghettikod. Kodning kan vara en ren r\u00f6ra ibland.<\/p>\n
Projekt underl\u00e4ttas av att anv\u00e4nda enkla, oberoende moduler med ett enda ansvar. Modul\u00e4r kod \u00e4r inkapslad, s\u00e5 det finns mindre behov av att oroa sig f\u00f6r genomf\u00f6randet. S\u00e5 l\u00e4nge du vet vad en modul kommer mata ut n\u00e4r de f\u00e5r en upps\u00e4ttning inmatningar beh\u00f6ver du inte n\u00f6dv\u00e4ndigtvis f\u00f6rst\u00e5 hur<\/em> den uppn\u00e5dde det m\u00e5let.<\/p>\n Att anv\u00e4nda modul\u00e4ra begrepp p\u00e5 ett enda programmeringsspr\u00e5k<\/a> \u00e4r enkelt, men webbutveckling kr\u00e4ver en m\u00e5ngsidig blandning av teknik. Webbl\u00e4sare<\/a> tolkat HTML<\/a>, CSS och JavaScript f\u00f6r att rendera sidans inneh\u00e5ll, stilar och funktionalitet.<\/p>\n De leker inte alltid sn\u00e4llt med varandra eftersom:<\/p>\n Och detta problem \u00e4r ut\u00f6ver de som uppst\u00e5r p\u00e5 grund av spr\u00e5kens k\u00f6rtider, ramverk<\/a>, databaser och andra beroenden som anv\u00e4nds p\u00e5 servern.<\/p>\n En webbkomponent \u00e4r ett s\u00e4tt att skapa ett inkapslat kodblock med ett enda ansvar som kan \u00e5teranv\u00e4ndas p\u00e5 vilken sida som helst.<\/p>\n T\u00e4nk p\u00e5 HTML-taggen Styling och funktionalitet tillhandah\u00e5lls \u00e4ven om du kan g\u00f6ra \u00e4ndringar med olika attribut och JavaScript API-anrop. Valfritt antal T\u00e4nk om du beh\u00f6ver din egen anpassade funktionalitet? Till exempel ett element som visar antalet ord p\u00e5 sidan? Det finns ingen HTML-tagg f\u00f6r Ramverk som React<\/a> och Vue.js<\/a> l\u00e5ter utvecklare skapa webbkomponenter d\u00e4r inneh\u00e5ll, styling och funktionalitet kan definieras i en enda JavaScript-fil. Detta l\u00f6ser m\u00e5nga komplexa programmeringsproblem, men kom ih\u00e5g:<\/p>\n Lyckligtvis brukar popul\u00e4ra begrepp som inf\u00f6rts i bibliotek och ramverk hitta v\u00e4gen in i webstandarder. Det har tagit lite tid, men webbkomponenterna har kommit f\u00f6r att stanna.<\/p>\n\n Efter m\u00e5nga leverant\u00f6rsspecifika halvstartar introducerades begreppet standardwebbkomponenter f\u00f6rst av Alex Russell vid Fronteers Conference 2011<\/a>. Googles Polymer-bibliotek<\/a> (en polyfill baserad p\u00e5 de nuvarande f\u00f6rslagen) anl\u00e4nde tv\u00e5 \u00e5r senare, men tidiga implementeringar visade sig inte i Chrome och Safari f\u00f6rr\u00e4n 2016.<\/p>\n Webbl\u00e4sarleverant\u00f6rer tog tid p\u00e5 sig att f\u00f6rhandla om detaljerna, men webbkomponenter lades till Firefox 2018 och Edge 2020 (n\u00e4r Microsoft bytte till Chromium-motorn).<\/p>\n F\u00f6rst\u00e5eligt nog har f\u00e5 utvecklare varit villiga eller kapabla att anta webbkomponenter men vi har \u00e4ntligen n\u00e5tt en bra niv\u00e5 av webbl\u00e4sarst\u00f6d med stabila API:er. Allt \u00e4r inte perfekt men de \u00e4r ett alltb\u00e4ttre alternativ till ramverksbaserade komponenter.<\/p>\n \u00c4ven om du inte \u00e4r villig att dumpa din favorit \u00e4nnu \u00e4r webbkomponenter kompatibla med alla<\/em> ramverk, och API:erna kommer att st\u00f6djas i m\u00e5nga \u00e5r fram\u00f6ver.<\/p>\n F\u00f6rr\u00e5d av f\u00e4rdiga webbkomponenter \u00e4r tillg\u00e4ngliga f\u00f6r alla att ta en titt p\u00e5:<\/p>\n … men att skriva din egen kod \u00e4r roligare!<\/p>\n Denna guide ger dig en fullst\u00e4ndig introduktion till webbkomponenter som skrivs utan ett JS-ramverk. Du kommer att f\u00e5 l\u00e4ra dig vad de \u00e4r och hur du anpassar dem f\u00f6r dina webbprojekt. Du beh\u00f6ver lite kunskap om HTML5<\/a>, CSS och JavaScript.<\/p>\n Webbkomponenter \u00e4r anpassade HTML-element som Du m\u00e5ste definiera en ES2015-klass f\u00f6r att styra elementet. Det kan heta vad som helst, men HelloWorld \u00e4r vanligt. Det m\u00e5ste f\u00f6rl\u00e4nga HTMLElement-gr\u00e4nssnittet<\/a>, som representerar standardegenskaperna och metoderna f\u00f6r varje HTML-element.<\/p>\n\n
Kolla in v\u00e5r videoguide<\/a> till webbkomponenter<\/h3>\n
Vad \u00e4r webbkomponenter?<\/h2>\n
<video><\/strong><\/code>. Men en webbadress<\/a> kan en tittare anv\u00e4nda kontroller som spela, pausa, g\u00e5 tillbaka, g\u00e5 fram\u00e5t och justera volymen.<\/p>\n<video><\/strong><\/code>-element kan placeras inuti andra taggar, och de kommer inte att skapa konflikter.<\/p>\n<wordcount><\/strong><\/code> (\u00e4nnu).<\/p>\n\n
En kort historik \u00f6ver webbkomponenter<\/h2>\n
\n
Kom ig\u00e5ng med webbkomponenter<\/h2>\n
<hello-world><\/hello-world><\/strong><\/code>. Namnet m\u00e5ste inneh\u00e5lla ett streck f\u00f6r att aldrig kollidera med element som officiellt st\u00f6ds i HTML-specifikationen.<\/p>\n