-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
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
Should class
and style
should be included in $attrs
?
#6144
Comments
|
Couldn't the same be said about other attributes as well (e.g., |
The reasoning here is that When authoring components, I don't think it's a good idea to encourage the user to directly style the component via classes or inline styles. As I said, prefer pure data props and manage the styling inside the component. your example could just be: <field :has-error="hasError"></field> Now the user of the component don't even need to know about the |
I agree with @mrcsmcln that while avoiding unexpected results is a good rationale for the behavior, excluding certain arbitrary attributes is less transparent/consistent and simply causes unexpected results in a different way (though the clear documentation is appreciated). In this case, I argue that consistency and clarity are more important. Additionally, it appears there is currently no way to apply For me, this is compounded by the inability to have more than one root element, which forces us to use wrapper elements (e.g. for HOCs) to which we may not want to apply Side note: the documentation seems to imply that |
I ran into this trying i have a text input component that needed to be in a div (making a input with font awesome in a span in the textbox) , 99% of the time styling should be applied to the input not the div, would be nice if we could get an inheritStyle option (which would also include class) then we can say
or even some kind of nicer way to merge the class/style data. I had to deal with it by adding a specific property for passing styling to the input, which is annoying and non intutitve. While generally i can agree with not exposing styling of inner components like that, sometimes for simple ones it makes sense (and even some complex ones there may be a default item to apply the style to) Other times as @jcupps mentioned vue forces us to abuse div tags because it thinks there might be more than 1 root element (even though i KNOW it never will) and we cant use template tags to get around it. As a contrived but simple example you cant do
because the node types are different and vue doesn't like an else on a different node type. so you have to
And then class= gets applied to the div regardless of inheritAttrs even though its only there for vue and if anything it gets in the way of the html (but thats a different topic). |
This has been causing me grief too, I'm having to use props with un-obvious names to pass class attributes down to my reusable components. yyx990803 you stated "When authoring components, I don't think it's a good idea to encourage the user to directly style the component via classes or inline styles." But in my mind the whole point of making reusable components that are flexible is that they can be styled by the container, thus making them easy to use without refactoring every time you want to change say the background colour or text size. Just the name of the property 'inheritAttrs' should imply exactly that, maybe it should be renamed 'inheritMostAttrs' that way new users would get a clue! Having to write computed properties in 90% of my components to deal with applying classes and styles to the inner elements is quite frankly very annoying and wastes time when you forget. Personally I think the default behaviour should be changed to exclude all attributes if the flag is false, however this would now be a breaking change so how about a related property 'inheritStylingInAttrs' which would default to false and not include them, setting it to true would force the behaviour we are all looking for and would have expected in the first place. |
I've just stumbled upon this design flaw myself. I wanted to create an accessible icon component:
which would become:
First obstacle is I can't have multiple root elements, okay, I wrap it in span. But then I discovered class is excluded from My working but ugly component is now as follows:
Used like It works, but it's needlessly complicated. I could use (yes, I could put the |
Can this be reopened? If we can have the freedom to attach |
By the way, the guide docs about component props have |
If components are meant to be considered by the user as fancy single HTML nodes that can be modified as normal HTML can, then the If, however, components are meant to be functional—they serve a particular purpose for the parent, however that purpose can most effectively be achieved—then it makes sense to give the component designer control over how HTML modifications from the parent are implemented. What I like about Vue, generally, is how comfortably the beginner and advanced modes tend to coexist. There is a simple language that covers the majority of use cases, and when a new constraint causes that language to break down, a developer can quickly find the expanded toolkit that allows them to dig as many layers down as they need to in order to thoroughly solve the problem. For simple use cases, it makes sense to think of components as fancy HTML nodes. For more advanced cases, it makes sense to think of them more abstractly, as managers of a branch of the DOM tree. This is especially true when, for whatever reason, the root element of the component can't be the same as the root presentational element. Generally, I would expect an option like
|
I totally agree, well phrased Mattias. Sadly it doesn't seem to be getting us anywhere. The Vue elite seem to be ignoring this conversation. |
In 3.0 |
What problem does this feature solve?
What's the rationale for excluding
class
andstyle
bindings from$attrs
? How else would you bind these attributes to wrapped elements?What does the proposed API look like?
Consider this
field
component:Say I'd like to bind the
field__input_error
class to the<input>
element whenhasError
is true. I'd expect to be able to do it like this:But if you wanted to go with the current behavior, you could do this instead:
I would suggest that we don't overwrite existing
class
andstyle
attributes as is currently done with other attributes. Also,inheritAttrs
would ideally preventclass
andstyle
attributes from being passed to the root element when set tofalse
.The text was updated successfully, but these errors were encountered: