Γενικές πληροφορίες για τα Custom Elements
Εισαγωγή
Τα προσαρμοσμένα στοιχεία (Custom Elements) επεκτείνουν το τυπικό HTML με τα δικά τους μεμονωμένα στοιχεία HTML και αναλαμβάνουν εργασίες από την εμφάνιση στο φυλλομετρητή έως τη συμπεριφορά (Javascript), εκεί που δεν υπάρχουν στα προκαθορισμένα στοιχεία της HTML.
Ας κοιτάξουμε μια τυπική σελίδα του WordPress: Η σήμανση HTML αποτελείται από 80% ετικέτες div, οι οποίες είναι φωλιασμένες πολλές φορές και έχουν στυλ με δώδεκα κλάσεις CSS.
Μόνο η HTML5 εισήγαγε την έννοια των προσαρμοσμένων στοιχείων (Custom Elements), τα οποία είναι ουσιαστικά απλά: Όλες οι ετικέτες HTML με παύλα είναι προσαρμοσμένα στοιχεία (Custom Elements), στα οποία τα προγράμματα περιήγησης δεν εκχωρούν κανένα στυλ ή συμπεριφορά.
Τα μεμονωμένα στοιχεία HTML ενσωματώνουν την εμφάνιση και τη συμπεριφορά από την υπόλοιπη σήμανση, τους κανόνες CSS και τα σενάρια της σελίδας.
custom elements – Προσαρμοσμένα στοιχεία στη HTML
Υπάρχουν δύο τύποι προσαρμοσμένων στοιχείων:- Τα προσαρμοσμένα ενσωματωμένα στοιχεία: κληρονομούνται από τυπικά στοιχεία HTML όπως HTMLImageElement ή HTMLParagraphElement. Η υλοποίησή τους επεκτείνει τη συμπεριφορά επιλεγμένων παρουσιών του τυπικού στοιχείου.
- Τα αυτόνομα προσαρμοσμένα στοιχεία: κληρονομούνται από τη βασική κλάση στοιχείων HTML HTMLElement. Πρέπει να εφαρμόζετε η συμπεριφορά τους από την αρχή.
Σημειώστε, δεν είναι ασυνήθιστο ο ορισμός των δικών σας στοιχείων: Τώρα, τα προσαρμοσμένα στοιχεία (Custom Elements) στη HTML ή τα στοιχεία που ορίζονται από τον χρήστη είναι στοιχεία HTML έχουν το δικό τους όνομα. Μόνο είναι σημαντικό τα ονόματα των αυτοπροσδιοριζόμενων στοιχείων να γράφονται με παύλα.
<flex-box>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-box>
Τα προσαρμοσμένα στοιχεία (Custom Elements) είναι στοιχεία χωρίς ιδιότητα - δεν κληρονομούν καμία προεπιλογή, όπως margin ή width. Μπορούν να διαμορφωθούν με CSS και να προσπελαστούν με Javascript.
Ένα έξυπνα εκχωρημένο όνομα το ξεχωρίζει από το περιβάλλον του, έτσι ώστε μπλοκ όπως ένα Flexbox να μπορούν να προωθηθούν απευθείας στη σήμανση. Ενσωματώνουν τη δομή, την εμφάνιση και τη συμπεριφορά από το περιβάλλον τους χρησιμοποιώντας Javascript.
Τα προσαρμοσμένα στοιχεία (Custom Elements) αποτελούν μέρος των Web Components.
Σύνταξη προσαρμοσμένων στοιχείων (Custom Elements)
Ας κοιτάξουμε αναλυτικά την σύνταξη τους: Το όνομα ενός προσαρμοσμένου στοιχείου πρέπει να περιέχει μια παύλα, π.χ. cosmetic-product, extension-sidebar, top-header. Τα ονόματα σύνθετων ετικετών όπως cosmeticProduct, blueLargeButton και reiseDescription, από την άλλη πλευρά, δεν είναι έγκυρα.
Κάθε προσαρμοσμένο στοιχείο πρέπει να αποτελείται από μια ετικέτα ανοίγματος και μια ετικέτα κλεισίματος. Τα στοιχεία που κλείνουν αυτόματα, όπως η ετικέτα img, δεν επιτρέπονται στα προσαρμοσμένα στοιχεία. Ο αναλυτής HTML χρησιμοποιεί την παύλα για να διακρίνει προσαρμοσμένα στοιχεία από κανονικές ετικέτες HTML.
Κάθε προσαρμοσμένο στοιχείο μπορεί να οριστεί μόνο μία φορά, διαφορετικά προκύπτει εξαίρεση DOM.
Δεν υπάρχει άλλη διαφορά σε μια κανονική ετικέτα HTML. Ένα προσαρμοσμένο στοιχείο μπορεί να δημιουργηθεί δυναμικά από Javascript και να χρησιμοποιηθεί πολλές φορές σε μια σελίδα, οι event listener μπορούν να συνδεθούν στο προσαρμοσμένο στοιχείο.
Γενικές πληροφορίες για τα HTML Templates
Χρήση του στοχείου Template
Αυτό το απόσπασμα εξηγεί πώς μπορείτε να χρησιμοποιήσετε το στοιχείο <template> για να δημιουργήσετε ένα ευέλικτο πρότυπο που μπορεί στη συνέχεια να χρησιμοποιηθεί για τη συμπλήρωση του Shadow DOM ενός Webcomponent.
Τώρα, όταν πρέπει να επαναχρησιμοποιήσετε τις ίδιες δομές σήμανσης επανειλημμένα σε μια ιστοσελίδα, είναι λογικό να χρησιμοποιείτε κάποιο είδος προτύπου αντί να επαναλαμβάνετε την ίδια δομή ξανά και ξανά. Αυτό συνηθιζόταν, αλλά είναι πολύ πιο εύκολο με το στοιχείο <template> της HTML. Αυτό το στοιχείο και τα περιεχόμενά του δεν αποδίδονται στο DOM, αλλά εξακολουθεί να είναι δυνατή η αναφορά του χρησιμοποιώντας JavaScript. Ακολουθεί ένα απλό παράδειγμα:
<template id="custom-paragraph">
<p>Μια παράγραφος</p>
</template>
Αυτό δεν θα εμφανίζεται στην οθόνη σας μέχρι να πάρετε μια αναφορά σε αυτήν με JavaScript και στη συνέχεια να την προσαρτήσετε στο DOM, χρησιμοποιώντας για παράδειγμα τον ακόλουθο κώδικα:
let template = document.getElementById("custom-paragraph");
let templateContent = template.content;
document.body.appendChild(templateContent);
Χρήση των προτύπων (Templates) με Webcomponents
Τα πρότυπα είναι χρήσιμα από μόνα τους, αλλά λειτουργούν ακόμη πιο καλύτερα με Webcomponents. Ορίζουμε ένα Webcomponent που χρησιμοποιεί το πρότυπό μας ως περιεχόμενο του Shadow DOM. Tο ονομάζουμε <my-paragraph>:
customElements.define(
"my-paragraph",
class extends HTMLElement {
constructor() {super();
let template = document.getElementById("custom-paragraph");
let templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true)); }},);
Το βασικό σημείο που πρέπει να σημειωθεί εδώ είναι ότι προσαρτούμε ένα clone του περιεχομένου του προτύπου στο Shadow Root, που δημιουργήθηκε χρησιμοποιώντας τη μέθοδο Node.cloneNode();.
Και επειδή προσαρτούμε τα περιεχόμενά του σε ένα Shadow DOM, μπορούμε να συμπεριλάβουμε ορισμένες πληροφορίες στυλ μέσα στο πρότυπο σε ένα στοιχείο <style>, το οποίο στη συνέχεια ενσωματώνεται στο προσαρμοσμένο στοιχείο. Αυτό δε θα λειτουργούσε αν απλώς το προσαρτούσαμε στο τυπικό DOM. Ακολουθεί ένα παράδειγμα:
<template id="custom-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
<p>Μια παράγραφος<p>
</template>
Τώρα μπορούμε να το χρησιμοποιήσουμε απλά προσθέτοντάς το στο HTML αρχείο μας:
<my-paragraph></my-paragraph>
Προσθήκη ευελιξίας με το στοιχείο <slot>
Το στοιχείο <template> δεν είναι πολύ ευέλικτο. Μπορούμε να εμφανίσουμε μόνο ένα κομμάτι κειμένου μέσα σε αυτό, που σημαίνει ότι αυτή τη στιγμή είναι ακόμη λιγότερο χρήσιμο από μια κανονική παράγραφο. Όμως, μπορούμε να καταστήσουμε δυνατή την εμφάνιση διαφορετικού κειμένου σε κάθε στιγμιότυπο στοιχείου χρησιμοποιώντας το στοιχείο <slot>.
Οι θέσεις προσδιορίζονται με το χαρακτηριστικό τους name και σας επιτρέπουν να ορίσετε σύμβολα τοποθεσίας στο πρότυπό σας. Αυτά μπορούν να συμπληρωθούν με οποιοδήποτε τμήμα σήμανσης θέλετε.
Έτσι, εάν θέλουμε να προσθέσουμε ένα <slot> στο παράδειγμά μας, θα μπορούσαμε να ενημερώσουμε το στοιχείο παραγράφου του προτύπου μας ως εξής:
<p><slot name="my-text">Το προεπιλεγμένο μου κείμενο</slot></p>
Εάν το περιεχόμενο του <slot> δεν έχει οριστεί όταν το στοιχείο περιλαμβάνεται στη σήμανση ή εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το στοιχείο <slot>, <my-paragraph> περιέχει απλώς το εναλλακτικό περιεχόμενο "Το προεπιλεγμένο μου κείμενο".
Για να ορίσουμε το περιεχόμενο του <slot>, συμπεριλαμβάνουμε μια δομή HTML μέσα στο <my-paragraph> ένα στοιχείο (σε αυτό το παράδειγμα είναι το στοιχείο <span>) με ένα slot χαρακτηριστικό του οποίου η τιμή είναι η ίδια με το χαρακτηριστικό name του στοιχείου <slot> που θέλουμε να γεμίσει. Ακολουθεί το παράδειγμα:
<my-paragraph>
<span slot="my-text">Αυτό το κείμενο είναι διαφορετικό</span>
</my-paragraph>