Element: [Bug Report] TypeError: Cannot assign to read only property 'className' of object '#<SVGSVGElement>'

[caraffa]

Element UI version

0.1.0

OS/Browsers version

macOS 10.14/Chrome 70

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/mmx38qxw/6915/

Steps to reproduce

Simply click the "beer" Icon in the header section

What is Expected?

No error should popup in the console

What is actually happening?

The following errors are triggered:
vue.js:1743 TypeError: Cannot assign to read only property 'className' of object '#'

Please note that the dropdown is displayed correctly. The error is triggered only when clicking the v-icon (SVG) element. Obviously I cannot be sure if this is an ElementUI issue or vue-awesome issue.
Actually, the same doesn't happen if I use an ElementUI icon or any other plain html tag (span, plain text, etc.)

P.S. Thank you for the outstanding job

[caraffa]

Well, I've find a workaround. According to your docs, where it states that the element to attach the event listener to must be a valid html tag or an element-ui component, if I wrap the v-icon (svg) element in a div tag (<div><v-icon name="ellipsis-v"/></div>) no error occurs.
At this point I don't know if we should consider this a bug or a feature request

[karakanb]

I believe this is a bug as well, at least a weird error that has no descriptive message. I have the following sample that doesn't work:

    <el-table-column prop="action" width="30">
      <template slot-scope="scope">
        <el-dropdown trigger="click" @command="delete">
          <font-awesome-icon icon="ellipsis-v"></font-awesome-icon>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="text-danger" :command="scope.$index">
              <font-awesome-icon icon="trash-alt" class="m-r-8"></font-awesome-icon> xyz
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>

This one works if I wrap the font-awesome-icon icon with a span:

    <!-- Put the magical three-dot button. -->
    <el-table-column prop="action" width="30">
      <template slot-scope="scope">
        <el-dropdown trigger="click" @command="delete">
          <span>
            <font-awesome-icon icon="ellipsis-v"></font-awesome-icon>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="text-danger" :command="scope.$index">
              <font-awesome-icon icon="trash-alt" class="m-r-8"></font-awesome-icon> xyz
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>

[ssdemajia]

https://github.com/ElemeFE/element/blob/5a895bd61229dbaa87cddf2b2134bfb2e537998a/packages/dropdown/src/dropdown.vue#L93
In this line, if selfDefine is svg element, the svg element's className can not be modify.