Template refs inside <Html> component are not working #596
Description
Describe the bug
I am using <Html> to wrap elements containing template refs, but these refs are not correctly initialized. As a result, the references to the slotted elements are inaccessible within the component's lifecycle.
Perhaps related to issues: 464 — 312
Reproduction
Steps to reproduce
- Use the
<Html>component to wrap elements containing template refs. - Observe that these refs are not initialized (console.log inside onMounted shows them as undefined).
- Any logic relying on these refs does not work as expected.
<template>
<Html>
<div ref="container">Some Content</div>
</Html>
</template>
<script setup>
import { Html } from '@tresjs/cientos'
import { ref, onMounted, watch } from 'vue';
const container = ref(null);
onMounted(() => {
console.log(container.value); // Expected: DOM Element | Actual: null
});
watch(container, () => {
console.log('watch', container.value); // Expected: DOM Element | Actual: The log never appears
})
</script>Summary of Solutions
Parent refs don't get assigned when using createVNode() and render() because the content ends up outside the parent's render tree. Here's a quick breakdown:
What Doesn't Work
-
Direct
<Teleport>
The custom TresJS renderer can't find the target in the standard DOM. -
Manual
createVNode()+render()
This creates a new root outside the parent's render tree, so refs declared in the template aren't assigned.
What Might Work ?
-
Global Store (Pinia/Vuex)
You could set up a tunnel to share content via a global store, but that adds an external dependency we’d rather avoid. -
Tunnel via Provide/Inject (In/Out)
Use provide/inject to share a reactive state (like an array of VNodes) between an "In" component (capturing the content) and an "Out" component (rendering it in the standard DOM). This should preserve reactivity and proper ref assignment without extra dependencies. This message in issue 312 talked about this method.
System Info
System:
OS: macOS 15.1.1
CPU: (14) arm64 Apple M4 Pro
Memory: 116.89 MB / 24.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
npm: 11.0.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
pnpm: 9.14.4 - ~/.nvm/versions/node/v22.11.0/bin/pnpm
Browsers:
Chrome: 133.0.6943.55
Safari: 18.1.1Used Package Manager
pnpm
Code of Conduct
- I agree to follow this project's Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.