Web components with keywords are broken

[ealmloff]

Problem

The rsx macro fails to parse this-is-a-box {} as an element because box is a keyword

Steps To Reproduce

Steps to reproduce the behavior:

Create an expression with a keyword in a web component:

rsx! {
    this-is-a-box {}
}

Observe the error

[ERROR] Other(error: Expected a valid body node.
       Expressions must be wrapped in curly braces.
  --> src/main.rs:11:9
   |
11 |         this-is-a-box {
   |         ^^^^

)

Expected behavior

Ideally, this should work out of the box. We could either allow keywords in elements and attributes or automatically escape raw attributes to make r#this-is-a-r#box create the element this-is-a-box

Environment:

• Dioxus version: [e.g. v0.17, master]
• Rust version: [e.g. 1.43.0, nightly]
• OS info: [e.g. MacOS]
• App platform: [e.g. web, desktop]

Questionnaire

• [ ] I'm interested in fixing this myself but don't know where to start
• [ ] I would like to fix and I have a solution
• [ ] I don't have time to fix this right now, but maybe later

[jkelleyrtp]

In theory we could accept type, for, as, etc as attribute names in the macro too, but the way attributes are defined makes it harder.