CSS styling via data attribute is not working properly on IE

Question

I have a list with data attribute "data-layout", it can get two options "vertical" and "horizontal".

In my CSS i change the list items display property according to the layout.

On chrome it works as expected but on IE (tested on IE11) it does not redraw the screen with the change.

If i enter IE's devtools and select on of the items in the elements panel then only it redraws to the correct state.

Here is a reproduction of the problem.

http://fiddle.jshell.net/dimshik/bss3je3u/

Thank you.

document.getElementById('toggle').addEventListener('click',function(){
    var list = document.getElementById('list');
    if(list.dataset.layout == 'vertical'){
        list.dataset.layout = 'horizontal';
    } else {
        list.dataset.layout = 'vertical';
    }  
});

[data-layout="horizontal"] li {
    display: inline;
    padding: 0 10px;
}

<ul id="list" data-layout="vertical">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<br>
<br>
<button id="toggle">Toggle Layout</button>

Answer 1

It seems dataset is changing, but not re-rendering the css.

I've changed your code to setAttribute and it worked (IE11);

http://fiddle.jshell.net/bss3je3u/2/