fix css inside web component

src/4nk.css

@@ -1,4 +1,4 @@
-:root {
+:host {
     --primary-color
     : #3A506B;
     /* Bleu métallique */
@@ -8,6 +8,9 @@
     --accent-color
     : #D68C45;
     /* Cuivre */
+    font-family: Arial, sans-serif;
+    height: 100vh;
+    font-size: 16px;
 }
 body {
   font-family: Arial, sans-serif;
@@ -61,7 +64,7 @@ body {
     margin: 0;
     padding-bottom: 8px;
     width: 100%;
-    font-size: 0.9em;
+    font-size: 0.9rem;
     border-bottom: 1px solid #ccc;
   }
   
@@ -112,7 +115,7 @@ body {
         color: white;
         border-radius: 50%;
         padding: 2.5px 6px;
-        font-size: 0.8em;
+        font-size: 0.8rem;
         font-weight: bold;
       }
     }
@@ -249,7 +252,7 @@ body {
         text-align: center;
         padding: 10px 0;
         cursor: pointer;
-        font-size: 1em;
+        font-size: 1rem;
         color: #6200ea;
         &:hover {
             background-color: rgba(26, 28, 24, .08);
@@ -398,7 +401,7 @@ body {
   
   .card-description {
     padding: 20px;
-    font-size: 1em;
+    font-size: 1rem;
     color: #333;
     width: 90%;
     height: 50px;
@@ -466,7 +469,7 @@ body {
   .input-field {
     width: 36vw;
     padding: 10px 0;
-    font-size: 1em;
+    font-size: 1rem;
     border: none;
     border-bottom: 1px solid #ccc;
     outline: none;
@@ -484,7 +487,7 @@ body {
     top: 0;
     left: 0;
     padding: 10px 0;
-    font-size: 1em;
+    font-size: 1rem;
     color: #999;
     pointer-events: none;
     transition: transform 0.3s, color 0.3s, font-size 0.3s;
@@ -550,7 +553,7 @@ select[data-multi-select-plugin] {
 .multi-select-component {
   width: 36vw;
   padding: 5px 0;
-  font-size: 1em;
+  font-size: 1rem;
   border: none;
   border-bottom: 1px solid #ccc;
   outline: none;
@@ -614,7 +617,7 @@ select[data-multi-select-plugin] {
   display: inline-block;
   text-decoration: none;
   font-size: 14px;
-  line-height: 1.49em;
+  line-height: 1.49rem;
   margin-left: 5px;
   padding-bottom: 10px;
   height: 100%;
@@ -774,7 +777,7 @@ select[data-multi-select-plugin] {
 
 .process-card-description {
   padding: 20px;
-  font-size: 1em;
+  font-size: 1rem;
   color: #333;
   width: 90%;
 }

src/pages/home/home.ts

@@ -1,4 +1,3 @@
-import { Html5QrcodeScanner } from 'html5-qrcode';
 import Routing from '../../services/modal.service';
 import Services from '../../services/service';
 import { addSubscription } from '../../utils/subscription.utils';

src/router.ts

@@ -5,7 +5,6 @@ import Services from './services/service';
 import { cleanSubscriptions } from './utils/subscription.utils';
 import { LoginComponent } from './pages/home/home-component';
 export {Services};
-export {LoginComponent}
 const routes: { [key: string]: string } = {
   home: '/src/pages/home/home.html',
   process: '/src/pages/process/process.html',
@@ -19,6 +18,7 @@ export let currentRoute = '';
 
 export async function navigate(path: string) {
   cleanSubscriptions();
+  cleanPage()
   path = path.replace(/^\//, '');
   if (path.includes('/')) {
     const parsedPath = path.split('/')[0];
@@ -42,8 +42,10 @@ async function handleLocation(path: string) {
   if (content) {
 
     if(path === 'home' ) {
+      const login = LoginComponent
       const container = document.querySelector('#containerId');
       const accountComponent = document.createElement('login-4nk-component');
+      accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;')
       if(container) container.appendChild(accountComponent)
     } else {
       const html = await fetch(routeHtml).then((data) => data.text());
@@ -139,6 +141,11 @@ export async function init(): Promise<void> {
   }
 }
 
+async function cleanPage() {
+  const container = document.querySelector('#containerId');
+  if(container) container.innerHTML = ''
+}
+
 async function injectHeader() {
   const headerContainer = document.getElementById('header-container');
   if (headerContainer) {

src/utils/html.utils.ts

@@ -3,6 +3,6 @@ export function interpolate(template: string, data: { [key: string]: string }) {
 }
 
 export function getCorrectDOM(componentTag: string): Node {
-  const dom = document?.querySelector(componentTag)?.shadowRoot || document.querySelector('#containerId') as Node
+  const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node
   return dom
 }

tsconfig.json

@@ -15,6 +15,8 @@
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": true,
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": "./",