Совместимость атрибутов DOM data-x - это безопасно?

Question

Мне было интересно, как выглядит совместимость браузера при использовании атрибутов data-varname для элементов?

На всем сайте я использую атрибуты данных, чтобы указать номера строк, идентификаторы ссылок и т. Д. Для удаления и вставки ajax.

Например:

<ul>
    <li data-row="1">First Row <a href="#" data-row="1" data-id="123">remove</a></li>
    <li data-row="2">Second Row <a href="#" data-row="1" data-id="111">remove</a></li>
</ul>

$(document).ready(function(){
    $("li a").click(function(){
        var index = $(this).attr("data-row");
        $("li [data-row='" + index + "']").remove();
            // ajax deletion in database referencing data-id attribute
    });
});

Я знаю, что могу просто сослаться на родителя якоря, чтобы удалить его, а не смотреть на атрибут строки данных элемента, но это всего лишь пример, демонстрирующий его базовое использование. .

Я хочу знать, насколько «безопасно» использовать этот атрибут данных. Это довольно универсально совместимо или все еще есть большое количество браузеров, которые не будут правильно работать с этим?

Answer 1

Это абсолютно безопасно. Браузеры всегда принимают нераспознанные атрибуты. Все, что произошло с атрибутами data- *, было то, что HTML5 определил (а), что эти имена никогда не будут использоваться для каких-либо других официальных целей, и (б) API, чтобы сделать доступ к этим значениям в JavaScript более удобным.

Если вы используете новый API, то вам потребуется полифил для старых браузеров и тех, у которых пока нет встроенной поддержки API, но то, что вы делаете, не использует этот API.