NScrollbar rendered div element lose scoped css attr data-v-*，渲染出来的 div 丢失 vue 局部样式标记属性。

[liuzw2579]

TuSimple/naive-ui version (版本)

2.34.4

Vue version (Vue 版本)

3.3.4

Browser and its version (浏览器及其版本)

Chrome (114.0.5735.201)

System and its version (系统及其版本)

Windows 11

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/p/sandbox/gracious-elgamal-p9l754?file=%2Fsrc%2FApp.vue%3A9%2C33

Reappearance steps (重现步骤)

在 VUE SFC 使用 NScrollbar，并加上 class，<NScrollbar class="my-scrollbar">
SFC 包含 <style scoped>

Expected results (期望的结果)

NScrollbar 渲染出来的 div.n-scrollbar.my-scrollbar 元素 正确 包含 scoped css attr: data-v-*

Actual results (实际的结果)

未包含。 NScrollbar 组件 实例的 $el 为 Text Node, 下一个元素 nextSibling 才是 渲染的 div.n-scrollbar.my-scrollbar

此问题 类似于 issue #1788

Remarks (补充说明)

[liuzw2579]

naive-ui/src/_internal/scrollbar/src/Scrollbar.tsx

Line 847 in 437ce23

<VResizeObserver onResize={this.handleContainerResize}>

本地测试是 这里的 VResizeObserver 包裹后出现的问题。直接 return createChildren() 后正确出现 data-v-* 标记

[liuzw2579]

ResizeObserver 这个，感觉在这里 使用 hook 的方式好一些吧。

function useReizeObserver(target: MaybeRef<HTMLElement | null>, handler: (p: Param) => void) : () => void {
    const observer = new ResizeObserver(handler)

    const stop = () => {
        observer.disconnect()
    }

    watch(target, (t, o) => {
         o && observer.unobserve(o)
         t && observer.observe(t)
    }, { imediate: true })

    beforeUnmount(stop)

    return stop
}

// 在 setup 里
useResizeObserver(wrapperRef, handleContainerResize)

这样就不需要包裹无渲染组件，少一层组件实例。还能避免 data-v-* 的问题

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem