Estoy trabajando en la creación de algunos componentes web y tratando de extraer datos de los atributos del componente. Cuando hago console.log(this), muestra el elemento correcto y los atributos asociados. Lo mismo que cuando hago console.log(this.attributes). Sin embargo, si hago console.log(this.getAttribute('attribute')) o console.log(this.hasAttribute('attribute')) obtengo nulo y falso respectivamente.
¿Alguien puede darle sentido a esto? Aquí está el código con el que estoy trabajando:
índice.html
<script src="component.js"></script> <test-component test1="Test-text" test2=""></test-component>componente.js
const template = document.createElement('template'); template.innerHTML = `...`; class TestComponent extends HTMLElement { constructor(){ super(); this.attachShadow({mode: 'open'}); const shadow = this.shadowRoot; shadow.appendChild(template.content.cloneNode(true)); console.log(this); // Shows correct element with attributes console.log(this.attributes); // Shows attributes console.log(this.getAttribute('test1')); // Returns null console.log(this.hasAttribute('test1')); // Returns false } } window.customElements.define('test-component', TestComponent);Solo en la devolución de llamada connectedCallback existe su CE en DOM.
En el constructor , solo se procesa previamente en la memoria, puede trabajar con su shadowDOM, pero el CE aún no está en el DOM (principal), por lo que no puede acceder a los atributos.
customElements.define('test-component', class extends HTMLElement { constructor(){ super() .attachShadow({mode: 'open'}) .innerHTML = `Content in shadowDOM`; } connectedCallback(){ console.log(this.getAttribute('test1')); } }); <test-component test1="A Attribute"></test-component> Si define el CE después de usarlo en el DOM, el CE estará en el DOM y el constructor podrá leer sus atributos.
Nunca debes confiar en este comportamiento.
A. Su usuario de CE puede cargar/definir en el <head>
B. Su usuario de CE puede hacer let myCE = document.createElement("test-component")
que ejecuta el constructor , pero la devolución de llamada connectedCallback solo se ejecutará en el momento en que se .appendchild(myCE)