style code moved to custom element

Author: KomMohit

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -75,7 +75,7 @@
     "danger-plugin-no-console": "1.1.2",
     "gulp": "^4.0.2",
     "gulp-sourcemaps": "^3.0.0",
-    "husky": "^7.0.0",
+    "husky": "^7.0.4",
     "lint-staged": "^13.0.0",
     "nodemon": "2.0.7",
     "pinst": "2.1.4",

package-lock.json

@@ -2,12 +2,31 @@ class ShadowDomComponent extends HTMLElement {
     constructor() {
         super();
         this._shadow = this.attachShadow({ mode: 'open' });
+        
+        const style = document.createElement('style');
+        style.textContent = `
+            table {
+                border-collapse: separate;
+                border-spacing: 0;
+                background-color: #EFEFEF;
+                overflow: hidden;
+                border: 1px solid #D0D5DD;
+                border-radius: 15px;
+                font-weight: 300;
+                color: #535862;
+            }
+            td {
+                padding: 15px;
+                border: 1px solid #D0D5DD;
+                text-align: center;
+            }
+        `;
+        this._shadow.appendChild(style);
     }
 }
 
-// Define the custom element
 if ('customElements' in window) {
     if (!window.customElements.get('mck-html-rich-message')) {
         window.customElements.define('mck-html-rich-message', ShadowDomComponent);
     }
-}
+}

package.json

@@ -8756,28 +8756,7 @@ const firstVisibleMsg = {
                         KommunicateUtils.customElementSupported()
                     ) {
                         const kmElement = document.createElement('mck-html-rich-message');
-                        kmElement._shadow.innerHTML = emoji_template;
-                        if (kmElement && kmElement.shadowRoot) {
-                            const style = document.createElement('style');
-                            style.textContent = `
-                            table {
-                                border-collapse: separate;
-                                border-spacing: 0;
-                                background-color: #EFEFEF;
-                                overflow: hidden;
-                                border: 1px solid #D0D5DD;
-                                border-radius: 15px;
-                                font-weight: 300;
-                                color: #535862;
-                            }
-                            td {
-                                padding: 15px;
-                                border: 1px solid #D0D5DD;
-                                text-align: center;
-                            }
-                        `;
-                            kmElement.shadowRoot.appendChild(style);
-                        }
+                        kmElement._shadow.innerHTML += emoji_template;
                         $textMessage.append(kmElement);
 
                         htmlRichMessage = true;