diff --git a/lib/rules/html-self-closing.js b/lib/rules/html-self-closing.js
index 165273f4e..28d168a9a 100644
--- a/lib/rules/html-self-closing.js
+++ b/lib/rules/html-self-closing.js
@@ -165,7 +165,11 @@ module.exports = {
               if (elementType === ELEMENT_TYPE.VOID) {
                 return fixer.replaceText(close, '>')
               }
-              return fixer.replaceText(close, `></${node.rawName}>`)
+              // If only `close` is targeted for replacement, it conflicts with `component-name-in-template-casing`,
+              // so replace the entire element.
+              // return fixer.replaceText(close, `></${node.rawName}>`)
+              const elementPart = sourceCode.text.slice(node.range[0], close.range[0])
+              return fixer.replaceText(node, elementPart + `></${node.rawName}>`)
             }
           })
         }
diff --git a/tests/lib/autofix.js b/tests/lib/autofix.js
new file mode 100644
index 000000000..7d1b9604d
--- /dev/null
+++ b/tests/lib/autofix.js
@@ -0,0 +1,98 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const Linter = require('eslint').Linter
+const chai = require('chai')
+
+const rules = require('../..').rules
+
+const assert = chai.assert
+
+const baseConfig = {
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+}
+
+describe('Complex autofix test cases', () => {
+  const linter = new Linter()
+  for (const key of Object.keys(rules)) {
+    const ruleId = `vue/${key}`
+    linter.defineRule(ruleId, rules[key])
+  }
+
+  // https://github.com/vuejs/eslint-plugin-vue/issues/554
+  describe('Autofix of `html-self-closing` and `component-name-in-template-casing` should not conflict.', () => {
+    const kebabConfig = Object.assign({}, baseConfig, { 'rules': {
+      'vue/html-self-closing': ['error', {
+        'html': {
+          'component': 'never'
+        }
+      }],
+      'vue/component-name-in-template-casing': ['error', 'kebab-case']
+    }})
+    const pascalConfig = Object.assign({}, baseConfig, { 'rules': {
+      'vue/html-self-closing': ['error', {
+        'html': {
+          'component': 'never'
+        }
+      }],
+      'vue/component-name-in-template-casing': ['error']
+    }})
+    it('Even if set kebab-case, the output should be as expected.', () => {
+      const code = `
+      <template>
+        <VueComponent />
+      </template>`
+      const output = `
+      <template>
+        <vue-component ></vue-component>
+      </template>`
+
+      assert.equal(
+        linter.verifyAndFix(code, kebabConfig, 'test.vue').output,
+        output
+      )
+    })
+    it('Even if set PascalCase, the output should be as expected.', () => {
+      const code = `
+      <template>
+        <vue-component />
+      </template>`
+      const output = `
+      <template>
+        <VueComponent ></VueComponent>
+      </template>`
+
+      assert.equal(
+        linter.verifyAndFix(code, pascalConfig, 'test.vue').output,
+        output
+      )
+    })
+    it('Even if element have an attributes, the output should be as expected.', () => {
+      const code = `
+      <template>
+        <vue-component attr
+          id="item1" />
+      </template>`
+      const output = `
+      <template>
+        <VueComponent attr
+          id="item1" ></VueComponent>
+      </template>`
+
+      assert.equal(
+        linter.verifyAndFix(code, pascalConfig, 'test.vue').output,
+        output
+      )
+    })
+  })
+})