Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use of $$props in component causing DOMException #2520

Closed
reinink opened this issue Apr 23, 2019 · 2 comments · Fixed by #2618
Closed

Use of $$props in component causing DOMException #2520

reinink opened this issue Apr 23, 2019 · 2 comments · Fixed by #2618

Comments

@reinink
Copy link

reinink commented Apr 23, 2019

I am using {...$$props} to unpack all the props applied to a <Link> component (to make it easier to apply other attributes, such as class names, styles, etc), and this is causing an odd bug.

When used in conjunction with a <Layout> component that has a slot, and a form input, when you change the form input value, it throw this error:

VM34:100 Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '$$scope' is not a valid attribute name.
    at attr (eval at handle_message (about:srcdoc:68:8), <anonymous>:100:13)
    at set_attributes (eval at handle_message (about:srcdoc:68:8), <anonymous>:110:5)
    at Object.update [as p] (eval at handle_message (about:srcdoc:68:8), <anonymous>:418:5)
    at update (eval at handle_message (about:srcdoc:68:8), <anonymous>:182:16)
    at flush (eval at handle_message (about:srcdoc:68:8), <anonymous>:152:5)

It's odd, since the form input obviously has no connection to the <Link> components.

You can find a REPL of this issue here. Simply open up devtools, type something into the input, and you'll see the error.

2019-04-23 14 29 57

Version: Svelte 3.0.0
Browser: Chrome 73.0.3683.103 (Official Build) (64-bit)

@EmilTholin
Copy link
Member

Having an input in a slot seems to add the $$scope to the $$props of the component with the slot when the input value changes (REPL).

@EmilTholin
Copy link
Member

EmilTholin commented Apr 29, 2019

Changing the div in my linked REPL above to <div {...$$props} />, the fragment change handler looks like this:

p(changed, ctx) {
  // ...

  set_attributes(div, get_spread_update(div_levels, [
    (changed.$$props) && ctx.$$props
  ]));
},

Maybe the $$scope property of the $$props object could be discarded in set_attributes?

export function set_attributes(node, attributes) {
  for (const key in attributes) {
    if (key === 'style') {
      node.style.cssText = attributes[key];
    } else if (key in node) {
      node[key] = attributes[key];
-   } else {
+   } else if (key !== '$$scope') {
      attr(node, key, attributes[key]);
    }
  }
}

Or possibly taken care of in get_spread_update instead?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants