Same directive on sibling elements does not create `el` for all siblings
Vue version
3.3.4
Link to minimal reproduction
https://github.com/Ericlm/vue-test-directive
Steps to reproduce
- Create a new Vue Project (with TS, eslint and prettier)
- Adding a "test" directive which creates an
HTMLElement
and renders it to the parentElement (to append to it) (render(node, el.parentElement!)
at the end of the directive) - Creating two or more nodes with the same directive, but only one
HTMLElement
will be rendered
What is expected?
To have as much HTMLElement
appended to the parent as there are calls to the directive.
What is actually happening?
There is only one HTMLElement appended to the parentElement while there are multiple uses or the directive.
System Info
System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1
Memory: 236.13 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.14.0 - ~/.asdf/installs/nodejs/18.14.0/bin/node
npm: 9.3.1 - ~/.asdf/plugins/nodejs/shims/npm
Browsers:
Chrome: 114.0.5735.198
Firefox: 114.0.2
Safari: 16.5.1
Safari Technology Preview: 17.0
npmPackages:
vue: ^3.3.4 => 3.3.4
Any additional comments?
At first I wanted to create a directive to show a tooltip above an element (using floating-ui
), and to do this, I appended the tooltip to the parentElement
. But I ran into this issue when I used the directive on two siblings elements.