ഇതൊരു നല്ല ഉദാഹരണമാണ്

നിങ്ങളുടെ പ്രോജക്റ്റുകൾ ലളിതമാക്കാൻ നിങ്ങൾക്ക് നേറ്റീവ് HTML എലമെന്റുകൾ ഉപയോഗിക്കാം. ഒരു ലൈബ്രറി ഇൻസ്റ്റാൾ ചെയ്യുന്നതിന് പകരം നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന 8 എലമെന്റുകൾ താഴെ പറയുന്നവയാണ്:

  • മോഡലുകൾക്കായി <dialog>
  • അക്കോർഡിയൻസിനായി <details>, <summary> എന്നിവ
  • പാനലുകൾക്കായി popover attribute
  • ഡ്രോപ്പ്ഡൗണുകൾക്കും ഓട്ടോകംപ്ലീറ്റിനും <select>, <datalist> എന്നിവ
  • സ്ലൈഡറുകൾക്കായി <input type="range">
  • കളർ പിക്കറുകൾക്കായി <input type="color">
  • ഡേറ്റ് പിക്കറുകൾക്കായി <input type="date">
  • ലേസി ലോഡിംഗിനായി loading="lazy"

ഈ എലമെന്റുകൾ കുറഞ്ഞ അളവിൽ കോഡ് ഉപയോഗിക്കാനും മെയിന്റനൻസ് കുറയ്ക്കാനും നിങ്ങളെ സഹായിക്കും. കൂടാതെ ഇവ സൗജന്യമായി അക്സസിബിലിറ്റി ഫീച്ചറുകളും നൽകുന്നു. ഒരു ലൈബ്രറി ഇൻസ്റ്റാൾ ചെയ്യാതെ തന്നെ സാധാരണയായി ഉപയോഗിക്കുന്ന UI കമ്പോണന്റുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് ഈ എലമെന്റുകൾ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു ഫോക്കസ് ട്രാപ്പും (focus trap) സ്റ്റൈൽ ചെയ്യാവുന്ന ബാക്ക്ഡ്രോപ്പും (styleable backdrop) ഉള്ള ഒരു മോഡൽ വിൻഡോ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് <dialog> ഉപയോഗിക്കാം.

ഉറവിടം: https://dev.to/dimonb19a/8-native-html-elements-you-dont-need-a-library-for-29b4