Description
Describe the problem
In a component library, one might allow a component to accept an HTML element ID, or the component could default to the value of $props.id().
As it stands today, $props.id can only be used to initialize a const variable in the component's script.
Furthermore, even if the component did not accept its ID to be set externally via properties, it is helpful for the component to be able to share its ID by means of a binding.
To achieve this today, one would need to do something like this:
<script>
let {
id = $bindable()
} = $props();
const cid = $props.id();
$effect.pre(() => {
id = cid;
});
</script>Describe the proposed solution
It would be nice if one could simply use $props.id() as the default value of a property:
<script>
let {
id = $bindable($props.id())
} = $props();
</script>Externalizing the value of $props.id() is a must for components that create things like accessible text, where the id is needed elsewhere in a described-by attribute, to name an example that is not the obvious <label for={id}>... example.
Importance
would make my life easier