En mi proyecto, no puedo usar un marco JS moderno como React, solo puedo usar HTML + JS + CSS. Pero todavía quiero crear componentes reutilizables. Leí este enlace , que introdujo los componentes reutilizables HTML. Codifique de la siguiente manera:

Navbar.js

 class Navbar extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = ` <style> nav { height: 40px; display: flex; align-items: center; justify-content: center; background-color: #000000; } ...... </style> <header> <nav> <ul> <li><a href="about.html">About</a></li> <li><a href="work.html">Work</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> `; } } customElements.define('navbar-component', Navbar);

Esto funciona bien ya que solo necesito escribir <navbar-component></navbar-component> cuando quiero reutilizarlo. Sin embargo, ¿hay alguna forma de separar HTML y CSS de Navbar.js? Entonces, ¿podría tener Navbar.css que contiene todo CSS y Navbar.html que contiene todo HTML? ¿Todo lo que necesito hacer es importar Navbar.css y Navbar.html en Navbar.js ?