fix(parser): Fix for slot "name" property using interpolation as well as the "slot" property. (#9038)

Author: zleight1

src/compiler/parser/index.js

@@ -465,14 +465,28 @@ function processOnce (el) {
 
 function processSlot (el) {
   if (el.tag === 'slot') {
-    el.slotName = getBindingAttr(el, 'name')
-    if (process.env.NODE_ENV !== 'production' && el.key) {
-      warn(
-        `\`key\` does not work on <slot> because slots are abstract outlets ` +
-        `and can possibly expand into multiple elements. ` +
-        `Use the key on a wrapping element instead.`
-      )
+    let slotName 
+    slotName = getBindingAttr(el, 'name')
+    if (process.env.NODE_ENV !== 'production') {
+      if(el.key) {
+        warn(
+          `\`key\` does not work on <slot> because slots are abstract outlets ` +
+          `and can possibly expand into multiple elements. ` +
+          `Use the key on a wrapping element instead.`
+        )
+      }
+      if (slotName) {
+        const res = parseText(slotName, delimiters);
+        if (res) {
+          warn(
+            `name="${slotName}": ` + 
+            `Interpolation on <slot> "name" attribute has been removed. ` +
+            `Use v-bind or the colon shorthand instead.`
+          )
+        }
+      }
     }
+    el.slotName = slotName
   } else {
     let slotScope
     if (el.tag === 'template') {
@@ -502,6 +516,14 @@ function processSlot (el) {
     }
     const slotTarget = getBindingAttr(el, 'slot')
     if (slotTarget) {
+      const res = parseText(slotTarget, delimiters);
+      if (process.env.NODE_ENV !== 'production' && res) {
+        warn(
+          `slot="${slotTarget}": "` +
+          `Interpolation on "slot" attribute has been removed. ` +
+          `Use v-bind or the colon shorthand instead.`
+        );
+      }
       el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget
       // preserve slot as an attribute for native shadow DOM compat
       // only for non-scoped slots.

test/unit/modules/compiler/parser.spec.js

@@ -476,11 +476,23 @@ describe('parser', () => {
     expect(ast.children[0].slotName).toBe('"one"')
   })
 
-  it('slot target', () => {
-    const ast = parse('<p slot="one">hello world</p>', baseOptions)
-    expect(ast.slotTarget).toBe('"one"')
+  it('slot tag name invalid syntax', () => {
+    // interpolation warning
+    parse('<div><slot name="{{error}}">hello world</slot></div>', baseOptions);
+    expect('Interpolation on <slot> "name" attribute has been removed.').toHaveBeenWarned();
   })
 
+  it("slot target", () => {
+    const ast = parse('<p slot="one">hello world</p>', baseOptions);
+    expect(ast.slotTarget).toBe('"one"');
+  });
+
+  it("slot target invalid syntax", () => {
+    // interpolation warning
+    parse('<p slot="{{error}}">hello world</p>', baseOptions);
+    expect('Interpolation on "slot" attribute has been removed.').toHaveBeenWarned();
+  });
+
   it('component properties', () => {
     const ast = parse('<my-component :msg="hello"></my-component>', baseOptions)
     expect(ast.attrs[0].name).toBe('msg')