Directives not working with SVG
Closed this issue · 2 comments
vandelpavel commented
Version
3.2.27
Reproduction link
Steps to reproduce
You must use an svg image and use a custom directive like in the fiddle. You can see that if the directive is on another element it works while on svg's will return an error.
What is expected?
Should works fine and log the element
What is actually happening?
Returns an error
lidlanca commented
hoisting issue
<template>
<b>{{msg}}</b>
<svg v-x>
<path d="M2,3H5.5L12"/>
</svg>
</template>
withDirectives called outside render function, and _directive_x is unscoped
const _hoisted_1 = _withDirectives(/*#__PURE__*/_createElementVNode("svg", null, [
/*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" })
], -1 /* HOISTED */), [
[_directive_x]
])
render function
return (_ctx, _cache) => {
const _directive_x = _resolveDirective("x")
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode("b", null, _toDisplayString(msg.value), 1 /* TEXT */),
_hoisted_1
], 64 /* STABLE_FRAGMENT */))
}
}
edison1105 commented
caused by:
- force block for custom dirs
svg
andforeignObject
also force blocksvg
+ custom dirs also force block, but here we skip the logic
core/packages/compiler-core/src/transforms/hoistStatic.ts
Lines 171 to 177 in 4768f26