fix(components): [el-dropdown] use custom attributes for dropdown items (#5779)

* fix(components): [el-dropdown] use custom attributes for dropdown items

* fix: forward props and attrs

packages/components/dropdown/__tests__/dropdown.spec.ts

@@ -487,4 +487,28 @@ describe('Dropdown', () => {
 
     expect(popperElement.classList.contains('custom-popper-class')).toBe(true)
   })
+
+  test('custom attributes for dropdown items', async () => {
+    const wrapper = _mount(
+      `
+      <el-dropdown>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item data-custom-attribute="hello">Item</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      `,
+      () => ({})
+    )
+    await nextTick()
+    expect(
+      wrapper
+        .findComponent({
+          name: 'DropdownItemImpl',
+        })
+        .find('.el-dropdown-menu__item')
+        .element.getAttribute('data-custom-attribute')
+    ).toBe('hello')
+  })
 })

packages/components/dropdown/src/dropdown-item-impl.vue

@@ -1,8 +1,12 @@
 <template>
-  <div v-if="divided" class="el-dropdown-menu__item--divided"></div>
+  <div
+    v-if="divided"
+    class="el-dropdown-menu__item--divided"
+    v-bind="$attrs"
+  ></div>
   <div
     :ref="itemRef"
-    v-bind="dataset"
+    v-bind="{ ...dataset, ...$attrs }"
     :aria-disabled="disabled"
     :class="{
       'el-dropdown-menu__item': true,

packages/components/dropdown/src/dropdown-item.vue

@@ -5,7 +5,7 @@
   >
     <el-roving-focus-item :focusable="!disabled">
       <el-dropdown-item-impl
-        v-bind="$props"
+        v-bind="propsAndAttrs"
         @pointerleave="handlePointerLeave"
         @pointermove="handlePointerMove"
         @click="handleClick"
@@ -41,9 +41,10 @@ export default defineComponent({
     ElRovingFocusItem,
     ElDropdownItemImpl,
   },
+  inheritAttrs: false,
   props: dropdownItemProps,
   emits: ['pointermove', 'pointerleave', 'click'],
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     const { elDropdown } = useDropdown()
     const _instance = getCurrentInstance()
     const itemRef = ref<HTMLElement | null>(null)
@@ -97,11 +98,17 @@ export default defineComponent({
       }
     )
 
+    // direct usage of v-bind={ ...$props, ...$attrs } causes type errors
+    const propsAndAttrs = computed(() => {
+      return { ...props, ...attrs }
+    })
+
     return {
       handleClick,
       handlePointerMove,
       handlePointerLeave,
       textContent,
+      propsAndAttrs,
     }
   },
 })