Non-Prop Attributes Inheritance

Explain how non-prop attributes are automatically inherited on the root element of the component and how to optionally disable this behavior.
  <input v-bind="$attrs" />

  export default {
    inheritAttrs: false,
In this Vue.js component example, non-prop attributes (like 'placeholder', 'readonly', etc.) are inherited automatically on the root element of the component, which is the '<input>' element in this case. The 'v-bind="$attrs"' binding applies all passed attributes to the input element. Setting 'inheritAttrs: false' in the component's options prevents the automatic binding of non-prop attributes to the root element. Instead, one explicitly opts in by using the '$attrs' binding.
  input {
    border: 1px solid #ccc;
    border-radius: 4px;
The CSS styles the input element within the Vue.js component to have a border and a border-radius, which is a common design for form inputs.