How to do it...

Here, we will create a component that will have a full attribute inheritance on a selected element on the DOM tree:

1. Using the base example from the Creating the base file section, create a new file named component.html and open it.
2. In the empty <script> HTML element, create the constants of the functions that will be used using the object destructuring method, calling the defineComponent and createApp methods from the Vue global constant:

const {
  defineComponent,
  createApp,
} = Vue;

3. Create a constant named nameInput, defined as the defineComponent method, passing a JavaScript object as an argument with four properties: name, props, template, and inheritAttrs. Then, we define the value of inheritAttrs as false:

const nameInput = defineComponent({
  name: 'NameInput',
  props: {},
  inheritAttrs: false,
  template: ``
});

4. In the props property, add a property called modelValue and define it as String:

props: {
  modelValue: String,
},

5. In the template property...