◆ dataset.xxx で属性変えてもスタイルは更新されない
◆ クラスを使うか data-xxx を setAttribute で更新すれば回避できる
◆ dataset.xxx 経由で 更新するのがダメ

IE11 でスタイルが変わらない

クラスより data-xxx のほうが向いてるところもあるので css で data-xxx のバリューごとに値を指定して data-xxx を切り替えて見た目を更新することがあります
Chrome だとなんの問題もないので気づかなかったのですが IE11 を使ったら動いてないことに気づきました

data-xxx が dataset.xxx に対応していますし CSS で [data-xxx="foo"] {} も有効です
なのに 属性を更新しても反映がされません

例

<!doctype html>
<meta charset="utf-8">

<style>
#d {
	width: 300px;
	height: 300px;
	background: lightskyblue;
}

#d[data-p="l"] {
	margin-left: 0;
}

#d[data-p="r"] {
	margin-left: 50%;
}
</style>

<div id="d">
	<button data-to="l">⇦</button>
	<button data-to="r">⇨</button>
</div>

<script>
d.onclick = function(eve) {
	var to = eve.target.dataset.to
	if(!to) return
	d.dataset.p = to
}
</script>

これは div に矢印のボタンがあって⇨を押すと右に移動して⇦を押すと左に移動します
div の data-p に l か r が指定されて r だと margin-left を大きくして右側に移動します

これで ⇨ボタンを押すと Chrome なら右側に移動するのに IE11 の場合は変化なしです
開発者ツールで見ると data-p は更新されています

それとなぜか 開発者ツールで内側の要素を選択すると そのタイミングでスタイルが更新されます
調べた感じ IE11 のバグで dataset オブジェクトを更新してもスタイルの再計算を行われないそうです
開発者ツールを使うとスタイル取得のために計算されるので そのタイミングで更新されるということみたいです
更新後に要素の再描画を行うか setAttribute を使って属性を更新すれば回避できるようです

elem.dataset.p = "r"

// ⇩

elem.setAttribute("data-p", "r")

あとは data-xxx じゃなくて class を使うことでも回避できます

<!doctype html>
<meta charset="utf-8">

<style>
#d {
	width: 300px;
	height: 300px;
	background: lightskyblue;
}

#d.l {
	margin-left: 0;
}

#d.r {
	margin-left: 50%;
}
</style>

<div id="d">
	<button data-to="l">⇦</button>
	<button data-to="r">⇨</button>
</div>

<script>
d.onclick = function(eve) {
	var to = eve.target.dataset.to
	if(!to) return
	d.className = to
}
</script>

そういうことを考えると IE11 対応なら DOM メソッドとかを直接使うより jQuery のほうが良い気もしてきますね