disallow v-text/v-html on components

[jacekkarczmarczyk]

Please describe what the rule should do:
Components can have internal html structure that will be destroyed if you use v-html or v-text on them. Here's codepen example

https://codepen.io/jkarczm/pen/MWvRLYa

    <v-btn>foo</v-btn>
    <v-btn v-text="'foo'" />

and the generated markup:

    <button type="button" class="...">
      <span class="v-btn__content">foo</span>
    </button>
    <button type="button" class="...">
      foo
    </button>

As you see the second one misses the v-btn__content div, which in this particular case doesn't seem to break anything (EDIT: actually it does vuetifyjs/vuetify#11792 (comment)) but it could potentially

What category should the rule belong to?

[ ] Enforces code style (layout)
[X] Warns about a potential error (problem)
[X] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
  <!-- warn -->
  <some-component v-text="'content'" />
  <some-component v-html="'content'" />

  <!-- ok -->
  <div v-text="'content'" />

  <!-- not sure, should probably warn too, could be configurable -->
  <web-component v-text="'content'" />

Additional context

Initially I thought about a new rule but I think that it could be just a configuration option for vue/no-v-text and vue/no-v-html rules ({ allowNativeTags: true })

[ota-meshi]

Thank you for your suggestion. I think it's good to add options to the two existing rules, but I think it's better to add new rule to clearly separate the goals.

[jacekkarczmarczyk]

but I think it's better to add new rule to clearly separate the goals

I don't agree, the goal is the same - prevent from using v-text/v-html, the only difference is that the existing rules prevents it everywhere and proposed one prevents it only for components, so just adding the configuration seems a valid solution for me

[ota-meshi]

I think those goals are different. Also, I think each rule has a different category.

• no-v-html is a rule to prevent XSS attacks. In most cases it is better not to use v-html, so the rule is included in the category recommended.
• no-v-text is a rule for users who do not want to use v-text. Users can turn ON the rule according to your preference.
• The new rule is to prevent unexpected component content corruption. This is a problem for everyone, so I think it's a rule that should be included in the category essential in the future.

[jacekkarczmarczyk]

Fair enough

This is a problem for everyone, so I think it's a rule that should be included in the category essential in the future

Was about to suggest it as well, completely agree