Custom elements aren't treated as turbo frames

Hi! 👋

There is an issue between turbo and tables - turbo-frames cannot wrap tr, tbody and similar elements without breaking the styles. One of the workarounds is to use custom-elements and just write <tr is="turbo-frame"> - solves most of the problems.

However, if you do a request from within this fake turbo-frame element and the response returns a template, turbo cannot find a matching turbo-frame element and returns an error: Response has no matching <turbo-frame...

Personally I fixed it with patching turbo query selecting. Currently it’s:

querySelector(`turbo-frame#${id}`)

Changing it to this worked:

querySelector(`turbo-frame#${id}, [is="turbo-frame"]#${id}`)

Would this change be acceptable as a PR or this (custom elements with is=“” attribute) is not the way to go with turbo?

[francesco-loreti]

Changing it to this worked:

querySelector(`turbo-frame#${id}, [is="turbo-frame"]#${id}`)

Would this change be acceptable as a PR or this (custom elements with is=“” attribute) is not the way to go with turbo?

Promote this solution with Pull Request and wait for the result. I need to use tables and your solution, it also supports browsers that do not support the “is” attribute for the moment.

[dvisockas]

I wanted to add test cases before opening PR, but somehow can’t get test to properly work.