En cada tutorial de componentes web, veo personas que construyen sus elementos personalizados simplemente colocando HTML y CSS dentro de JS (como un valor de cadena para una propiedad de objeto). Lo que me hace preguntarme: ¿hay alguna manera de crear componentes web sin mezclar diseño, estilo y comportamiento como ese?
Siendo más específicos, ¿es posible construir un componente web separando el código en tres archivos (.html, .css y .js)? ¿O incluso hacer un solo archivo, pero tener el código dividido en tres etiquetas ( <template> , <style> y <script> )?
Posible duplicado: ¿Cómo separar los componentes web en archivos individuales y cargarlos?
Aquí, el autor de la respuesta aceptada propuso crear un archivo javascript que usa fetch() para cargar el código fuente HTML para el componente. Luego, dentro del archivo HTML, vincule el archivo CSS separado usando <link rel="stylesheet">
Dentro de su archivo HTML principal, puede importar el script que creó en el primer paso para cargar el componente web.
Esto es solo un resumen, te invito a que lo compruebes por ti mismo :) Saludos