solid icon indicating copy to clipboard operation
solid copied to clipboard

Dynamic + attr + custom element behavior is very erratic

Open Blankeos opened this issue 4 months ago • 1 comments

Describe the bug

2 SolidJS concepts colliding with eachother:

  1. Dynamic
  2. Attr

For instance when using this code:

      <Dynamic component={"my-custom-element"} data-awesome="true">
        1. I'm a dynamic component without `attr:*`. Inspect element me. Expect:
        No attributes.
      </Dynamic>

      <br />
      <br />

      <Dynamic component={"my-custom-element"} attr:data-awesome="true">
        3. I'm a dynamic component with `attr:*`. Inspect element me. Expect:
        Has attribute.
      </Dynamic>

There's currently 3 unexpected behaviors that are happening when using the code above.

image

Your Example Website or App

https://github.com/Blankeos/mre-solid-attr-bug

Steps to Reproduce the Bug or Issue

  1. Clone the repo https://github.com/Blankeos/mre-solid-attr-bug.git

  2. npm run dev

  3. Check the elements in inspect element.

  4. When done, go to app.config.ts, and ssr: true

  5. Check the elements in inspect element.

  6. When done, try checking when instead of "my-custom-element", this time just "div".

  7. Check the elements in inspect element.

Expected behavior

  • attr:data-something and the regular data-something to have the same results.
  • Using attr:* on the server should not put attr:something on the rendered html as well.

Screenshots or Videos

No response

Platform

  • OS: macOS
  • Browser: Arc
  • Version: 1.63.1 (54714)

Additional context

No response

Blankeos avatar Oct 16 '24 20:10 Blankeos