removed innerHTML based rendering

components/dist/notifications.js

@@ -217,26 +217,30 @@ customElements.define('sm-notifications', class extends HTMLElement {
         const { pinned = false, icon = '', action } = options;
         const notification = document.createElement('div')
         notification.id = this.randString(8)
-        notification.classList.add('notification');
-        let composition = ``;
-        composition += `
-                    <div class="icon-container">${icon}</div>
-                    <output>${message}</output>
-                    `;
+        notification.className = `notification ${pinned ? 'pinned' : ''}`
+        const iconContainer = document.createElement('div')
+        iconContainer.className = 'icon-container'
+        iconContainer.innerHTML = icon
+        const output = document.createElement('output')
+        output.textContent = message
+        notification.append(iconContainer, output)
         if (action) {
-            composition += `
-                            <button class="action">${action.label}</button>
-                        `
+            const button = document.createElement('button')
+            button.className = 'action'
+            button.innerText = action.label
+            button.addEventListener('click', action.callback)
         }
         if (pinned) {
-            notification.classList.add('pinned');
-            composition += `
-                        <button class="close">
-                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
-                        </button>
-                    `;
+            const button = document.createElement('button')
+            button.className = 'close'
+            button.innerHTML = `
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+            `
+            button.addEventListener('click', () => {
+                this.remove(notification.id)
+            })
+            notification.append(button)
         }
-        notification.innerHTML = composition;
         return notification;
     }