-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Closed
Labels
Description
All of the props that are passed to a component are available through $$props
, but there isn't a great way to access the "unknown" (non-exported) props. Having the ability to access these props would make it more convenient to forward attributes down to a native DOM element.
Currently, my workaround is to destructure $$props
with every known prop name.
<div {...rest} id={computed}>
<slot></slot>
</div>
<script>
export let one;
export let two;
$: computed = `${one}-${two}`;
const {
one: _one,
two: _two,
'$$slots': _slots,
'$$scope': _scope,
...rest
} = $$props;
</script>
<div one='test' two='ing' tabindex="-1">Testing</div>
<!-- <div id="test-ing" tabindex="-1">Testing</div> -->
My ideal use would look more like:
<div {...$$attrs} id={computed}>
<slot></slot>
</div>
<script>
export let one;
export let two;
$: computed = `${one}-${two}`;
</script>
I used $$attrs
since Vue has an $attrs
property (based on its inheritedAttrs
), but I'd happily type $$theseAreTheUnexportedProps
if it saved me from doing the destructuring myself.
If this isn't ideal default behavior, maybe it could be controlled with an option?
<svelte:options inherit={true} />
nikku, RedHatter, meiseayoung, suddjian, vajdagabor and 6 more