Sobre os data attributes, o propósito deles é simplesmente de armazenar dados customizados associados a um elemento, quando não há nenhum outro atributo que sirva. Isso é descrito pela própria especificação do HTML:
Custom data attributes are intended to store custom data, state, annotations, and similar, private to the page or application, for which there are no more appropriate attributes or elements.
No mesmo link tem alguns exemplos de uso, e tem outros no tutorial da MDN.
Ou seja, os data attributes não foram criados para substituir id
e class
(que foi o que eu entendi do seu texto). Inclusive, esta distinção sobre classes serem usadas no CSS e id
somente para acessibilidade vai contra a especificação do HTML, que lista os usos do atributo id
:
An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragments, as a way to target an element when scripting, and as a way to style a specific element from CSS.
Repare que ele lista os usos em scripts (ou seja, inclui querySelector
) e CSS. Claro que data attributes também podem ser usados em JS e CSS, mas não quer dizer que eles substituem ou corrigem alguma falha do id
e class
: simplesmente são atributos diferentes, cada um com seu propósito.
Enfim, eu vejo a busca por atributos como uma alternativa quando não há opção melhor (elemento não tem id
ou nenhuma outra característica mais específica), ou quando eu realmente preciso somente de elementos que possuem tal atributo. Mas nunca como substituto de id
ou class
. Eu prefiro usar o seletor mais específico possível para cada caso. E se um elemento é tão importante a ponto de eu precisar fazer algo específico com ele, talvez seja o caso dele ter um id
próprio (ou class
, caso seja um grupo de elementos com o mesmo propósito, por exemplo).
Aliás, se o id
ou class
dos elementos está mudando tanto a ponto de "justificar" o uso de data attributes, é sinal de que tem algo errado aí, pois estes dados não deveriam mudar tanto assim.
Geralmente quando o id
e class
mudam bastante é nos casos de frameworks que os geram dinamicamente, mas aí esses frameworks costumam fornecer outras maneiras de acessar estes elementos. Tirando isso, esses atributos deveriam ser mais estáveis (se não são, isso é um sintoma e o problema é outro, e a solução não é usar outros atributos).
E vale lembrar que getElementById
e querySelector
retornam apenas um elemento (ou null
caso não seja encontrado). Os demais sim, retornam coleções.
Quanto a usar const
, let
e var
, não é necessariamente questão de "preferência", e sim de saber as características de cada um e usar conforme o caso (por exemplo, em browsers velhos só o var
funciona, às vezes vc quer/precisa que faça o hoisting, etc). Outro ponto é que const
também tem armadilhas.