Si utilizo un elemento personalizado en HTML, todos los atributos proporcionados están disponibles en el constructor
<my-element myparam="fruit">I like bananas</my-element> constructor() {} super() this.param = this.getAttribute("myparam") > this.param = "fruit" Pero si creo una instancia de mi elemento personalizado en JS con document.createElement el constructor se ejecuta inmediatamente, sin que los atributos estén disponibles.
const elem = document.createElement("my-element") > this.param = null Una vez que he agregado el elemento a un nodo DOM, puedo enlazar attributeChangedCallback que se activa cuando llamo a elem.setAttribute , para establecer this.param . Pero eso parece un poco feo. Siento que no debería tener que crear métodos adicionales solo para hacer que un componente se pueda usar a través de JS y HTML. Parece que también hay una situación similar con textNodes / Children.
¿Hay alguna forma de hacer que los atributos y los elementos secundarios estén disponibles para el constructor al crear nodos mediante programación?
editar: por lo que parece que tratar de hacer esto es una mala práctica y solo debería intentar acceder a los atributos en la función connectedCallback(). Siempre que use setAttribute antes de agregar el componente con .appendChild, los valores deberían estar disponibles en ese punto.
El constructor se ejecuta antes de que el elemento se haya adjuntado al DOM cuando usa document.createElement , por lo que no podrá acceder a los atributos ya que aún no existen.
Puede acceder a los atributos en connectedCallback. El siguiente ejemplo básico funciona
customElements.define( "my-el", class extends HTMLElement { constructor() { super(); } connectedCallback() { this.foo = this.getAttribute("foo") console.log("foo", this.foo) // logs "bar" } } ); const el = document.createElement("my-el"); el.setAttribute("foo", "bar"); document.body.append(el) Tiene algunos errores tipográficos: my-element vs. my-component , this.getAttribute("myparam") cuando atribuye arriba se llama param .