Version

3.2.25

Reproduction link

stackblitz.com

Steps to reproduce

Create a component with a text node in the top level of the template, and attach a custom directive to debug mounted/unmounted hooks.

What is expected?

I expected hooks to work normally, or if they didn't to throw a warning like it happens for components with multiple root nodes.

What is actually happening?

The first mounted hook seems to work fine, but then unmounted hooks don't work and mounted are called twice.

In case you're wondering why would I need this, sometimes I write <!-- TODO ... --> at the top of component templates and that's how I came across this issue. It wasn't easy to pinpoint the source of the problem, so this may bite other people as well.

Runtime directive used on component with non-element root node. The directives will not function as intended.

@lidlanca Sorry about that, it seems like I didn't save the reproduction properly. I tried with a <span> instead of a text node to test what happens when you are not using a text node, and I could see that warning as you point out. But if you are using a text node (I've updated the stackblitz), it doesn't show you any warnings.

First node in the <template> must be a div (or some other valid element, but div works for me, so...)

<template>
    <div>
        ...
    </div>
</template>

If you add somethins else into