allow custom properties to be applied on the DOM elements about fundamental-vue HOT 4 CLOSED

@droshev I think that this is already possible. Vue automatically renders attributes (that are not registered as a prop) unless this is specifically turned off. This means that an application developer can to something like this:

<FdIdentifier title="Foo Bar" />

This will render the standard identifier and on hover a tooltip saying Foo Bar will be displayed (standard behaviour).

This also works when using (Fd)Identifier internally. However, Typescript will complain when compiling this:

<Identifier title='Foo Bar' />

Typescript rightfully complains. However you can still execute the resulting Vue app and everything will also work (despite the error message).

This is the case because Typescript only recognizes declared component props (by using the typical Props-interface) and well know attributes (declared in ./vue-tsx.ts). I have only added a handful of well known attributes to our configurution:

// KnownAttrs inspired by wonderful-panda
// MIT License
// Copyright (c) 2017 wonderful-panda
// Full License: https://github.com/wonderful-panda/vue-tsx-support/blob/master/LICENSE
// GitHub Project: https://github.com/wonderful-panda/vue-tsx-support
// Thanks!
type KnownAttributeName = 'class' | 'staticClass' | 'key' | 'ref' | 'slot' | 'scopedSlots';
type KnownAttrs = Pick<VNodeData, KnownAttributeName> & {
  style?: VNodeData['style'] | string;
  id?: string;
  refInFor?: boolean;
  domPropsInnerHTML?: string;
};

We now have several options:

1. We can simply add title to the KnownAttrs-type. (-1 from me)
2. If you want to set the title you could to it like this:

<Identifier domPropsTitle='Foo Bar' />

This works today. Without changing anything.
What do you think?

from fundamental-vue.

<Identifier domPropsTitle='Foo Bar' />

While that "works", I think it does something fundamentally different: it doesn't set the title attribute, instead it sets the correcsponding element property through javascript (pseudocode):

el.title = vnode.domProps.title

Have you considered just extending the KnownAttributes with a complete list, like vue-tsx-support does?

from fundamental-vue.

Have you considered just extending the KnownAttributes with a complete list, like vue-tsx-support does?

Thanks for the clarification. This is certainly something completely different. It seems that I didn't think about it hard enough.

Maybe we should simply do what the rest of the tsx-consuming world is doing. :D

from fundamental-vue.

Fixed.

from fundamental-vue.