Typing when using the .attr when binding attributes on customElemen

[stefanonepanedap]

I am having some struggles when type checking a customElement that has different types between the attribute (string) and the property which is different (eg. number or Date).

Apparently the types related to the properties cannot differe from the attributes. Which if I am not mistaken when using the .attr modifier the possible type should be only a subset of strings.

There is the caveat of not having the modifier(.attr/.prop), which endup with checking the property type if the name exists or apply a string only.

Currently I am having to shortcut the check by forcing eslint to skip the entire attribute.

What do you think?

[Muhammed-Kara]

Your understanding of the runtime behavior is correct, but the current template type checker does not appear to model attributes and DOM properties as two separate type domains.

At runtime, Vue behaves as documented:

• .prop forces assignment to the DOM property.
• .attr forces setAttribute().
• Without either modifier, Vue checks whether the key exists on the element and prefers the property when it does.

DOM attributes are serialized as strings, while a custom element property can hold values such as number, Date, or objects.

The current vue-language-tools code generation normalizes both .prop and .attr back to the same property name and emits that name into the same object used for TypeScript verification. It therefore has no separate attribute-type map from which it could infer string for .attr while retaining number or Date for .prop.

Source: elementProps.ts
Runtime behavior: Vue v-bind documentation

So, as things stand, declaring two different types for the same custom-element key and having the modifier select between them does not seem expressible. This looks like a missing typing feature (or a language-tools bug), rather than an ESLint problem.

A narrow workaround is to serialize attribute values explicitly and limit the type escape to that binding:

<my-element
  :value.prop="numericValue"
  :value.attr="String(numericValue) as any"
/>

For a Date, explicit serialization such as date.toISOString() is preferable to relying on implicit String(date) conversion.

A minimal issue containing the custom-element declaration plus one .attr and one .prop binding would be useful, with the expected behavior stated as:

• .attr checks a string-compatible value.
• .prop checks the property type from the custom element instance.