I'm noticing that content I'm slotting into default slots of my Stencil components being used in a Vue app isn't rendered at all at first. For example, I have a simple Stencil component that only renders a single <slot></slot>. If I use the component in a Vue app like <my-component>Hello world</my-component>, the text node isn't rendered at all when the parent Vue component is rendered, but it takes a few ticks.
#Slotted content not rendered immediately in Vue
deep kayak
upbeat geode
@deep kayak do you have a reproducible example for this behavior?
deep kayak
I can make one. Going to double-check first that this issue isn't just related to web components in general
wooden vector
Isn't this just because the component is hidden until hydrated? I don't normally see a visible delay in most cases though, so possibly some interaction causing the delay.
deep kayak
It's not that it's invisible, it's that when I check its dimensions on mount, they're always 0. visibility: hidden shouldn't affect its dimensions though, which is its default style before hydration
deep kayak
This may actually just be a normal issue with Shadow DOM. If a custom element has a shadow root, its child nodes aren't rendered by default unless the shadow root renders a slot, so every custom element with a shadow root has 0 offset dimension until its slot is rendered
I can't replicate it in another Vue app though 🤷♂️ so not sure if something is blocking the render and causing it to take a while
deep kayak
Okay, just for posterity in case anyone else runs into this issue: I can confirm that Stencil components using a shadow DOM that are rendered in a router view do not seem to be fully rendered yet on mount. I'm not sure why they would be outside of a router view though
deep kayak
Okay, here's a reproduction with a demonstration https://codesandbox.io/p/sandbox/modest-newton-kc9cdm?file=%2Fsrc%2FApp.vue%3A20%2C42
vanilla web components don't have this problem
turbid girder
what output are you using for your (vue wrapped) stencil components?
deep kayak
Just the default dist
turbid girder
That’s the ‘lazy loader’ output - so this makes sense
If you need faster tti etc use the dist-custom-elements output - https://stenciljs.com/docs/custom-elements
deep kayak
it feels weird that it's only a problem inside a RouterView though.
Could just be conditionally rendered components? I'll try that out though and see if it works. I definitely like the lazy-loaded aspect though, but the bundler for this app may take care of that already
deep kayak
I updated the example to illustrate the RouterView issue