データ属性とは

HTML5 (en-US) は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性やDOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。

データ属性の使用 – ウェブ開発を学ぶ | MDN

とのこと。

要は、HTMLタグに設定できる属性の一つ。独自の属性を設定して、JSとかから属性を取得したり更新したりできるようになる。
カスタムデータ属性とも呼ばれているらしい

基本書式

HTML

<div data-*****="data-attribute">This is a data attribute.</div>

「data-*****」の「*****」を自由に設定することができる。

SCSS

//属性に設定されている値で指定する
div[data-*****="data-attribute"]{
　display: inline-block;
}

//属性で指定する
div[data-*****]{
　display: inline-block;
}

疑似要素で出力する

HTML

<div data-pseudo="これは疑似要素">こっちが素の要素</div>

SCSS

div {
    position: relative;
    display: grid; 
    grid-template-columns: auto;

    &::before {
        content: attr(data-pseudo);  
        grid-row: 1;
    }
}

出力結果

こっちが素の要素

JavaScriptで値を処理

個人的にはJSで処理することが多い。以下は設定されている値を変更する方法。

HTML

<div id="SampleTarget" data-pseudo="値の変更前">こっちが素の要素</div>

SCSS

div {
    position: relative;
    display: grid; 
    grid-template-columns: auto;

    &::before {
        content: attr(data-pseudo);  
        grid-row: 1;
    }
}

JavaScript

let SampleTarget = document.getElementById('SampleTarget');
SampleTarget.dataset.pseudo = 'JSで値を変更する';

出力結果

こっちが素の要素

参考

データ属性の使用 – ウェブ開発を学ぶ | MDN