fix(components): [descriptions] allow wrapping description-item

[makedopamine]

fix #18452

[github-actions[bot]]

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/element-plus/element-plus@20961

commit: 2e34a79

[github-actions[bot]]

Size Change: +673 B (+0.05%)

Total Size: 1.47 MB

Filename	Size	Change
./dist/element-plus/dist/index.full.js	418 kB	+206 B (+0.05%)
./dist/element-plus/dist/index.full.min.js	303 kB	+123 B (+0.04%)
./dist/element-plus/dist/index.full.min.mjs	299 kB	+142 B (+0.05%)
./dist/element-plus/dist/index.full.mjs	409 kB	+202 B (+0.05%)

ℹ️ View Unchanged

Filename	Size
./dist/element-plus/dist/index.css	45.7 kB

_{compressed-size-action}

[github-actions[bot]]

🧪 Playground Preview: https://element-plus.run/?pr=20961 Please comment the example via this playground if needed.

[makedopamine]

But there is a problem when toggling a wrapper component, demo.

Replacing onBeforeMount with onMounted can fix this issue, but it takes an extra microtask tick to update the DOM, which means the render function will run again in the next event loop. I'd like to first refactor useOrderedChildren in a separate PR to make it work with onBeforeMount.

Update: While working on this, I found that using onMounted doesn't take an extra microtask tick, but it does retrigger the render.

[Dsaquel]

Very clear, ok 😀👍

[makedopamine]

Replacing onBeforeMount with onMounted can fix this issue, but it takes an extra microtask tick to update the DOM, which means the render function will run again in the next event loop. I'd like to first refactor useOrderedChildren in a separate PR to make it work with onBeforeMount.

While working on this, I found that using onMounted doesn't take an extra microtask tick, but it does retrigger the render.