polymer 3 create element runtime and inject html inside slot - polymer

Question

I am trying to create a polymer element in runtime and injecting HTML
inside of it
here is my code:
model-dialog.html
class ModelDialog extends PolymerElement {
static get template() {
return html`
<paper-dialog class="size-position" id="modelDialogId" entry-animation="slide-from-right-animation" exit-animation="slide-right-animation" with-backdrop="{{backdrop}}">
<slot></slot>
<paper-dialog>
`;
}
static get properties() {
return {
header: {
type: String,
value: '',
},
backdrop:{
type: Boolean,
value: false
}
};
}
showModel()
{
this.$.modelDialogId.open();
}
}
customElements.define('model-dialog', ModelDialog);
In the index.html
i am trying to create this element at runtime and trying to append the content to slot
<dom-bind>
<template is="dom-bind">
<h3>Basic model-dialog demo</h3>
<button on-click="_onPrevClick">show model</button>
</template>
</dom-bind>
<script type="module">
domBind._onPrevClick = function()
{
var model1 = document.createElement('model-dialog');
model1.innerHTML = ` <h2>Dialog Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`;
model1.showModel();
}
</script>
It is not rendering the HTML in the paper-dialog element which I had created
actually, the HTML need to render inside slot element which I created inside paper-dialog
Maybe I missed something, or I did it in the wrong way?
kindly help me to solve this.
Thanks in advance .