Additional properties

[TomCodePeople]

Hi All,

I am creating a Custom Element with Vue 3. Is it possible to have additional unknown properties (to components)?

For example the element html:

<custom-element-name known-prop1="file.json" known-prop2="test" prop3="YES">

// Setup script (not working)

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    knownProp1: string
    knownProp2?: string
  }>(),
  {
    knownProp2: 'no',
  }
)

console.log(props)
// {
//   knownProp1: "file.json",
//   knownProp2: "test",
//   prop3: "YES"
// }
</script>

When I use it like above it will not pass the prop prop3 and gives a warning: Extraneous non-props attributes (prop3) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

Is it possible to get this work where prop3 is passed?

The use case:

• The custom element is implemented in HTML.
• One of the properties is to define a JSON file url.
• The JSON file describes what the custom element should do and display. And also what properties it needs.
• The custom element will get this JSON file and looks what to do and display.
• I will validate the additional properties with some code, Vue doesn't have to do that in this case.

Thanks in advance.

[Sight-wcg]

see: https://vuejs.org/guide/components/attrs.html