wip: class/style fallthrough compat

packages/runtime-core/src/compat/attrsFallthrough.ts

@@ -0,0 +1,22 @@
+import { isOn } from '@vue/shared'
+import { ComponentInternalInstance } from '../component'
+import { DeprecationTypes, isCompatEnabled } from './compatConfig'
+
+export function shouldSkipAttr(
+  key: string,
+  instance: ComponentInternalInstance
+): boolean {
+  if (
+    (key === 'class' || key === 'style') &&
+    isCompatEnabled(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, instance)
+  ) {
+    return true
+  }
+  if (
+    isOn(key) &&
+    isCompatEnabled(DeprecationTypes.INSTANCE_LISTENERS, instance)
+  ) {
+    return true
+  }
+  return false
+}

packages/runtime-core/src/compat/compatConfig.ts

@@ -216,15 +216,15 @@ const deprecationData: Record<DeprecationTypes, DeprecationData> = {
   },
 
   [DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE]: {
-    message:
-      `vm.$attrs now includes class and style bindings passed from parent. ` +
-      `Components with inheritAttrs: false will no longer auto-inherit ` +
-      `class/style on its root element. If your code relies on this behavior, ` +
-      `you may see broken styling and need to adjust your CSS. Otherwise, ` +
-      `you can disable the compat behavior and suppress this warning with:` +
-      `\n\n  configureCompat({ ${
-        DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE
-      }: false )\n`,
+    message: componentName =>
+      `Component <${componentName}> has \`inheritAttrs: false\` but is ` +
+      `relying on class/style fallthrough from parent. In Vue 3, class/style ` +
+      `are now included in $attrs and will no longer fallthrough when ` +
+      `inheritAttrs is false. If you are already using v-bind="$attrs" on ` +
+      `component root it should render the same end result. ` +
+      `If you are binding $attrs to a non-root element and expecting ` +
+      `class/style to fallthrough on root, you will need to now manually bind ` +
+      `them on root via :class="$attrs.class".`,
     link: `https://v3.vuejs.org/guide/migration/attrs-includes-class-style.html`
   },
 

packages/runtime-core/src/compat/instance.ts

@@ -4,7 +4,6 @@ import { getCompatChildren } from './instanceChildren'
 import {
   DeprecationTypes,
   assertCompatEnabled,
-  checkCompatEnabled,
   isCompatEnabled
 } from './compatConfig'
 import { off, on, once } from './instanceEventEmitter'
@@ -75,14 +74,6 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
       return __DEV__ ? shallowReadonly(i.slots) : i.slots
     },
 
-    // overrides existing accessor
-    $attrs: i => {
-      if (__DEV__ && i.type.inheritAttrs === false) {
-        checkCompatEnabled(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, i)
-      }
-      return __DEV__ ? shallowReadonly(i.attrs) : i.attrs
-    },
-
     $on: i => on.bind(null, i),
     $once: i => once.bind(null, i),
     $off: i => off.bind(null, i),