Attribute modifiers

[BjornDCode]

The following rules exists for modifers in components:

1. All unused attributes are applied to the root element
2. Attributes override existing attributes on the root element
3. It's possible to 'merge' attributes with the following syntax: class="existing-class-name {{ class }}"

It works but is not very explicit. We should support some modifiers both when defining attributes inside components and when using components.

Inside component definitions:

<div :class="existing-class-name" !id="my-component">

</div>

The : modifier makes the attribute 'mergable'. That means the class attribute will automatically get merged with any classes passed in when using the component.

The ! modifier makes the attribute 'non-overridable'. If passing in an 'id' it will cause a compilation error unless the attribute is explicitly used somewhere else in the component definition.

When using components it's also possible to use the ! modifier. This will make it so the attributes overrides an attribute in the definition markes as mergable

[BjornDCode]

After thinking about this some more I have some more thoughts. It would be good to avoid using : because it clashes with both Alpine and Vue. Additionally I've thought about some more features that would make attributes more useful. I think my new thoughts are something like this:

[name]="value": [] can be used to set an attribute with a dynamic name where name is a variable
[...$record]: ... can be used to spread all items in a record into attributes
<Modal #open="true" />: # can be used to 'bind' data i.e. open will be the boolean true instead of the string "true"
!class="text-red-500": ! can be used to mark an attribute as non-overridable
...class="text-red-500": ... can be used to mark an attribute as 'mergable'
class="text-red-500": By default a normal attribute will be overwritten if an attribute with the same name is passed in