@@ -484,6 +485,8 @@ function baseCreateRenderer(
// set ref
if (ref != null && parentComponent) {
setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
+ } else if (ref == null && n1 && n1.ref != null) {
+ setRef(n1.ref, null, parentSuspense, n1, true)
}
}
@@ -961,7 +964,8 @@ function baseCreateRenderer(
// which also requires the correct parent container
!isSameVNodeType(oldVNode, newVNode) ||
// - In the case of a component, it could contain anything.
- oldVNode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT))
+ oldVNode.shapeFlag &
+ (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT | ShapeFlags.SUSPENSE))
? hostParentNode(oldVNode.el)!
: // In other cases, the parent container is not actually used so we
// just pass the block element here to avoid a DOM parentNode call.
@@ -1347,7 +1351,11 @@ function baseCreateRenderer(
}
} else {
// custom element style injection
- if (root.ce) {
+ if (
+ root.ce &&
+ // @ts-expect-error _def is private
+ (root.ce as VueElement)._def.shadowRoot !== false
+ ) {
root.ce._injectChildStyle(type)
}
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index df438d47e..c44840df5 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -444,6 +444,36 @@ describe('defineCustomElement', () => {
const e = container.childNodes[0] as VueElement
expect(e.shadowRoot!.innerHTML).toBe('hello')
})
+
+ test('prop types validation', async () => {
+ const E = defineCustomElement({
+ props: {
+ num: {
+ type: [Number, String],
+ },
+ bool: {
+ type: Boolean,
+ },
+ },
+ render() {
+ return h('div', [
+ h('span', [`${this.num} is ${typeof this.num}`]),
+ h('span', [`${this.bool} is ${typeof this.bool}`]),
+ ])
+ },
+ })
+
+ customElements.define('my-el-with-type-props', E)
+ render(h('my-el-with-type-props', { num: 1, bool: true }), container)
+ const e = container.childNodes[0] as VueElement
+ // @ts-expect-error
+ expect(e.num).toBe(1)
+ // @ts-expect-error
+ expect(e.bool).toBe(true)
+ expect(e.shadowRoot!.innerHTML).toBe(
+ '1 is numbertrue is boolean
',
+ )
+ })
})
describe('attrs', () => {
@@ -708,6 +738,101 @@ describe('defineCustomElement', () => {
`changedA! changedB!
`,
)
})
+
+ // #13212
+ test('inherited from app context within nested elements', async () => {
+ const outerValues: (string | undefined)[] = []
+ const innerValues: (string | undefined)[] = []
+ const innerChildValues: (string | undefined)[] = []
+
+ const Outer = defineCustomElement(
+ {
+ setup() {
+ outerValues.push(
+ inject('shared'),
+ inject('outer'),
+ inject('inner'),
+ )
+ },
+ render() {
+ return h('div', [renderSlot(this.$slots, 'default')])
+ },
+ },
+ {
+ configureApp(app) {
+ app.provide('shared', 'shared')
+ app.provide('outer', 'outer')
+ },
+ },
+ )
+
+ const Inner = defineCustomElement(
+ {
+ setup() {
+ // ensure values are not self-injected
+ provide('inner', 'inner-child')
+
+ innerValues.push(
+ inject('shared'),
+ inject('outer'),
+ inject('inner'),
+ )
+ },
+ render() {
+ return h('div', [renderSlot(this.$slots, 'default')])
+ },
+ },
+ {
+ configureApp(app) {
+ app.provide('outer', 'override-outer')
+ app.provide('inner', 'inner')
+ },
+ },
+ )
+
+ const InnerChild = defineCustomElement({
+ setup() {
+ innerChildValues.push(
+ inject('shared'),
+ inject('outer'),
+ inject('inner'),
+ )
+ },
+ render() {
+ return h('div')
+ },
+ })
+
+ customElements.define('provide-from-app-outer', Outer)
+ customElements.define('provide-from-app-inner', Inner)
+ customElements.define('provide-from-app-inner-child', InnerChild)
+
+ container.innerHTML =
+ '' +
+ '' +
+ '' +
+ '' +
+ ''
+
+ const outer = container.childNodes[0] as VueElement
+ expect(outer.shadowRoot!.innerHTML).toBe('
')
+
+ expect('[Vue warn]: injection "inner" not found.').toHaveBeenWarnedTimes(
+ 1,
+ )
+ expect(
+ '[Vue warn]: App already provides property with key "outer" inherited from its parent element. ' +
+ 'It will be overwritten with the new value.',
+ ).toHaveBeenWarnedTimes(1)
+
+ expect(outerValues).toEqual(['shared', 'outer', undefined])
+ expect(innerValues).toEqual(['shared', 'override-outer', 'inner'])
+ expect(innerChildValues).toEqual([
+ 'shared',
+ 'override-outer',
+ 'inner-child',
+ ])
+ })
})
describe('styles', () => {
@@ -791,6 +916,30 @@ describe('defineCustomElement', () => {
assertStyles(el, [`div { color: blue; }`, `div { color: red; }`])
})
+ test("child components should not inject styles to root element's shadow root w/ shadowRoot false", async () => {
+ const Bar = defineComponent({
+ styles: [`div { color: green; }`],
+ render() {
+ return 'bar'
+ },
+ })
+ const Baz = () => h(Bar)
+ const Foo = defineCustomElement(
+ {
+ render() {
+ return [h(Baz)]
+ },
+ },
+ { shadowRoot: false },
+ )
+
+ customElements.define('my-foo-with-shadowroot-false', Foo)
+ container.innerHTML = ``
+ const el = container.childNodes[0] as VueElement
+ const style = el.shadowRoot?.querySelector('style')
+ expect(style).toBeUndefined()
+ })
+
test('with nonce', () => {
const Foo = defineCustomElement(
{
@@ -1131,6 +1280,92 @@ describe('defineCustomElement', () => {
expect(target.innerHTML).toBe(`default`)
app.unmount()
})
+
+ test('toggle nested custom element with shadowRoot: false', async () => {
+ customElements.define(
+ 'my-el-child-shadow-false',
+ defineCustomElement(
+ {
+ render(ctx: any) {
+ return h('div', null, [renderSlot(ctx.$slots, 'default')])
+ },
+ },
+ { shadowRoot: false },
+ ),
+ )
+ const ChildWrapper = {
+ render() {
+ return h('my-el-child-shadow-false', null, 'child')
+ },
+ }
+
+ customElements.define(
+ 'my-el-parent-shadow-false',
+ defineCustomElement(
+ {
+ props: {
+ isShown: { type: Boolean, required: true },
+ },
+ render(ctx: any, _: any, $props: any) {
+ return $props.isShown
+ ? h('div', { key: 0 }, [renderSlot(ctx.$slots, 'default')])
+ : null
+ },
+ },
+ { shadowRoot: false },
+ ),
+ )
+ const ParentWrapper = {
+ props: {
+ isShown: { type: Boolean, required: true },
+ },
+ render(ctx: any, _: any, $props: any) {
+ return h('my-el-parent-shadow-false', { isShown: $props.isShown }, [
+ renderSlot(ctx.$slots, 'default'),
+ ])
+ },
+ }
+
+ const isShown = ref(true)
+ const App = {
+ render() {
+ return h(ParentWrapper, { isShown: isShown.value } as any, {
+ default: () => [h(ChildWrapper)],
+ })
+ },
+ }
+ const container = document.createElement('div')
+ document.body.appendChild(container)
+ const app = createApp(App)
+ app.mount(container)
+ expect(container.innerHTML).toBe(
+ `` +
+ `` +
+ `
` +
+ `child
` +
+ `` +
+ `
` +
+ `
` +
+ `child
` +
+ `` +
+ `
app-injected
')
})
+
+ // #12448
+ test('work with async component', async () => {
+ const AsyncComp = defineAsyncComponent(() => {
+ return Promise.resolve({
+ render() {
+ const msg: string | undefined = inject('msg')
+ return h('div', {}, msg)
+ },
+ } as any)
+ })
+ const E = defineCustomElement(AsyncComp, {
+ configureApp(app) {
+ app.provide('msg', 'app-injected')
+ },
+ })
+ customElements.define('my-async-element-with-app', E)
+
+ container.innerHTML = ``
+ const e = container.childNodes[0] as VueElement
+ await new Promise(r => setTimeout(r))
+ expect(e.shadowRoot?.innerHTML).toBe('app-injected
')
+ })
+
+ test('with hmr reload', async () => {
+ const __hmrId = '__hmrWithApp'
+ const def = defineComponent({
+ __hmrId,
+ setup() {
+ const msg = inject('msg')
+ return { msg }
+ },
+ render(this: any) {
+ return h('div', [h('span', this.msg), h('span', this.$foo)])
+ },
+ })
+ const E = defineCustomElement(def, {
+ configureApp(app) {
+ app.provide('msg', 'app-injected')
+ app.config.globalProperties.$foo = 'foo'
+ },
+ })
+ customElements.define('my-element-with-app-hmr', E)
+
+ container.innerHTML = ``
+ const el = container.childNodes[0] as VueElement
+ expect(el.shadowRoot?.innerHTML).toBe(
+ `app-injectedfoo
`,
+ )
+
+ // hmr
+ __VUE_HMR_RUNTIME__.reload(__hmrId, def as any)
+
+ await nextTick()
+ expect(el.shadowRoot?.innerHTML).toBe(
+ `app-injectedfoo
`,
+ )
+ })
})
// #9885
diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index 1fb4cc65f..e2102e0c7 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -465,4 +465,27 @@ describe('useCssVars', () => {
render(h(App), root)
expect(colorInOnMount).toBe(`red`)
})
+
+ test('should set vars as `initial` for nullish values', async () => {
+ // `getPropertyValue` cannot reflect the real value for white spaces and JSDOM also
+ // doesn't 100% reflect the real behavior of browsers, so we only keep the test for
+ // `initial` value here.
+ // The value normalization is tested in packages/shared/__tests__/cssVars.spec.ts.
+ const state = reactive>({
+ foo: undefined,
+ bar: null,
+ })
+ const root = document.createElement('div')
+ const App = {
+ setup() {
+ useCssVars(() => state)
+ return () => h('div')
+ },
+ }
+ render(h(App), root)
+ await nextTick()
+ const style = (root.children[0] as HTMLElement).style
+ expect(style.getPropertyValue('--foo')).toBe('initial')
+ expect(style.getPropertyValue('--bar')).toBe('initial')
+ })
})
diff --git a/packages/runtime-dom/package.json b/packages/runtime-dom/package.json
index 54fce7d66..4d71206e2 100644
--- a/packages/runtime-dom/package.json
+++ b/packages/runtime-dom/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/runtime-dom",
- "version": "3.5.14",
+ "version": "3.5.17",
"description": "@vue/runtime-dom",
"main": "index.js",
"module": "dist/runtime-dom.esm-bundler.js",
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index aeeaeec9b..edf7c4313 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -269,18 +269,14 @@ export class VueElement
this._root = this
}
}
-
- if (!(this._def as ComponentOptions).__asyncLoader) {
- // for sync component defs we can immediately resolve props
- this._resolveProps(this._def)
- }
}
connectedCallback(): void {
// avoid resolving component if it's not connected
if (!this.isConnected) return
- if (!this.shadowRoot) {
+ // avoid re-parsing slots if already resolved
+ if (!this.shadowRoot && !this._resolved) {
this._parseSlots()
}
this._connected = true
@@ -298,8 +294,7 @@ export class VueElement
if (!this._instance) {
if (this._resolved) {
- this._setParent()
- this._update()
+ this._mount(this._def)
} else {
if (parent && parent._pendingResolve) {
this._pendingResolve = parent._pendingResolve.then(() => {
@@ -316,7 +311,18 @@ export class VueElement
private _setParent(parent = this._parent) {
if (parent) {
this._instance!.parent = parent._instance
- this._instance!.provides = parent._instance!.provides
+ this._inheritParentContext(parent)
+ }
+ }
+
+ private _inheritParentContext(parent = this._parent) {
+ // #13212, the provides object of the app context must inherit the provides
+ // object from the parent element so we can inject values from both places
+ if (parent && this._app) {
+ Object.setPrototypeOf(
+ this._app._context.provides,
+ parent._instance!.provides,
+ )
}
}
@@ -380,12 +386,7 @@ export class VueElement
}
}
this._numberProps = numberProps
-
- if (isAsync) {
- // defining getter/setters on prototype
- // for sync defs, this already happened in the constructor
- this._resolveProps(def)
- }
+ this._resolveProps(def)
// apply CSS
if (this.shadowRoot) {
@@ -403,9 +404,10 @@ export class VueElement
const asyncDef = (this._def as ComponentOptions).__asyncLoader
if (asyncDef) {
- this._pendingResolve = asyncDef().then(def =>
- resolve((this._def = def), true),
- )
+ this._pendingResolve = asyncDef().then((def: InnerComponentDef) => {
+ def.configureApp = this._def.configureApp
+ resolve((this._def = def), true)
+ })
} else {
resolve(this._def)
}
@@ -417,6 +419,8 @@ export class VueElement
def.name = 'VueElement'
}
this._app = this._createApp(def)
+ // inherit before configureApp to detect context overwrites
+ this._inheritParentContext()
if (def.configureApp) {
def.configureApp(this._app)
}
@@ -520,7 +524,9 @@ export class VueElement
}
private _update() {
- render(this._createVNode(), this._root)
+ const vnode = this._createVNode()
+ if (this._app) vnode.appContext = this._app._context
+ render(vnode, this._root)
}
private _createVNode(): VNode {
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index e2bc6de92..3032143d9 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -10,14 +10,16 @@ import {
warn,
watch,
} from '@vue/runtime-core'
-import { NOOP, ShapeFlags } from '@vue/shared'
+import { NOOP, ShapeFlags, normalizeCssVarValue } from '@vue/shared'
export const CSS_VAR_TEXT: unique symbol = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
/**
* Runtime helper for SFC's CSS variable injection feature.
* @private
*/
-export function useCssVars(getter: (ctx: any) => Record): void {
+export function useCssVars(
+ getter: (ctx: any) => Record,
+): void {
if (!__BROWSER__ && !__TEST__) return
const instance = getCurrentInstance()
@@ -64,7 +66,7 @@ export function useCssVars(getter: (ctx: any) => Record): void {
})
}
-function setVarsOnVNode(vnode: VNode, vars: Record) {
+function setVarsOnVNode(vnode: VNode, vars: Record) {
if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
const suspense = vnode.suspense!
vnode = suspense.activeBranch!
@@ -94,13 +96,14 @@ function setVarsOnVNode(vnode: VNode, vars: Record) {
}
}
-function setVarsOnNode(el: Node, vars: Record) {
+function setVarsOnNode(el: Node, vars: Record) {
if (el.nodeType === 1) {
const style = (el as HTMLElement).style
let cssText = ''
for (const key in vars) {
- style.setProperty(`--${key}`, vars[key])
- cssText += `--${key}: ${vars[key]};`
+ const value = normalizeCssVarValue(vars[key])
+ style.setProperty(`--${key}`, value)
+ cssText += `--${key}: ${value};`
}
;(style as any)[CSS_VAR_TEXT] = cssText
}
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ca9a307dd..c69375983 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -58,8 +58,8 @@ declare module '@vue/runtime-core' {
vOn: VOnDirective
vBind: VModelDirective
vIf: Directive
- VOnce: Directive
- VSlot: Directive
+ vOnce: Directive
+ vSlot: Directive
}
}
diff --git a/packages/runtime-dom/src/modules/attrs.ts b/packages/runtime-dom/src/modules/attrs.ts
index 95e0a1485..d7188aa9a 100644
--- a/packages/runtime-dom/src/modules/attrs.ts
+++ b/packages/runtime-dom/src/modules/attrs.ts
@@ -79,6 +79,7 @@ export function compatCoerceAttr(
}
} else if (
value === false &&
+ !(el.tagName === 'INPUT' && key === 'value') &&
!isSpecialBooleanAttr(key) &&
compatUtils.isCompatEnabled(DeprecationTypes.ATTR_FALSE_VALUE, instance)
) {
diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
index 9f33866e5..984387bb8 100644
--- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
@@ -203,4 +203,19 @@ describe('ssr: renderStyle', () => {
}),
).toBe(`color:"><script;`)
})
+
+ test('useCssVars handling', () => {
+ expect(
+ ssrRenderStyle({
+ fontSize: null,
+ ':--v1': undefined,
+ ':--v2': null,
+ ':--v3': '',
+ ':--v4': ' ',
+ ':--v5': 'foo',
+ ':--v6': 0,
+ '--foo': 1,
+ }),
+ ).toBe(`--v1:initial;--v2:initial;--v3: ;--v4: ;--v5:foo;--v6:0;--foo:1;`)
+ })
})
diff --git a/packages/server-renderer/__tests__/webStream.spec.ts b/packages/server-renderer/__tests__/webStream.spec.ts
index 700a9a0ae..de399dbb8 100644
--- a/packages/server-renderer/__tests__/webStream.spec.ts
+++ b/packages/server-renderer/__tests__/webStream.spec.ts
@@ -49,7 +49,7 @@ test('pipeToWebWritable', async () => {
}
const { readable, writable } = new TransformStream()
- pipeToWebWritable(createApp(App), {}, writable)
+ pipeToWebWritable(createApp(App), {}, writable as any)
const reader = readable.getReader()
const decoder = new TextDecoder()
diff --git a/packages/server-renderer/package.json b/packages/server-renderer/package.json
index 5be30879d..18ede1625 100644
--- a/packages/server-renderer/package.json
+++ b/packages/server-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/server-renderer",
- "version": "3.5.14",
+ "version": "3.5.17",
"description": "@vue/server-renderer",
"main": "index.js",
"module": "dist/server-renderer.esm-bundler.js",
diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
index 9689b4185..b082da03f 100644
--- a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
@@ -1,5 +1,7 @@
import {
escapeHtml,
+ isArray,
+ isObject,
isRenderableAttrValue,
isSVGTag,
stringifyStyle,
@@ -12,6 +14,7 @@ import {
isString,
makeMap,
normalizeClass,
+ normalizeCssVarValue,
normalizeStyle,
propsToAttrMap,
} from '@vue/shared'
@@ -93,6 +96,22 @@ export function ssrRenderStyle(raw: unknown): string {
if (isString(raw)) {
return escapeHtml(raw)
}
- const styles = normalizeStyle(raw)
+ const styles = normalizeStyle(ssrResetCssVars(raw))
return escapeHtml(stringifyStyle(styles))
}
+
+function ssrResetCssVars(raw: unknown) {
+ if (!isArray(raw) && isObject(raw)) {
+ const res: Record = {}
+ for (const key in raw) {
+ // `:` prefixed keys are coming from `ssrCssVars`
+ if (key.startsWith(':--')) {
+ res[key.slice(1)] = normalizeCssVarValue(raw[key])
+ } else {
+ res[key] = raw[key]
+ }
+ }
+ return res
+ }
+ return raw
+}
diff --git a/packages/shared/__tests__/cssVars.spec.ts b/packages/shared/__tests__/cssVars.spec.ts
new file mode 100644
index 000000000..747ab067d
--- /dev/null
+++ b/packages/shared/__tests__/cssVars.spec.ts
@@ -0,0 +1,27 @@
+import { normalizeCssVarValue } from '../src'
+
+describe('utils/cssVars', () => {
+ test('should normalize css binding values correctly', () => {
+ expect(normalizeCssVarValue(null)).toBe('initial')
+ expect(normalizeCssVarValue(undefined)).toBe('initial')
+ expect(normalizeCssVarValue('')).toBe(' ')
+ expect(normalizeCssVarValue(' ')).toBe(' ')
+ expect(normalizeCssVarValue('foo')).toBe('foo')
+ expect(normalizeCssVarValue(0)).toBe('0')
+ })
+
+ test('should warn on invalid css binding values', () => {
+ const warning =
+ '[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:'
+ expect(normalizeCssVarValue(NaN)).toBe('NaN')
+ expect(warning).toHaveBeenWarnedTimes(1)
+ expect(normalizeCssVarValue(Infinity)).toBe('Infinity')
+ expect(warning).toHaveBeenWarnedTimes(2)
+ expect(normalizeCssVarValue(-Infinity)).toBe('-Infinity')
+ expect(warning).toHaveBeenWarnedTimes(3)
+ expect(normalizeCssVarValue({})).toBe('[object Object]')
+ expect(warning).toHaveBeenWarnedTimes(4)
+ expect(normalizeCssVarValue([])).toBe('')
+ expect(warning).toHaveBeenWarnedTimes(5)
+ })
+})
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 49935f446..648179768 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/shared",
- "version": "3.5.14",
+ "version": "3.5.17",
"description": "internal utils shared across @vue packages",
"main": "index.js",
"module": "dist/shared.esm-bundler.js",
diff --git a/packages/shared/src/cssVars.ts b/packages/shared/src/cssVars.ts
new file mode 100644
index 000000000..0c69b606f
--- /dev/null
+++ b/packages/shared/src/cssVars.ts
@@ -0,0 +1,24 @@
+/**
+ * Normalize CSS var value created by `v-bind` in `