Attributi su elementi HTML personalizzati

Question

Quando si lavora con elementi HTML personalizzati nei componenti Web, dovrei comunque nominare gli attributi personalizzati con il prefisso data?

Ad esempio:

<!-- Should form be data-form? --> 
<my-button form="foo">click me</my-button> 

Answer 1

In generale, non vi è alcuna differenza tra gli elementi personalizzati e quelli predefiniti. Puoi creare un elemento a tua scelta con document.createElement e registrarlo con document.registerElement. Il risultato sarebbe:

console.log(document.createElement('my-button').constructor); 
//⇒ function HTMLElement() { [native code] } 
console.log(document.registerElement('my-button')); 
//⇒ function my-button() { [native code] } 
console.log(document.createElement('my-button').constructor); 
//⇒ function my-button() { [native code] } 

Come si può vedere, una volta registrato, l'elemento viene assegnato con il proprio costruttore. Ciò fornisce ai componenti la capacità di comportarsi secondo le proprie modalità. Ma:

console.log(document.createElement('my-button').__proto__.__proto__); 
//⇒ HTMLElement 

è ancora un buon vecchio pianura HTMLElement. Pertanto, le regole per la denominazione degli attributi non sono state modificate.

Si noti che le librerie, come il polimero, potrebbero aggiungere ulteriore gestione degli attributi; quanto sopra è vero solo per i componenti web semplici.

Answer 2

No, questo non è necessario.

Gli elementi HTML esistenti hanno un insieme definito di attributi, il che significa che si invaliderà l'HTML semplicemente aggiungendo qualsiasi attributo. Introducendo gli attributi data-, è stato possibile estendere gli elementi esistenti senza invalidarli.

I componenti Web sono elementi personalizzati. Non hanno un insieme definito di attributi, li definisci tu stesso. Se usi o meno gli attributi data- dipende completamente da te, ma non devi. Il tuo componente non può diventare non valido perché non esiste una definizione valida per questo.

Se ti interessa l'HTML semantico/valido, questa risposta potrebbe essere pertinente anche a te: Are custom elements valid HTML5?. In breve: usa un trattino nel nome del componente per assicurarti che venga preso come codice HTML valido.