HTMLElement.dataset更新时更新伪元素内容属性

Question

我正在使用CSS attr函数动态地将data-*属性的值链接到伪元素的内容:

body::after { content: attr(data-after) }

然后我通过HTMLElement.dataset属性定期更新该数据属性:

setInterval(function () {
    document.body.dataset.after = new Date;
}, 1000);

我注意到在Internet Explorer中,虽然支持所有这些功能,但伪元素没有更新其内容属性以反映最新的更改.

我已经建立了一个小提琴来证明这个问题.您可以在这里在线查看.

我可以做些什么来解决这个限制？

Answer 1

Internet Explorer中存在已知的错误/限制,导致在更新数据集时不会更新伪元素.一个充分的解决方法是使用较旧的(因此更广泛支持的)setAttribute方法更新属性:

setInterval(function () {
    // Work-around for IE bug: http://stackoverflow.com/q/28031707
    document.body.setAttribute( "data-after", new Date );
}, 1000 );

你可以在这里看到结果.

内部已针对此问题提交了一个错误,相应的功能团队应该在即将到来的分类中评估此问题.我们将尽快分配开发周期来解决问题.