Tengo un elemento personalizado que muestra un mensaje dentro de tres divisiones anidadas:
class HelloWorld extends HTMLElement { connectedCallback() { const div1 = document.createElement('div') this.appendChild(div1) const div2 = document.createElement('div') div1.appendChild(div2) const div3 = document.createElement('div') div3.textContent = 'Hello World!'; div2.appendChild(div3) } } customElements.define('hello-world', HelloWorld)Funciona, pero no estoy contento con tener todo el marcado HTML dentro de las cadenas. Quiero separar el marcado HTML del JavaScript, preferiblemente en un archivo separado para que mi IDE pueda brindarme un mejor soporte. Aquí hay un ejemplo de cómo quiero separarlos:
<div> <div> <div id="inner-div"></div> </div> </div> class HelloWorld extends HTMLElement { connectedCallback() { const innerDiv = this.getElementById('inner-div') innerDiv .textContent = 'Hello World!'; } } customElements.define('hello-world', HelloWorld)¿Es posible separarlos así?
Había una manera de lograr esto en el pasado, pero se eliminó de la especificación y, posteriormente, también de los navegadores (por ejemplo, Chrome lo eliminó en Chrome 70). Se llamaba HTML imports y originalmente formaba parte de las especificaciones de los componentes web.
Actualmente están trabajando en un reemplazo para esta característica de plataforma que obviamente falta, que se llamará HTML modules . Aquí está el explicador . Lo más probable es que la sintaxis se vea similar a esto:
import {content} from "import.html"; Supongo que resolver los problemas restantes con los módulos HTML puede llevar bastante tiempo, por lo que hasta entonces la única opción viable que tiene es que su pila de compilación resuelva el problema por usted (por ejemplo, con webpack-raw-loader), o confiar en fetch asíncrona para realizar el trabajo (lo que podría resultar en una experiencia de rendimiento menos que óptima).
Ya tenemos módulos JSON y scripts de módulos CSS (a los que también les faltaron características durante mucho tiempo).