Cleaned things up for next version.

Author: andreasbm

README.md

@@ -283,15 +283,15 @@ openDialog({
     <h3>Do you like this dialog?</h3>
     <button @click="${() => $dialog.open = false}">Umm, yeah!</button>
   `, $dialog)
-}));
+});
 ```
 
 
 [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#extend-webdialog)
 
 ## ➤ Extend WebDialog
 
-It is totally possible to extend the web dialog. The only thing you have to do it define a new class and extend the WebDialog class. Then you can add your custom logic and define a new custom element with your new class. Here's an example of what you could if you for example want a custom dialog that shows an image.
+It is totally possible to extend the dialog. The only thing you have to do it define a new class and extend the `WebDialog` class. Then you can add your custom logic and define a new custom element with your new class. Here's an example of what you could if you for example want a custom dialog that shows an image.
 
 ```js
 import { WebDialog } from "web-dialog";
@@ -327,7 +327,6 @@ class ImageDialog extends WebDialog {
 
     // Get a reference to the img element
     this.$img = this.shadowRoot.querySelector("#img");
-    this.$img.src = this.src;
   }
 
   // Each time the src attribute changes we set the src of the image element
@@ -340,16 +339,31 @@ class ImageDialog extends WebDialog {
   }
 }
 
-// Remember to define your custom element
+// Remember to define your new custom element
 customElements.define("image-dialog", ImageDialog);
 ```
 
-Then you would be able to use it like this.
+After you have defined your new dialog you are be able to use it like this.
 
 ```html
 <image-dialog open center src="https://i.ytimg.com/vi/NCZ0eg1zEvw/maxresdefault.jpg"></image-dialog>
 ```
 
+Or this
+
+```js
+import {openDialog} from "web-dialog";
+
+openDialog({
+  initialize: () => {
+    const $dialog = new ImageDialog();
+    $dialog.src = `https://i.ytimg.com/vi/NCZ0eg1zEvw/maxresdefault.jpg`;
+    $dialog.center = true;
+    return $dialog;
+  }
+});
+```
+
 When our custom dialog opens it will look like this.
 
 <img src="https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example9.png" width="600">

blueprint.md

@@ -227,12 +227,12 @@ openDialog({
     <h3>Do you like this dialog?</h3>
     <button @click="${() => $dialog.open = false}">Umm, yeah!</button>
   `, $dialog)
-}));
+});
 ```
 
 ## Extend WebDialog
 
-It is totally possible to extend the web dialog. The only thing you have to do it define a new class and extend the WebDialog class. Then you can add your custom logic and define a new custom element with your new class. Here's an example of what you could if you for example want a custom dialog that shows an image.
+It is totally possible to extend the dialog. The only thing you have to do it define a new class and extend the `WebDialog` class. Then you can add your custom logic and define a new custom element with your new class. Here's an example of what you could if you for example want a custom dialog that shows an image.
 
 ```js
 import { WebDialog } from "web-dialog";
@@ -268,7 +268,6 @@ class ImageDialog extends WebDialog {
 
     // Get a reference to the img element
     this.$img = this.shadowRoot.querySelector("#img");
-    this.$img.src = this.src;
   }
 
   // Each time the src attribute changes we set the src of the image element
@@ -281,16 +280,31 @@ class ImageDialog extends WebDialog {
   }
 }
 
-// Remember to define your custom element
+// Remember to define your new custom element
 customElements.define("image-dialog", ImageDialog);
 ```
 
-Then you would be able to use it like this.
+After you have defined your new dialog you are be able to use it like this.
 
 ```html
 <image-dialog open center src="https://i.ytimg.com/vi/NCZ0eg1zEvw/maxresdefault.jpg"></image-dialog>
 ```
 
+Or this
+
+```js
+import {openDialog} from "web-dialog";
+
+openDialog({
+  initialize: () => {
+    const $dialog = new ImageDialog();
+    $dialog.src = `https://i.ytimg.com/vi/NCZ0eg1zEvw/maxresdefault.jpg`;
+    $dialog.center = true;
+    return $dialog;
+  }
+});
+```
+
 When our custom dialog opens it will look like this.
 
 <img src="https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example9.png" width="600">

src/demo/app.ts

@@ -4,7 +4,6 @@ import { LightBoxDialog } from "./dialogs/lightbox-dialog";
 import { NestedDialog } from "./dialogs/nested-dialog";
 import { ResultDialog } from "./dialogs/result-dialog";
 import sharedStyles from "./styles/shared.scss";
-import "./dialogs/image-dialog";
 
 const template = document.createElement("template");
 template.innerHTML = `
@@ -104,8 +103,6 @@ template.innerHTML = `
 		<br />
 		<p id="returnvalue-result"></p>
 	</div>
-	
-	<image-dialog open center src="https://i.ytimg.com/vi/NCZ0eg1zEvw/maxresdefault.jpg"></image-dialog>
 `;
 
 export class WebDialogApp extends HTMLElement {

src/lib/open-dialog.ts

@@ -23,7 +23,9 @@ export function openDialog<T extends WebDialog<R>, R = any> ({
 
 	// Construct the dialog
 	const $dialog = initialize();
-	$dialog.center = center;
+
+	// Set the properties
+	center != null ? $dialog.center = center : {};
 
 	// Attach the template to the dialog
 	$content != null? (