Beware of Leaky Abstractions When Relying on Attribute Inheritance in Vue Components

Update: My Twitter friend Austin Gil pointed out that he disagrees with a couple of my statements in this article. And he took the time to write down his thoughts. I’m convinced this makes an interesting discussion, so I added his comments throughout the piece. Usually, we read blog articles like this written in a tone that makes it sound like the author’s opinion is the absolute truth. But more often than not, it’s not. Depending on your use case or which trade-offs you prefer, you can come to different equally right (or wrong) conclusions.

In this article, we will discuss the problems associated with attribute inheritance, also known as fallthrough attributes, in Vue components and why it might be best to avoid using them. Attribute inheritance can increase the API surface of components, making it challenging to maintain and refactor them in the future. Instead of relying on this feature, I recommend adhering to best practices for component design, such as encapsulation and the Interface Segregation Principle. By doing so, we can create more maintainable and robust components less prone to breaking changes. We will also compare Vue’s approach to attribute inheritance with React’s, which does not have this feature by default, and discuss the pros and cons of each approach.

The Problems with Attribute Inheritance

Attribute inheritance in Vue components can lead to several issues that make it difficult to maintain and refactor components. Here are the main problems associated with this feature:

Vastly bigger API surface area

When using attribute inheritance, every possible attribute of the root element becomes part of the component’s API surface. Changing the root element or its attributes may inadvertently result in breaking changes. The larger the API surface, the more parts of our codebase we must consider when making changes to a component that affects its public API.

For example, if we change the root element from an <input> to a <div>, all instances of the component relying on input-specific attributes (e.g., pattern="[A-Za-z]{3}") will break.

class and style merging

Vue also merges class and style attributes automatically. What seems like a handy feature can become a footgun if we do not use it wisely. class merging makes it tempting to override component styles from the parent component using the class attribute. Doing so can be incredibly alluring when using utility-based CSS frameworks like Tailwind CSS. When we change the styling of a component, we inadvertently create breaking changes for parent components that rely on the original styles (e.g., <BaseCard class="justify-content" /> will break if we remove flex from the list of classes of the root element of BaseCard).

Brittle applications and cumbersome refactoring

The increased API surface and potential for breaking changes caused by attribute inheritance make refactoring components more challenging. When we need to change the internals of a component, we must carefully consider the potential impact on all instances of the component, making the refactoring process more time-consuming and error-prone.

Best Practices for Component Design

To avoid the pitfalls of attribute inheritance and create more maintainable and robust Vue components, consider following these best practices for component design:

Focus on a minimal and well-defined public API

Adhering to the Interface Segregation Principle, strive to create components with a minimal and focused public API. This approach reduces the likelihood of breaking changes, makes it easier to refactor components, and prevents parent components from depending on implementation details. A well-defined public API encapsulates the component’s internals, reducing the risk of leaky abstractions and making our components more modular and maintainable.

Use variant props instead of overriding styles with classes

Instead of using the class attribute to override component styles from the parent component, consider using variant props. Variant props allow us to define specific styling variations for a component that we can toggle on and off by passing a prop. This approach encapsulates the component’s internal styling implementation, preventing parent components from depending on the component’s inner CSS implementation details and reducing the risk of breaking changes when modifying the component’s styles.

For example, instead of:

<BaseCard class="bg-red-500" />

Use:

<BaseCard variant="error" />

You can read more about this topic in one of my previous article about effectively working with Tailwind CSS in Vue components.

Make all attributes explicit by defining props

By explicitly defining props for all attributes a component should accept, we can avoid relying on attribute inheritance and create a more focused public API with a small surface area. This approach also encapsulates the component’s internals, preventing leaky abstractions and ensuring that parent components do not depend on unnecessary details.

For example, if we have an image component like this:

<BaseImage src="/path/to/image.jpg" alt="An example image" />

Explicitly define src and alt props:

const props = defineProps<{
  src: string;
  alt: string;
}>();

This approach makes the public API of the component explicit. By only allowing us to rely on explicitly defined props, whenever we change the root element of a component (e.g., from <img/> to <div><img></div>), we don’t have to fear any parent component relying on attributes that only make sense on an <img> tag, as a bonus, we now can make the alt attribute required to nudge developers using this component to not neglect a11y.

React’s Approach to Attribute Inheritance

When it comes to attribute inheritance, Vue and React take different approaches. Let’s compare the two:

Vue’s attribute inheritance

As discussed throughout this article, Vue automatically forwards attributes from parent components to child components’ root elements. While this feature can be convenient, it also leads to a more extensive API surface area, increased risk of breaking changes, and more challenging refactoring.

React’s approach

React, on the other hand, does not have attribute inheritance by default. When passing attributes to a child component in React, we must explicitly define and pass props for each attribute. This approach encourages better encapsulation of component internals.

Some developers in the React community mimic attribute inheritance by passing a rest object containing all remaining props and spreading them onto the child component’s root element. However, doing so can introduce similar problems to Vue’s attribute inheritance.

Wrapping It Up

In conclusion, while convenient, attribute inheritance in Vue components can lead to several problems. Automatic attribute inheritance can save developers precious time when creating new components. However, as discussed in this article, it can also introduce potential issues, especially in the long run.

We can create more maintainable and robust components by following best practices for component design, such as encapsulation and keeping the public API surface area as small as possible. Ultimately, being aware of these pitfalls and adhering to best practices will result in more reliable and maintainable code in your Vue projects.