使用 data- 属性的好处是什么？

来源

刚开始我是懵逼的。data-属性是啥？突然想起，日常开发中经常使用data-id来显示双向绑定的属性。那data-*到底是啥？

定义

是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。

所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。
HTMLElement.dataset 属性可以访问它们
除此还有啥呢？
在css中也能访问到。

article::before{

   content:attr( data-** )

}

可以通过css属性选择器改变css样式

article[ data-columns = '3' ]{

    width : 400px;

}

article[ data-colimns = '4' ]{

    width : 500px;

}