Ποιος είναι ο σκοπός των data-attributes στο HTML…

Τα δεδομένα-attributes (data-*) επιτρέπουν την αποθήκευση πρόσθετων, μη τυπικών δεδομένων σχετικά με τα στοιχεία HTML στην πλευρά του πελάτη χωρίς να χρησιμοποιούν ρητά άλλα attributes ή να χειρίζονται τη δομή του DOM για αυτούς τους σκοπούς.

Αυτά είναι χρήσιμα για:

Αποθήκευση δεδομένων για JavaScript: Το JavaScript μπορεί εύκολα να έχει πρόσβαση σε αυτά τα δεδομένα και να τα χρησιμοποιήσει για δυναμική συμπεριφορά, αλληλεπίδραση με το στοιχείο ή ανταλλαγή πληροφοριών μεταξύ τμημάτων της εφαρμογής.
```
<div id="user-profile" data-user-id="123" data-user-role="admin">
    Γειά σου, admin!
</div>
```
```
// Απόκτηση δεδομένων από τα data-attributes
const userProfile = document.getElementById('user-profile');
const userId = userProfile.dataset.userId; // "123"
const userRole = userProfile.dataset.userRole; // "admin"
```
Δημιουργία προσαρμοσμένων attributes: Αντί να εφευρίσκουμε δικά μας μη τυπικά attributes (που δεν συμμορφώνονται με την προδιαγραφή HTML), χρησιμοποιούμε data-*, που καθιστά τον κώδικα πιο σημασιολογικό και έγκυρο.

Στυλ: Με CSS selectors βασισμένους σε attributes, μπορούμε να στιλιζάρουμε στοιχεία βάσει των τιμών των data- attributes τους.

<button data-status="active">Ενεργό κουμπί</button>
<button data-status="inactive">Ανενεργό κουμπί</button>

/* Στυλ βάσει data-attribute */
button[data-status="active"] {
    background-color: green;
}

button[data-status="inactive"] {
    background-color: gray;
}

Πλαίσια και βιβλιοθήκες: Πολλά frontend frameworks και βιβλιοθήκες χρησιμοποιούν data- attributes για την αρχικοποίηση συστατικών, τη μεταβίβαση παραμέτρων ή τη σύνδεση δεδομένων (π.χ., Vue.js με v-bind ή React με data- attributes για ενσωμάτωση τρίτων βιβλιοθηκών).
Microformats και δομημένα δεδομένα: Σε ορισμένες περιπτώσεις, τα data- attributes μπορούν να χρησιμοποιηθούν για την εισαγωγή microformats ή την επισήμανση δεδομένων κατανοητών από μηχανές.

Γενικά, τα data- attributes παρέχουν έναν ευέλικτο και τυπικό τρόπο αποθήκευσης πρόσθετων πληροφοριών απευθείας στα HTML στοιχεία, διευκολύνοντας την αλληλεπίδραση μαζί τους μέσω JavaScript και CSS.

Ποιος είναι ο σκοπός των data-attributes στο HTML;