Como acessar e renderizar atributos de dados com CSS e JavaScript

Os atributos de dados nos permitem incorporar atributos de dados personalizados em HTML. De acordo com o MDN , os atributos de dados nos permitem armazenar informações extras em elementos HTML semânticos padrão sem outros hacks, como atributos não padrão ou propriedades extras no DOM.

A beleza desses atributos de dados é que eles podem ser acessados ​​em CSS e JavaScript. Vamos ver primeiro um exemplo de como funciona com CSS:

<b data-content="John Doe"></b>
<style type="text/css">
  b::after{
       content: attr(data-content);
  }
</style>

Além disso, o JavaScript pode ser usado para acessar e renderizar atributos de dados na página da web. Vejamos um exemplo abaixo:

var name = b.document.getElementById("name");

console.log(name.dataset.parent);

Referências notáveis