I think it should be clearer in the docs how attr, prop and just the value behave so it is easier to prevent confusion like in this case:
#1296404552588988478
Also why when hyphenated value is on native tag <button icon-only={count()} /> it behaves like this _$effect(() => _$setAttribute(_el$, "icon-only", count())); and when on custom element <button-my icon-only={count()} /> like this _$effect(() => _el$.iconOnly = count()); which is quite confusing
and there should be some waring for prop:icon-only since it ends up _$effect(() => _el$.icon-only = count()); instead of _$effect(() => _el$['icon-only'] = count()); that obviously throws error.
And maybe some ts suggestion on how to prefix values with attr: and maybe suggest it as a best practice to force attr: on all custom components since just plain values behaves differently when it is dynamic or static typescript type ConvertAttributes<T> = { [Key in keyof T as `attr:${ToKebabCase<string & Key>}`]: T[Key]; };
Or when there is already different treatment for native elements and custom elements why just don't make all props on custom elements behave by default as attributes and make prop: the extra option rather then keeping in mind whether the value is dynamic or static, hyphenated or not hyphenated and then making everything look inconsistent.