Empty class attribute applied by default to rendered RouterLink element

[r-frederick]

Version

3.0.3

Reproduction link

https://codesandbox.io/s/vue-template-2omcj?fontsize=14&module=%2Fsrc%2FApp.vue

Steps to reproduce

See reproduction in sandbox for reference (see App.vue for relevant parts).

1. Define default styles that only apply when another class is not applicable.
2. Insert a with no classes defined.
3. Observe that the default styles using not([class]) do not take effect.

What is expected?

When the link is inactive or does not match the current route no classes should be applied and the attribute should not exist on the rendered element.

What is actually happening?

No classes are being applied to the rendered element, but the class attribute still exists as it's included in the createElement call (class properties on data).

---

I'd prefer to not discuss whether or not the "not" selector should be used this way. It's a fairly reasonable expectation to have no class attribute on the element when classes aren't being applied.

If desired, I could submit a PR with a bugfix for this issue. From my limited experimentation, it seems fairly trivial to implement a fix.

[posva]

This is not related to the router, it comes from Vue itself and it's working as expected.
Even if you don't want to discuss it, applying a style on an empty class attribute seems like a very bad practice that should be avoided at all cost. I don't know the reason behind the attribute being kept, but I could image it's for performance reasons

[r-frederick]

Perhaps I'm misunderstood. I'm not applying styles based on whether or not the attribute class is present, but rather applying default styles if no classes are present. To further clarify:

Given this CSS:

a:not([class]) {
  color: red;
  text-decoration: none;
}

• <a href="#"> would qualify for the specified styling as it has no classes being applied
• <a href="#" class="some-other-class"> would not qualify for the specified styling as it has a class being specified
• <a href="#" class> unfortunately qualifies as it has a class attribute, regardless of there being no classes applied.

The last case mentioned is occurring with the rendered RouterLink (found here). The class attribute is being included when the element is created even when both exactActiveClass and activeClass are false/inactive. Perhaps there is a reason why we need to keep an empty class attribute on the element? I'm not sure.

To me, this doesn't seem to be a Vue issue, but an implementation quirk of RouterLink itself. It would be helpful if you could fill in any gaps in my understanding.

[posva]

To me, this doesn't seem to be a Vue issue, but an implementation quirk of RouterLink itself. It would be helpful if you could fill in any gaps in my understanding.

Try it out with Vue :class="{ foo: false }"

I'm not applying styles based on whether or not the attribute class is present, but rather applying default styles if no classes are present

It's the same thing twice repeated twice: you are applying styles based on the presence or absence of the class attribute

I hope this clears up things for you. Cheers

[r-frederick]

Yes, I'll agree that I have the appearance of repeating myself. My wording was poor.

That said, I've tried your suggestion and am still ending up with the same result:

Notice the presence of the class attribute without any actual classes being applied. This is the case with both binding a class value and not.

If you wouldn't mind. The following codesandbox demonstrates the issue more clearly:

https://codesandbox.io/s/vue-template-ubwg8?fontsize=14&module=%2Fsrc%2FApp.vue

EDIT:

I've looked into a little more, and I understand what you are getting at regarding it being a Vue problem. I was taking the initial assignment of a class to be vue-router's issue (which it is somewhat). It's hard to imagine that the class attribute sticking around is "as intended", but I'll take this up with the appropriate repo.

Thanks @posva