[Component] [dropdown-item] [Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.

[robertovaldesperez]

Bug Type: Component

Environment

• Vue Version: 3.5.13
• Element Plus Version: 2.9.6
• Browser / OS: Versión 133.0.6943.142 (Build oficial) (64 bits)
• Build Tool: Vite

Reproduction

Related Component

• el-dropdown-item

Reproduction Link

Link

Steps to reproduce

When I use a directive in an el-dropdown-item element-plus I get the following warning: [Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.

Directive code:

function checkPermission(el, binding) {
  const { value } = binding
  const roles = store.getters && store.getters.roles

  if (value) {
    if (value.length > 0 && value instanceof Array) {
      const permissionRoles = value

      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="['ADMINISTRATOR', 'EXTERNAL_ANALYST']"`)
    }
  }
}

export default {
  mounted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  }
}

What is Expected?

Show/Hide item

What is actually happening?

I'm getting a warning

Additional comments

(empty)

Directive:
Warning:

[Dsaquel]

Hello @robertovaldesperez,
From the doc.
Because the <el-dropdown-item> has 2 root nodes the directive can't work properly and even if at the runtime the component has one root node. vuejs demo
Also v-bind cannot support directives.

To address this issue you can create a wrapper inside your <el-dropdown-item>, demo