Merge branch 'fix/dialog-polyfill' into 'master'

bugfix: dialog polyfill

Closes #40

See merge request !25

examples/dialog.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>SIB test: sib-router</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GoogleChrome/dialog-polyfill@master/dist/dialog-polyfill.css">
     <script type="module" src="../src/index.js"></script>
     <style>
       sib-router {

src/sib-route.js

+import dialogPolyfill from 'https://cdn.jsdelivr.net/gh/GoogleChrome/dialog-polyfill@master/index.js'
 export default class SIBRoute extends HTMLElement {
   constructor() {
     super();
@@ -80,10 +81,8 @@ export default class SIBRoute extends HTMLElement {
     }
   }
   activate(keepURL=false) {
-    if (
-      'HTMLDialogElement' in window &&
-      this.view instanceof window.HTMLDialogElement
-    ) {
+    if (this.view.tagName === 'DIALOG') {
+      dialogPolyfill.registerDialog(this.view)
       if (!this.view.hasAttribute('open')) {
         this.view.showModal();
       }
@@ -95,11 +94,11 @@ export default class SIBRoute extends HTMLElement {
     if (!keepURL) this.updateSubRouters();
   }
   hide() {
-    if (
-      'HTMLDialogElement' in window &&
-      this.view instanceof window.HTMLDialogElement
-    ) {
-      this.view.close();
+    if (this.view.tagName === 'DIALOG') {
+      dialogPolyfill.registerDialog(this.view)
+      if (this.view.hasAttribute('open')) {
+        this.view.close();
+      }
     } else {
       this.view.setAttribute('hidden', '');
     }