Button shadow text not clickable

HTML

<button is="ButtonWithText"></button>
<button is="ButtonWithDiv"></button>

CSS

body {
    font-family: Helvetica, Arial, sans serif;
    font-size: 15px;
    padding: 1em;
}

button {
    padding: 0.5em;
}

JavaScript

function ButtonWithText( element ) {
    var root = element.webkitCreateShadowRoot();
    root.innerHTML = "Only my padding is clickable";
}

function ButtonWithDiv( element ) {
    var root = element.webkitCreateShadowRoot();
    root.innerHTML = "<div>Every part of me is clickable</div>";
}

ButtonWithText( document.querySelector( "[is=ButtonWithText]" ) );
ButtonWithDiv( document.querySelector( "[is=ButtonWithDiv]" ) );