Skip to content

Interaction with class and style properties #11246

@KingSora

Description

@KingSora

What problem does this feature solve?

Currently the user isn't able to control the class and style properties of a component.

Example:
As a library author I want that my component has a static class and no style at all.
The component template looks like this:

<span class="the-only-allowed-class">Some content</span>

Someone decided to use this component and does this:

<component class="class-set-by-user" style="background: red"></component>

Now the component has two classes class="the-only-allowed-class class-set-by-user" because vue does a merge behind the scenes. As a component author I have basically no control over the class (and also the style) property.
I can't read the set class or style property, I can't prevent them to be set, I can't watch them so that I could somehow act after they were set. I can basically do nothing about it.
Thats what this feature request shall solve.

In comparison, libraries like React and Angular have such a feature.

What does the proposed API look like?

Don't handle the class and style property like something special. Just handle them as normal properties. Make them watchable inside the watch object. Make them (somehow) readable with exposing them in the $attrs object. etc.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions