Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue/no-v-text-v-html-on-component on a g svg element #2602

Closed
2 tasks done
JollyGood1 opened this issue Nov 7, 2024 · 2 comments
Closed
2 tasks done

vue/no-v-text-v-html-on-component on a g svg element #2602

JollyGood1 opened this issue Nov 7, 2024 · 2 comments

Comments

@JollyGood1
Copy link

Checklist

  • I have tried restarting my IDE and the issue persists.
  • I have read the FAQ and my problem is not listed.

Tell us about your environment

  • ESLint version: 9.13.0
  • eslint-plugin-vue version: 9.29.0
  • Vue version: 3.5.12
  • Node version: 18.18.0
  • Operating System: windows 10

Please show your full configuration:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from 'typescript-eslint';
import pluginVue from "eslint-plugin-vue";
import vueParser from "vue-eslint-parser";


export default [
	{
		files: ["**/*.{js,mjs,cjs,vue}"]
	},
	{
		languageOptions: {
			globals: globals.browser,
			parser: vueParser,
			parserOptions: {
				parser: tseslint,
				sourceType: "module",
				vueFeatures: {
					interpolationAsNonHTML: true
				}
			},
		}
	},
	{
		ignores: ["*.js.snap"],
	},
	pluginJs.configs.recommended,
	...pluginVue.configs["flat/recommended"],
	{
		rules: {
			// *** Priority A: Essential
			"vue/no-unused-components": "off",
			// Priority C: Recommended
			"vue/no-v-html": "off"
		}
	}
];

What did you do?

I have a code that looks something on the lines of this:

<svg>
    <g v-html="shape" />
</svg

What did you expect to happen?

I expected no error since g is an svg element and not a component

What actually happened?

I'm getting this error:

Using v-html on component may break component's content vue/no-v-text-v-html-on-component

Repository to reproduce this issue
Is a repository truly necessary?
I just use this code, it's pretty straight forward:

<template>
    <g v-html="shape" />
</template>

<script setup>
    const shape = ref('<path fill="#000000" d="M50,0 L58.82,37.86 L97.55,34.55 L64.27,54.64 L78.39,90.45 L50,65 L21.61,90.45 L35.73,54.64 L2.45,34.55 L41.18,37.86 Z"></path>');
</script>
@waynzh
Copy link
Member

waynzh commented Nov 12, 2024

Only <g> within <svg> (meaning its namespace is SVG) will be recognized as a non-component. Otherwise, it will be treated as a regular component.

You can also use the allow option to disable this error.

@FloEdelmann
Copy link
Member

Thanks @waynzh for mentioning the workaround.

This is basically the same issue as #2458, so I'll close this as a duplicate. Feel free to comment there.

@FloEdelmann FloEdelmann closed this as not planned Won't fix, can't repro, duplicate, stale Nov 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants