search

QingWei-Li / vue-markdown-loader

📇 Convert Markdown file to Vue2.0 component.
705 stars 162 forks source link

HTML self-closing tags aren't handled correctly #56

Open DoctorBud opened 6 years ago

DoctorBud commented 6 years ago

Works with paired open/close tags

Here is an empty element with a closing tag. Everything works when I have an opening/closing tag pair.

Source:

<h4>
  <i class="fa fa-twitter fa-fw"></i>
  Tweets from ...
</h4>

HTML:

Tweets from ...

Fails with self-closing tags

Here is an empty element with a self-closing tag. It appears that the <i> tag is closed after Tweets from ..., rather than before, resulting in the <i> element being larger than intended, and the Tweets from ... is italicized, which is not correct.

Source:

<h4>
  <i class="fa fa-twitter fa-fw"/>
  Tweets from ...
</h4>

HTML:

Tweets from ...

Workaround: Don't use self-closing tags

This is unsatisfactory, as my ESLint setup encourages the use of self-closing tags for empty elements.

Demo of bug: https://glitch.com/edit/#!/vue-markdown-loader-bug

DoctorBud commented 6 years ago

I'm using the default ESLint rules from: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md#rule-details

which encourage the use of self-closing tags on both Vue components as well as ordinary HTML elements. If I modify my ESLint so that the html.normal option is set to never, then I will not get warnings.

However, it is very convenient to use self-closing tags when operating in a Vue environment, so fixing this bug would be nice.