WebComponents vs. insertOrderedList

View this fiddle in FireFox (any version as of this authoring) for an example of document.execCommand('insertOrderedList') failing to insert an ordered list inside of Shadow DOM.

by bigdavesmith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.4/webcomponents.js"></script>
<div id="shadowElement"></div>

<button id="insertOrderedList">Insert Ordered List</button>
<button id="insertUnorderedList">Insert Unordered List</button>
<button id="bold">Bold</button>

JavaScript

var editableElement = document.createElement('div');
editableElement.setAttribute('contenteditable', true);
editableElement.innerHTML = 'Select some of this text, and then click one of the buttons below';

document.querySelector('#shadowElement').createShadowRoot().appendChild(editableElement);

document.querySelector('#insertOrderedList').addEventListener('click', function() {
    document.execCommand('insertOrderedList');
});
document.querySelector('#insertUnorderedList').addEventListener('click', function() {
    document.execCommand('insertUnorderedList');
});
document.querySelector('#bold').addEventListener('click', function() {
    document.execCommand('bold');
});