Fix: Style dissappearing when using multiple tabs of card

dist/plex-meets-homeassistant.js

@@ -19373,7 +19373,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
         };
         this.renderPage = () => {
             if (this)
-                this.innerHTML = '';
+                this.innerHTML = this.loadCustomStyles();
             this.card = document.createElement('ha-card');
             this.card.style.transition = '0.5s';
             this.card.style.overflow = 'hidden';
@@ -19888,7 +19888,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             return container;
         };
         this.loadCustomStyles = () => {
-            this.appendChild(style);
+            // this.appendChild(style);
+            return `<style>${style.innerHTML}</style>`;
         };
         this.getPlayButton = () => {
             const playButton = document.createElement('button');

src/plex-meets-homeassistant.ts

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import Plex from './modules/Plex';
 import PlayController from './modules/PlayController';
 import { escapeHtml, getOffset } from './modules/utils';
-import { CSS_STYLE, LOREM_IPSUM } from './const';
+import { CSS_STYLE } from './const';
 import style from './modules/style';
 
 class PlexMeetsHomeAssistant extends HTMLElement {
@@ -142,7 +142,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 	};
 
 	renderPage = (): void => {
-		if (this) this.innerHTML = '';
+		if (this) this.innerHTML = this.loadCustomStyles();
 		this.card = document.createElement('ha-card');
 		this.card.style.transition = '0.5s';
 		this.card.style.overflow = 'hidden';
@@ -730,8 +730,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 		return container;
 	};
 
-	loadCustomStyles = (): void => {
-		this.appendChild(style);
+	loadCustomStyles = (): string => {
+		// this.appendChild(style);
+		return `<style>${style.innerHTML}</style>`;
 	};
 
 	getPlayButton = (): HTMLButtonElement => {