Non-Prop Attributes Inheritance

<template>
  <input v-bind="$attrs" />
</template>

<script>
  export default {
    inheritAttrs: false,
  };
</script>

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.

<style>
  input {
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>

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.