Estoy creando un componente web que mostrará "¡Hola {nombre}!" donde {name} proviene de name="foo" . Cuando lo intento, no aparece ningún error, pero solo muestra "¡Hola, nulo!".
índice.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./script.js"></script> </head> <body> <hello-world name="Joe"></hello-world> </body> </html>secuencia de comandos.js:
class HelloWorld extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); const p = document.createElement('p'); p.innerHTML = `Hello ${this.getAttribute('name')}!`; this.shadowRoot.append(p); } } customElements.define('hello-world', HelloWorld); En cualquier situación, supongamos que el name siempre tendrá una entrada.
No debe leer atributos en el constructor , de lo contrario, está violando la especificación:
Los atributos y los elementos secundarios del elemento no deben inspeccionarse, ya que en el caso de que no se actualice ninguno estará presente, y depender de las actualizaciones hace que el elemento sea menos utilizable.
De:https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
Debe retrasar este tipo de trabajo hasta que se active la devolución de llamada connectedCallback o, en el caso de los atributos, configurar un attributeChangedCallback adecuado.
Cumplir con las especificaciones también resolverá su problema inicial y mejorará en gran medida la funcionalidad y la utilidad de su componente web.
Tenga en cuenta que tampoco es la mejor de las ideas elegir un nombre de atributo que ya existe en la especificación HTML, como un atributo universal.
class HelloWorld extends HTMLElement { p = document.createElement('p'); constructor() { super(); this.attachShadow({ mode: 'open' }).append(this.p); } static get observedAttributes() { return ['greeting-name']; } attributeChangedCallback(attr, oldVal, newVal) { if (oldVal === newVal) return; // nothing to do switch (attr) { case 'greeting-name': this.p.textContent = `Hello ${newVal || 'world'}!`; break; } } connectedCallback() { if (!this.getAttribute('greeting-name')) { this.setAttribute('greeting-name', 'world'); } } } customElements.define('hello-world', HelloWorld); <hello-world greeting-name="Joe"></hello-world> <hello-world id="foo"></hello-world> <input type="text" oninput="document.getElementById('foo').setAttribute('greeting-name', this.value)" placeholder="Type a name" />