$attrs includes class & style breaking
Overview
$attrs now contains all attributes passed to a component, including class and style.
2.x Behavior
class and style attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are not included in $attrs, while all other attributes are.
A side effect of this manifests when using inheritAttrs: false:
- Attributes in
$attrsare no longer automatically added to the root element, leaving it to the developer to decide where to add them. - But
classandstyle, not being part of$attrs, will still be applied to the component's root element:
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
when used like this:
<my-component id="my-id" class="my-class"></my-component>
...will generate this HTML:
<label class="my-class">
<input type="text" id="my-id" />
</label>
3.x Behavior
$attrs contains all attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
<label>
<input type="text" id="my-id" class="my-class" />
</label>
Migration Strategy
In components that use inheritAttrs: false, make sure that styling still works as intended. If you previously relied on the special behavior of class and style, some visuals might be broken as these attributes might now be applied to another element.
Migration build flag: INSTANCE_ATTRS_CLASS_STYLE