fix: do not special case attributes for custom elements

close #6864, close #6885
vuejs · Mar 7, 2018 · 50b711a · 50b711a
1 parent c57ffb7
commit 50b711a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/src/platforms/web/runtime/modules/attrs.js b/src/platforms/web/runtime/modules/attrs.js
@@ -59,7 +59,9 @@ function updateAttrs (oldVnode: VNodeWithData, vnode: VNodeWithData) {
 }
 
 function setAttr (el: Element, key: string, value: any) {
-  if (isBooleanAttr(key)) {
+  if (el.tagName.indexOf('-') > -1) {
+    baseSetAttr(el, key, value)
+  } else if (isBooleanAttr(key)) {
     // set attribute for blank value
     // e.g. <option disabled>Select one</option>
     if (isFalsyAttrValue(value)) {
@@ -81,28 +83,32 @@ function setAttr (el: Element, key: string, value: any) {
       el.setAttributeNS(xlinkNS, key, value)
     }
   } else {
-    if (isFalsyAttrValue(value)) {
-      el.removeAttribute(key)
-    } else {
-      // #7138: IE10 & 11 fires input event when setting placeholder on
-      // <textarea>... block the first input event and remove the blocker
-      // immediately.
-      /* istanbul ignore if */
-      if (
-        isIE && !isIE9 &&
-        el.tagName === 'TEXTAREA' &&
-        key === 'placeholder' && !el.__ieph
-      ) {
-        const blocker = e => {
-          e.stopImmediatePropagation()
-          el.removeEventListener('input', blocker)
-        }
-        el.addEventListener('input', blocker)
-        // $flow-disable-line
-        el.__ieph = true /* IE placeholder patched */
+    baseSetAttr(el, key, value)
+  }
+}
+
+function baseSetAttr (el, key, value) {
+  if (isFalsyAttrValue(value)) {
+    el.removeAttribute(key)
+  } else {
+    // #7138: IE10 & 11 fires input event when setting placeholder on
+    // <textarea>... block the first input event and remove the blocker
+    // immediately.
+    /* istanbul ignore if */
+    if (
+      isIE && !isIE9 &&
+      el.tagName === 'TEXTAREA' &&
+      key === 'placeholder' && !el.__ieph
+    ) {
+      const blocker = e => {
+        e.stopImmediatePropagation()
+        el.removeEventListener('input', blocker)
       }
-      el.setAttribute(key, value)
+      el.addEventListener('input', blocker)
+      // $flow-disable-line
+      el.__ieph = true /* IE placeholder patched */
     }
+    el.setAttribute(key, value)
   }
 }
 

diff --git a/test/unit/modules/vdom/patch/edge-cases.spec.js b/test/unit/modules/vdom/patch/edge-cases.spec.js
@@ -327,4 +327,14 @@ describe('vdom patch: edge cases', () => {
       expect(log).not.toHaveBeenCalled()
     }).then(done)
   })
+
+  // #6864
+  it('should not special-case boolean attributes for custom elements', () => {
+    Vue.config.ignoredElements = [/^custom-/]
+    const vm = new Vue({
+      template: `<div><custom-foo selected="1"/></div>`
+    }).$mount()
+    expect(vm.$el.querySelector('custom-foo').getAttribute('selected')).toBe('1')
+    Vue.config.ignoredElements = []
+  })
 })