Why Vue doesn't append a class if I use <teleport> in a component?

[szulcus]

Modal component:

<teleport to="body">
<div class="modal">...</div>
</teleport>

Confirm modal component

<Modal class="modal-confirm" />

Result:

<div class="modal">...</div>

...with warning:

runtime-core.esm-bundler.js:40 [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <Index class="f24-modal-confirm" active=true title="Are you sure you want to delete the user?"  ... > 
  at <Confirm ref="modalConfirm" texts= {yes: 'Yes', no: 'No'} > 
  at <ActiveModals> 
  at <App key=2 > 
  at <NuxtRoot>

After removing everything works fine 🤔.

[baiwusanyu-c]

Can you provide a link to reproduce it in the playground? I'm more inclined it's a bug 🤔.

[Hiws]

Because the class is being added to the root component, which in this case is <Teleport> and not<div class="modal">.
Turn off inherritance with inheritAttrs: false and bind the attributes manually to the div <div class="modal" v-bind="$attrs">

[szulcus]

@Hiws Thank you very much for your answer! ❤️ Sorry for the delay in replying, but I don't think I got a notification on GitHub. Fortunately, I saved a link to this discussion in the project. In retrospect, it seems obvious to me, but at the time I wasn't so sure 😅. Example for others:

<script lang="ts">
	export default {
		inheritAttrs: false,
	};
</script>

<template>
	<teleport to="body">
		<div v-if="active" v-bind="$attrs">Modal content</div>
	</teleport>
</template>