Las plantillas HTML son agradables y rápidas. El problema es que la importación de HTML ha quedado obsoleta. Esto significa que tiene más sentido colocar cada uno de los componentes web en su propio archivo .js en lugar de archivos .html. Sin embargo, si uno usa un archivo .js, por lo que puedo decir, uno no puede usar una plantilla precompilada para adjuntar en el DOM de la sombra, uno tiene que usar una cadena fija que imagino que se analiza cada vez.
Con el componente web .html se podría hacer:
shadowRoot.appendChild(myTemplate.content.cloneNode(true));Sin embargo, en un archivo .js, debe hacer algo como:
something.innerHTML = ` <style> ... /* lots of style */ </style> <b>I'm in shadow dom!</b> <!-- lots of html --> <slot></slot> `;¿No es una mala idea porque el texto debe reevaluarse cada vez, mientras que una plantilla se evalúa una vez?
Entonces, ¿cuál es la forma recomendada de incrustar el estilo y html de uno en un archivo .js para un componente web?
Estoy usando Vanilla JS, sin marcos.
+1 para el código Vanilla, su código durará otros 26 años de JavaScript.
No hay una forma recomendada, todo depende de su caso de uso.
Puede poner <template id="MY-COMPONENT"> en su archivo HTML principal,
y haga document.getElementById("MY-COMPONENT").content.cloneNode(true) en su código de componente (sabiendo cuándo su DOM está listo)
Puedes hacer document.createElement("template") , y tomarlo desde allí
Puede utilizar el componente web <load-file> para cargar archivos HTML externos.
(no hay ventaja de plantilla aquí)
Entonces, todo se reduce a comprender qué necesita su aplicación.
Tenga en cuenta que el patrón que ve en muchos blogs:
let template = document.createElement("template"); template.innerHTML = ` CSS & HTML CONTENT `; ... this.shadowRoot.appendChild(template..content.cloneNode(true));En muchos casos de uso, donde una plantilla analizada apenas se reutiliza , es una forma costosa de escribir:
this.shadowRoot.innerHTML = ` CSS & HTML CONTENT `; Tenga en cuenta que el enfoque de la plantilla adjunta también tiene desventajas (potenciales) (caso límite);
su contenido se analiza asíncrono , mientras que .innerHTML= es síncrono.
Mientras lo hace, asegúrese de aprender las diferencias: