Creé una función de JavaScript que pretende repetir el código que se usa para crear un nuevo componente web. Pero por alguna razón, el navegador no lo reconoce. No estoy seguro de qué le salió mal. A continuación se muestra el código: _.js:
export const createComponent = (componentName, htmlCode) => { const template = document.createElement("template"); template.innerHTML = `${htmlCode}`; class componentClass extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); // access shadow DOM via shadow root this.shadowRoot.appendChild(template.content.cloneNode(true)); } }; window.customElements.define(componentName, componentClass); }encabezado.js:
import { createComponent } from "./_" createComponent( "component-header", <div> <h1>Title</h1> <nav> <a href="/">Home</a> <a href="about">About</a> <a href="contact">Contact us</a> </nav> </div> )index.html (solo muestro la parte relevante):
<body> <div style="width: clamp(0px,1000px,90%);"> <component-header></component-header> <h2>Topic Name</h2> </div> <script src="./components/toolTip.js"></script> <script src="./components/header.js"></script> </body>¿Cómo hago para que represente el componente en la página web como se supone que debe hacerlo?
Su código se ve bien a primera vista.
Agregue muchas declaraciones de console.log( ) para ver qué no se ejecuta.
POR CIERTO
const template = document.createElement("template"); template.innerHTML = `${htmlCode}`; class componentClass extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); // access shadow DOM via shadow root this.shadowRoot.appendChild(template.content.cloneNode(true)); } }; window.customElements.define(componentName, componentClass);Se puede escribir como:
customElements.define(componentName, class extends HTMLElement { constructor() { super() .attachShadow({ mode: "open" }) .innerHTML = htmlCode; } });Pero, ¿por qué usar shadowDOM?
customElements.define(componentName, class extends HTMLElement { connectedCallback() { this.innerHTML = htmlCode; } });