Skip to content

Slot Name Case Sensitivity Issue in DOM Templates(DOM 模板中插槽名称未转译) #14300

@github-linong

Description

@github-linong

Vue version

3.5.26

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-xgjrdt9z?file=index.html&terminal=dev

Steps to reproduce

  1. 打开链接:https://stackblitz.com/edit/vitejs-vite-xgjrdt9z?file=index.html&terminal=dev
  2. 点击 Select 组件,可以看到 dropdownRender 插槽未生效。

What is expected?

在 DOM 模板中使用驼峰命名的插槽名称时,插槽内容应该能够正确渲染,就像在单文件组件(SFC)中一样。

What is actually happening?

在 DOM 模板(HTML 文件)中使用驼峰命名(camelCase)的插槽名称时,插槽内容无法正常渲染。这是因为浏览器会将 HTML 属性名转换为小写,而 Vue 的插槽匹配需要完全匹配大小写。

System Info

Any additional comments?

When using camelCase slot names in DOM templates (HTML files), the slot content fails to render because the browser converts HTML attribute names to lowercase, but Vue's slot matching requires exact case matching.

Slot content should render correctly when using camelCase slot names in DOM templates, similar to how it works in Single File Components (SFC).

  1. Open the following link:
    https://stackblitz.com/edit/vitejs-vite-xgjrdt9z?file=index.html&terminal=dev
  2. Click the Select component. You will see that the dropdownRender slot does not take effect.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.has workaroundA workaround has been found to avoid the problem

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions