Polymer 1.x: Getting plain <paper-dialog> to work

Question

How do I get this JSFiddle to display its <paper-dialog> element? Please provide a working JSFiddle or JSBin example.

Code

http://jsfiddle.net/gr3uhucf/2/

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body>
  <paper-button data-dialog="dialog">Dialog</paper-button>
  <paper-dialog id="dialog">
    <h2>Dialog Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </paper-dialog>
</body>
</html>

Solution

If you just want to see the dialog statically, you can add the openend attribute in the HTML (fiddle).

<paper-dialog id="dialog" opened>

To open in on click, call the open function (fiddle).

<paper-button id="dialog-button" data-dialog="dialog">Dialog</paper-button>
<paper-dialog id="dialog">
    <h2>Dialog Title</h2>
</paper-dialog>

<script> 
    document.querySelector("#dialog-button").addEventListener("click", 
        function(){
            document.querySelector("#dialog").open();
        });
</script>