joe, 1 month ago

Yesterday, we looked at how to define our own web components and how to use web components that were defined using Shoelace. Today, I figured that we should take a quick look at Lit. Lit is a simple library for building fast, lightweight web components.

Let’s see what yesterday’s “hello world” demo would look like with Lit.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

The syntax is a lot more pleasing in my humble opinion. Let’s see how to do something a little more complex, though.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

This example defines <blog-feed></blog-feed> with a json parameter. Lit has a <a href="https://lit.dev/docs/components/lifecycle/#connectedcallback">connectedCallback()</a> lifecycle hook that is invoked when a component is added to the document’s DOM. Using that, we are running this.fetchBlogFeed() which in turn running await fetch(). It is then using https://lit.dev/docs/components/rendering/ to render the list items.

I am kind of digging Lit.

https://jws.news/2024/playing-more-with-web-components/

#JavaScript #Lit #WebComponents

• x

  Image

  Upload file From url

  Image alternative text
• English-------------------AfarAbkhazianAchineseAcoliAdangmeAdygheAvestanTunisian ArabicAfrikaansAfrihiliAghemAinuAkanAkkadianAlabamaAleutGheg AlbanianSouthern AltaiአማርኛAragoneseOld EnglishOboloAngikaالعربيةAramaicMapucheAraonaArapahoAlgerian ArabicNajdi ArabicArawakMoroccan ArabicEgyptian Arabicঅসমীয়াAsuAmerican Sign LanguageAsturianAtikamekwAvaricKotavaAwadhiAymaraazərbaycanBashkirBaluchiBalineseBavarianBasaaBamunBatak TobaGhomalaбеларускаяBejaBembaBetawiBenaBafutBadagaбългарскиHaryanviWestern BalochiBhojpuriBislamaBikolBiniBanjarKomSiksikáAniiTai Dambamanakanবাংলাབོད་སྐད་BishnupriyaBakhtiaribrezhonegBrajBrahuiBodobosanskiAkooseBuriatBugineseBuluBlinMedumbacatalàCaddoCaribCayugaAtsamChakmaнохчийнCebuanoChigaChamorroChibchaChagataiChuukeseMariChinook JargonChoctawChipewyanCherokeeCheyenneChickasawCentral KurdishChilcotinCorsicanCopticCapiznonCreeMichifCrimean TatarSouthern East CreePlains CreeNorthern East CreeMoose CreeCarolina AlgonquianSeselwa Creole FrenchčeštinaKashubianSwampy CreeChurch SlavicчӑвашWoods CreeCymraegdanskDakotaDargwaTaitaDeutschDelawareSlaveDogribDinkaZarmaDogriLower SorbianCentral DusunDualaMiddle DutchDivehiJola-FonyiDyulaརྫོང་ཁDazagaEmbuEʋegbeEfikEmilianAncient EgyptianEkajukΕλληνικάElamiteMiddle EnglishEsperantoespañolCentral YupikeestieuskaraEwondoExtremaduranفارسیFangFantiPulaarsuomiFilipinoTornedalen FinnishFijianføroysktFonfrançaisCajun FrenchMiddle FrenchOld FrenchArpitanNorthern FrisianEastern FrisianFriulianFryskGaeilgeGaGagauzGan ChineseGayoGbayaZoroastrian DariGàidhligGeezGilbertesegalegoGilakiMiddle High GermanGuaraniOld High GermanGoan KonkaniGondiGorontaloGothicGreboAncient GreekSwiss GermanગુજરાતીWayuuFrafraGusiiGaelgGwichʼinHausaHaidaHakka ChineseHawaiianSouthern HaidaNorthern Haidaעבריתहिन्दीFiji HindiHiligaynonHittiteHmongHmong NjuaHiri MotuhrvatskiUpper SorbianXiang ChineseHaitian CreolemagyarHupaHalkomelemհայերենHererointerlinguaIbanIbibioIndonesiaInterlingueIgboꆈꌠꉙInupiaqEastern Canadian InuktitutWestern Canadian InuktitutIlokoIngushIdoíslenskaitalianoInuktitutIngrian日本語Jamaican Creole EnglishLojbanNgombaMachameJudeo-PersianJudeo-ArabicJutishJawaქართულიKara-KalpakKabyleKachinJjuKambaKawiKabardianKanembuTyapMakondeKabuverdianuKenyangKoroKongoKaingangKhasiKhotaneseKoyra ChiiniKhowarGikuyuKirmanjkiKuanyamaқазақ тіліKakokalaallisutKalenjinខ្មែរKimbunduಕನ್ನಡ한국어Komi-PermyakKonkaniKosraeanKpelleKanuriKarachay-BalkarKrioKinaray-aKarelianKurukhکٲشُرShambalaBafiaCologniankurdî (kurmancî)KumykKutenaiKomikernewekKwakʼwalaKuviкыргызчаLatinLadinoLangiWestern PanjabiLambaLëtzebuergeschLezghianLingua Franca NovaLugandaLimburgishLigurianLillooetLivonianLakotaLombardlingálaລາວMongoLouisiana CreoleLoziNorthern LuriSaamialietuviųLatgalianTshilubaLuba-LuluaLuisenoLundaLuoMizoLuyialatviešuLiterary ChineseLazMadureseMafaMagahiMaithiliMakasarMandingoMasaiMabaMokshaMandarMendeMeruMorisyenMalagasyMiddle IrishMakhuwa-MeettoMetaʼMarshalleseMāoriMi'kmawMinangkabauмакедонскиമലയാളംмонголManchuManipuriInnu-aimunMohawkMossiमराठीWestern MariMelayuMaltiMundangMuscogeeMirandeseMarwariMentawaiမြန်မာMyeneErzyaMazanderaniNauruMin Nan ChineseNeapolitanNamaNorwegian BokmålisiNdebeleLow GermanनेपालीNewariNdongaNiasNiueanAo NagaNederlandsKwasioNorwegian NynorskNgiemboonnorskNogaiOld NorseNovialN’KoSouth NdebeleNorthern SothoNuerNavajoClassical NewariNyanjaNyamweziNyankoleNyoroNzimaoccitanOjibwaNorthwestern OjibwaCentral OjibwaEastern OjibwaOji-CreeWestern OjibwaOkanaganOromooଓଡ଼ିଆиронOsageOttoman TurkishਪੰਜਾਬੀPangasinanPahlaviPampangaPapiamentoPalauanPicardNigerian PidginPennsylvania GermanPlautdietschOld PersianPalatine GermanPhoenicianPaliPijinpolskiPiedmontesePonticPohnpeianMaliseet-PassamaquoddyPrussianOld ProvençalپښتوportuguêsRunasimiKʼicheʼChimborazo Highland QuichuaRajasthaniRapanuiRarotonganRomagnolRohingyaRiffianrumantschIkirundiromânăRomboRomanyRotumanрусскийRusynRovianaAromanianKinyarwandaRwaसंस्कृत भाषाSandaweYakutSamaritan AramaicSamburuSasakSantaliSaurashtraNgambaySangusarduSicilianScotsسنڌيSassarese SardinianSouthern KurdishdavvisámegiellaSenecaSenaSeriSelkupKoyraboro SenniSängöOld IrishSamogitiansrpskohrvatskiTachelhitShanChadian ArabicසිංහලSidamoslovenčinaslovenščinaSouthern LushootseedLower SilesianSelayarSamoanSouthern SamiLule SamiInari SamiSkolt SamichiShonaSoninkeSoomaaliSogdienshqipсрпскиSranan TongoSererSwatiSahoSouthern SothoSaterland FrisianStraits SalishBasa SundaSukumaSusuSumeriansvenskaKiswahiliComorianClassical SyriacSyriacSilesianதமிழ்Southern TutchoneTuluతెలుగుTimneTesoTerenoTetumтоҷикӣTagishไทยTahltanትግርኛTigreTivtürkmen diliTokelauTsakhurTagalogKlingonTlingitTalyshTamashekTswanalea fakatongaNyasa TongaToki PonaTok PisinTürkçeTuroyoTarokoTorwaliTsongaTsakonianTsimshianтатарNorthern TutchoneMuslim TatTumbukaTuvaluTwiTasawaqTahitianTuvinianCentral Atlas TamazightUdmurtئۇيغۇرچەUgariticукраїнськаUmbunduاردوo‘zbekVaiVendaVenetianVepsTiếng ViệtWest FlemishMain-FranconianMakhuwaVolapükVoticVõroVunjoWalloonWalserWolayttaWarayWashoWarlpiriWolofWu ChineseKalmykIsiXhosaMingrelianKangriSogaYaoYapeseYangbenYembaייִדישÈdè YorùbáNheengatuCantoneseVahcuenghZapotecBlissymbolsZeelandicZenagaStandard Moroccan Tamazight中文isiZuluZuniZaza
• Add comment