.unmount() doesn't work with this.root.innerHTML

[exside]

Help us to manage our issues by answering the following:

1. Describe your issue:

I hope it's just me and I missed something in the docs or somewhere else. Was experimenting today with a tag where I do not use any HTML in the tag for templating, but basically create the HTML programmatically (because it's deeply recursive, did seem easier that way) and then injected it via this.root.innerHTML = markup. That all works fine so far, then I tried to unmount the component just for testing, basically just:

onMounted() {
	// ... some more code
	setTimeout(() => {
		this.unmount();
	}, 10000);
},

which works perfectly with "regular" components where I use HTML for templating directly in the tag.

but for some reason this component didn't remove it's HTML from the DOM, it does fire onBeforeUnmount() and onUnmounted(), but the rendered HTML simply stays on the page where usually (and expectedly) it is removed from the DOM (and thus the page). I then remembered my raw tag to render HTML content which uses this.root.innerHTML = this.props.html, so I tried unmounting that the same way (setTimeout for 10s) and see, same behavior, triggers lifecycle methods but stays in DOM.

Of course there's a workaround by simply doing:

onUnmounted() {
	this.root.innerHTML = '';
}

but I didn't expect having to do that?

So the question is: Is it me doing something wrong here or is this a bug?

2. Can you reproduce the issue?

https://plnkr.co/edit/qp3fJhYjxtcptRFc

3. On which browser/OS does the issue appear?

MacOS / Chrome

5. Which version of Riot does it affect?

9.0.3

7. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

[GianlucaGuarini]

It's a strange bug and I don't know how it's possible that it went unnoticed for so long. I will have a look at it. Thank you for reporting it!

[exside]

I don't know how it's possible that it went unnoticed for so long

Me neither 🤣 , but probably bc it's mostly used with this raw trick to render HTML which is usually some kind of child component which gets properly unmounted when the 'regular'/parent component gets unmounted.

[GianlucaGuarini]

Fixed in riot@9.0.4 Thanks for reporting it!