diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts index 3abb77fab..92e2c63db 100644 --- a/packages/compiler-core/src/compat/compatConfig.ts +++ b/packages/compiler-core/src/compat/compatConfig.ts @@ -31,7 +31,10 @@ type DeprecationData = { const deprecationData: Record = { [CompilerDeprecationTypes.IS_ON_ELEMENT]: { - message: ``, + message: + `Platform-native elements with "is" prop will no longer be ` + + `treated as components in Vue 3 unless the "is" value is explicitly ` + + `prefixed with "vue:".`, link: `https://v3.vuejs.org/guide/migration/custom-elements-interop.html` }, diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts index 73c25f018..01bfa5e05 100644 --- a/packages/compiler-core/src/parse.ts +++ b/packages/compiler-core/src/parse.ts @@ -30,7 +30,11 @@ import { createRoot, ConstantTypes } from './ast' -import { CompilerCompatOptions } from './compat/compatConfig' +import { + checkCompatEnabled, + CompilerCompatOptions, + CompilerDeprecationTypes +} from './compat/compatConfig' type OptionalOptions = | 'isNativeTag' @@ -499,14 +503,28 @@ function parseTag( let tagType = ElementTypes.ELEMENT const options = context.options if (!context.inVPre && !options.isCustomElement(tag)) { - const hasVIs = props.some( - p => - p.name === 'is' && - // v-is="xxx" (TODO: deprecate) - (p.type === NodeTypes.DIRECTIVE || - // is="vue:xxx" - (p.value && p.value.content.startsWith('vue:'))) - ) + const hasVIs = props.some(p => { + if (p.name !== 'is') return + // v-is="xxx" (TODO: deprecate) + if (p.type === NodeTypes.DIRECTIVE) { + return true + } + // is="vue:xxx" + if (p.value && p.value.content.startsWith('vue:')) { + return true + } + // in compat mode, any is usage is considered a component + if ( + __COMPAT__ && + checkCompatEnabled( + CompilerDeprecationTypes.IS_ON_ELEMENT, + context, + p.loc + ) + ) { + return true + } + }) if (options.isNativeTag && !hasVIs) { if (!options.isNativeTag(tag)) tagType = ElementTypes.COMPONENT } else if ( diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index 334304adc..cbb456a80 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -240,8 +240,11 @@ export function resolveComponentType( if (!isExplicitDynamic && isProp.type === NodeTypes.ATTRIBUTE) { //