Mientras jugaba con elementos personalizados, me preguntaba si se podrían usar atributos personalizados dentro de los elementos (y posiblemente también dentro de sus elementos secundarios). Sé que VueJS hace algo similar con atributos como v-bind, v-for, etc. y sé que probablemente hay muchas más cosas debajo del capó de lo que me doy cuenta. Intenté registrar elementos personalizados e intentar recuperarlos así:
<new-element cool="Awesome!"> </new-element> class NewElement extends HTMLElement { constructor() { super(); this.coolAttr = this.getAttribute("cool"); } } customElements.define("new-element", NewElement);Sin embargo, al cargar la página (en Google Chrome para mí), los atributos "personalizados" desaparecen y cualquier intento de obtenerlos recupera nulo. ¿Hay alguna forma de "registrar" estos atributos personalizados o tengo que ceñirme a los atributos de datos?
Los atributos pasan a estar disponibles en connectedCallback ,
aún no están disponibles en el constructor
¡A menos que el elemento personalizado se analice (en el DOM) ANTES de que se defina el elemento!
También tenga en cuenta que el attributeChangedCallback se ejecuta antes que connectedCallback
para atributos observados
Ver también: https://andyogo.github.io/custom-element-reactions-diagram/
.as-console-row-code { font: 12px Arial!important; background:yellow; color:darkred; } .as-console-row:after{ display:none!important } <before-element cool="Awesome?">FOO</before-element> <script> class NewElement extends HTMLElement { log( ...args ){ console.log(this.nodeName, `cool:${this.getAttribute("cool")}`,"\t\t\t",...args ); } static get observedAttributes() { return ["cool"]; } constructor() { const name = "constructor"; // CAN! run code BEFORE super()! // super() sets AND returns the 'this' scope super().log(name); } connectedCallback() { this.log("connectedCallback", this.innerHTML || "innerHTML not parsed yet"); // be aware this.innerHTML is only available for PARSED elements // use setTimeout(()=>{...},0) if you do need this.innerHTML } attributeChangedCallback(name, oldValue, newValue) { this.log(`attributeChangedCallback name:${name}, old:${oldValue}, new:${newValue}`); } } customElements.define("before-element", class extends NewElement {}); customElements.define("after-element", class extends NewElement {}); </script> <after-element cool="Awesome!!">BAR</after-element>Se puede resolver fácilmente agregando el nombre de los atributos después de "datos-".
<New-element data-*="Anything you want" />por ejemplo, puedes tener:
<element data-cool="value">Puede tener tantos atributos personalizados como desee.