Hi everyone.
I created a simple custom element that works. But each time I call setAttribute on this element I see that the element is being created again. I expected that only attributeChangedCallback should be called in this case. Am I wrong?
Thanks.
You could be wrong, and I might be crazy (apologies to Billy Joel)…
The setAttribute() function is just a way to pass data to the Custom Element. Where do you see the element being created again upon setAttribute? What are you doing when you call setAttribute? What happens? What do you see? Do you have any console.log() statements to see what’s going on?
I have a button for test purposes with click handler like this:
export function button3_click ( event ) {
$w ( ‘#customElement2’ ). setAttribute ( ‘data’ , ‘Test’ + Math . random ());
}
and I have a Custom Element that creates in this way:
class AppPointCloud3d extends HTMLElement {
constructor () {
super ();
console . log ( 'Constructor' );
}
static **get** observedAttributes () {
**return** [ 'data' ];
}
attributeChangedCallback ( name , oldValue , newValue ) {
console . log ('Attribute name: ', name , 'New value: ', newValue );
}
…
What I expect to see in the console when I click on the button:
Attribute name: data, New value: Test0.9475824281950107
What I see:
Constructor
Attribute name: data, New value: Test0.9475824281950107
I conclude that Custom Element was destroyed and created again.
I’ve been testing one of my Custom Elements. I added a console.log() to the constructor, and added a setattr Button to call setAttribute().
The console.log() output only appears once, no matter how many times I click the setattr Button.
I don’t understand your attributeChangedCallback() function. Do you perform any other tasks in the callback? In my example, I re-render the element so that the new attributes are reflected on screen. I have no clue as to why the constructor is called again.
No, I didn’t do anything else.
I modifyed my attributeChangedCallback() function to this:
attributeChangedCallback ( name , oldValue , newValue ) {
console . log ( name , newValue );
if ( name === ‘data’ ) {
this . innerHTML += ‘
’ + newValue ;
}
}
And this is what I see after I clicked 3 times on the button:
Shouldn’t I have 3 lines with text on the screen instead of one?
It’s also worth pointing out that, as stated in the documentation… “Only premium Wix users on sites with their own domain and Wix ads removed can work with custom elements.”
@valery-zaochnuy That certainly does seem strange. It appears as if there is an issue with your custom element code. At least, I haven’t been able to reproduce the problem with my own custom element.
You might want to play around with my Panic Button custom element and see if the same things happens.
For some reason it is not render Custom Element at all
https://valeryzaochnuy6.editorx.io/my-site-5
@valery-zaochnuy I just checked, and although the site is a Premium, it does not have a domain. As the docs state: “Only premium Wix users on sites with their own domain and Wix ads removed can work with custom elements.”
This is most likely the reason your custom element does not render.
@yisrael-wix The same thing:
I just moved your code from $w.onReady to onClick handler and put console.log() to PanicButton constructor. Custom Element was re-created after I clicked on the button.
Got it. Thanks!
@yisrael-wix On published site with own domain it works correclty. Thank you for your help.