element-plus是怎么实现给插槽里的元素添加事件的？

Question

这个span标签传进去显示出来的也没有给它再套个父级元素，不是不能给slot绑定事件吗

<el-dropdown>
    <span class="el-dropdown-link">
      Dropdown List
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
</el-dropdown>

Answer 1

用的是 Vue 的 Fragment（片段），Fragment 之所以能够支持多个根组件并识别，是因为其会在包裹的根元素前后各插入一个空白的 Text Element，通过 Fragment 的 ref 拿到的是其开头的 Text Element 元素，可以通过 el.nextElementSibling 拿到其包裹的第一个根元素。