Update demos and root clearing logic

demo/notification-basic-demos.html

@@ -20,6 +20,11 @@ <h3>Simple Notification</h3>
             });
 
             notification.renderer = function(root) {
+              // Check if there is a content generated with the previous renderer call not to recreate it.
+              if (root.firstElementChild) {
+                return;
+              }
+
               const container = window.document.createElement('div');
               const boldText = window.document.createElement('b');
               boldText.textContent = 'Notice';
@@ -98,6 +103,10 @@ <h3>Action</h3>
             });
 
             notification.renderer = function(root, owner) {
+              if (root.firstElementChild) {
+                return;
+              }
+
               const plainText = window.document.createTextNode('Can\'t send message.');
               const retryBtn = window.document.createElement('vaadin-button');
 

src/vaadin-notification.html

@@ -359,12 +359,14 @@
           }
 
           this._oldTemplate = template;
+
+          const rendererChanged = this._oldRenderer !== renderer;
           this._oldRenderer = renderer;
 
           if (renderer) {
             this._card = this.$['vaadin-notification-card'];
 
-            while (this._card.firstChild) {
+            while (this._card.firstChild && rendererChanged) {
               this._card.removeChild(this._card.firstChild);
             }