Atrybuty niestandardowych elementów HTML

Question

Czy podczas pracy z niestandardowymi elementami HTML w komponentach internetowych powinienem nadal nadawać nazwy atrybutom niestandardowym z prefiksem data?

Na przykład:

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

Answer 1

Ogólnie nie ma różnicy między elementami niestandardowymi i wstępnie zdefiniowanymi. Możesz utworzyć dowolny element z numerem document.createElement i zarejestrować go pod numerem document.registerElement. Wynik będzie następujący:

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] } 

Jak widać, po zarejestrowaniu element zostaje nagrodzony własnym konstruktorem. To zapewnia komponentom zachowanie na swój sposób. Ale:

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

to nadal dobra stara równina HTMLElement. Tak więc reguły nazw atrybutów nie zostały zmienione.

Należy pamiętać, że biblioteki, takie jak polimer, mogą dodawać dodatkowe funkcje obsługi atrybutów; powyższe odnosi się tylko do zwykłych komponentów internetowych.

Answer 2

Nie, to nie jest konieczne.

Istniejące elementy HTML mają zdefiniowany zestaw atrybutów, co oznacza, że ​​można unieważnić kod HTML poprzez dodanie dowolnego atrybutu. Wprowadzając atrybuty data-, możliwe było rozszerzenie istniejących elementów bez ich unieważniania.

Komponenty WWW to elementy niestandardowe. Nie mają zdefiniowanego zestawu atrybutów, definiujesz je samemu. To, czy używasz atrybutów data-, zależy całkowicie od Ciebie, ale nie musisz tego robić. Twój komponent nie może stać się nieważny, ponieważ nie ma dla niego poprawnej definicji.

Jeśli zależy Ci na semantycznym/prawidłowym kodzie HTML, ta odpowiedź może być również istotna dla Ciebie: Are custom elements valid HTML5?. W skrócie: użyj myślnika w nazwie komponentu, aby upewnić się, że został wybrany jako poprawny HTML.