vue/component-name-in-template-casing transforms regular HTML tags if they have `:is` property

[maoberlehner]

Tell us about your environment

macOS, Vue CLI

• ESLint Version: 4.19.1
• eslint-plugin-vue Version: 5.0.0-beta.3
• Node Version: v10.9.0

Please show your full configuration:

{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "plugin:vue/recommended",
    "@vue/airbnb"
  ],
  "rules": {
    "indent": ["error", 4],
    "max-len": ["error", 120],
    "import/extensions": ["error", "always", {
      "js": "never",
      "vue": "never"
    }],
    "import/prefer-default-export": 0,
    "import/no-extraneous-dependencies": [0, { "devDependencies": true }],
    "object-curly-newline": ["error", {
      "ObjectExpression": {
        "minProperties": 6,
        "multiline": true,
        "consistent": true
      },
      "ObjectPattern": {
        "minProperties": 6,
        "multiline": true,
        "consistent": true
      }
    }],
    "vue/component-name-in-template-casing": ["error",
      "PascalCase",
      {
        "ignores": ["button", "span"]
      }
    ],
    "vue/max-attributes-per-line": ["error", {
      "singleline": 3,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/no-v-html": 0,
    "vue/html-indent": ["error", 4, {
      "attribute": 1,
      "closeBracket": 0,
      "ignores": []
    }],
    "vue/require-default-prop": 0,
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    "vue/html-closing-bracket-spacing": ["error", {
      "startTag": "never",
      "endTag": "never",
      "selfClosingTag": "never"
    }]
  }
}

What did you do? Please include the actual source code causing the issue.

<template>
    <h1
        :is="`h${level}`"
        :class="{
            [`c-textHeadline--size${computedSize}`]: true,
            'c-textHeadline--weightBold': bold,
        }"
        class="c-textHeadline"
    >
        <slot/>
    </h1>
</template>

becomes (h1 vs H1)

<template>
    <H1
        :is="`h${level}`"
        :class="{
            [`c-textHeadline--size${computedSize}`]: true,
            'c-textHeadline--weightBold': bold,
        }"
        class="c-textHeadline"
    >
        <slot/>
    </H1>
</template>

What did you expect to happen?

Nothing.

What actually happened? Please include the actual, raw output from ESLint.

h1 became H1

Notes

I guess it makes sense on some level, but in my use-case it doesn't. It should be possible to deactivate this behavior.

[michalsnik]

Good catch @maoberlehner ! 👍