Skip to content

Feature request: group unknown props for forwarding #2930

@pshrmn

Description

@pshrmn

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} />

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions