diff --git a/demo/index.html b/demo/index.html
index 1e08e1e..65a202f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -11,7 +11,7 @@
 
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-  <link rel="import" href="./test-el.html">
+  <link rel="lazy-import" href="./test-el.html">
   <link rel="import" href="../nylon-dialog.html">
   <link rel="import" href="../nylon-dialog-body.html">
   <link rel="import" href="../nylon-dialog-footer.html">
@@ -28,16 +28,10 @@
     <h3>Basic nylon-dialog demo</h3>
     <demo-snippet>
       <template>
+
         <button id="btn" onclick="openDailog()">open</button>
-        <nylon-dialog id="modal" path="/b">
-          <div label="test A" path="/a">
-            <div class="modal-body">
-              test
-            </div>
-            <div class="modal-footer">
-              <button>Save</button>
-            </div>
-          </div>
+        <nylon-dialog id="modal">
+          <test-el path-file="./test-el.html" label="test A" path="/a" lazy></test-el>
           <div label="ภาษาไทย" path="/b">
             <nylon-dialog-body>
               <div>test</div>
@@ -46,12 +40,15 @@ <h3>Basic nylon-dialog demo</h3>
         </nylon-dialog>
         <script>
           function openDailog() {
-            document.getElementById('modal').open()
+            Nylon.dialog.open('/a')
           }
-
-          document.getElementById('modal').addEventListener('nylonDialogChanged', function (e) {
-            console.log(e)
+          
+          document.getElementById('modal').addEventListener('nylon-dialog-changed', function (e) {
+            Polymer.importHref(e.detail.element.getAttribute('path-file'),  ()=> {
+              e.detail.pass()
+            })
           })
+          
         </script>
       </template>
     </demo-snippet>
diff --git a/nylon-dialog.html b/nylon-dialog.html
index 05fb9bc..181b162 100644
--- a/nylon-dialog.html
+++ b/nylon-dialog.html
@@ -49,14 +49,14 @@
         font-weight: normal;
       }
 
-       #contentSlot> ::slotted(.modal-body) {
+        #contentSlot> ::slotted(.modal-body) {
         position: relative;
         -webkit-box-flex: 1;
         flex: 1 1 auto;
         padding: 1rem;
-      } 
+      }  
 
-       #contentSlot> ::slotted(.modal-footer) {
+       /* #contentSlot> ::slotted(.modal-footer) {
         display: flex;
         -webkit-box-align: center;
         align-items: center;
@@ -64,7 +64,7 @@
         justify-content: flex-end;
         padding: 1rem;
         border-top: 1px solid #e9ecef;
-      } 
+      }  */
       /* The Close Button */
 
       .close {
@@ -156,20 +156,28 @@ <h5 class="modal-title">[[label]]</h5>
       }
 
       _pathChanged(val, old) {
-        for (var i = 0; i < this.children.length; i++) {
-          var element = this.children[i];
-          if (val == this.children[i].getAttribute('path')) {
+
+        for (let i = 0; i < this.children.length; i++) {
+          let element = this.children[i];
+
+          if (val == element.getAttribute('path')) {
+
+            const pass = _ =>{
+              element._params = this.params
+              if (element.nylonDialogActive) {
+                element.nylonDialogActive(this.params)
+              }
+            }
+
             if (element.getAttribute('label')) {
               this.label = element.getAttribute('label');
             }
             element.classList.add('nylon-selected');
-            this.dispatchEvent(new CustomEvent('nylon-dialog-changed', { detail: { element: element, params: this.params } }));
+            this.dispatchEvent(new CustomEvent('nylon-dialog-changed', { detail: { element: element, params: this.params, pass } }));
 
-            this.children[i]._params = this.params
+            if(element.getAttribute('lazy')==null)  pass()
 
-            if (this.children[i].nylonDialogActive) {
-              this.children[i].nylonDialogActive(this.params)
-            }
+            
 
           }
           else {