Unique elements get "classname" instead of "class"

[WorldsEndless]

My desired output:

<byu-footer-column class="double-wide"></byu-footer-column>

My reagent line:

[:byu-footer-column {:class "double-wide"} "Testing classname?"]

My actual output:

<byu-footer-column classname="double-wide">Testing classname?</byu-footer-column>

Is this a bug? How can I get a "class" instead of "classname" on a non-canonical element?

[Deraen]

As workaround, you can call createElement directly, to skip any Reagent props handling:

(reagent.core/create-element "byu-footer-column" #js {:class "double-wide"} "Testing classname")

(reagent.core/create-element "byu-footer-column" #js {:class "double-wide"}
  (reagent.core/as-element [:h1 "Reagent component inside React"]))

Reagent has to rename class to className because that is what normal DOM elements use. Obviously changing this is not possible.

To skip this renaming for custom elements, would require Reagent to check which tags are DOM elements, and which are not. I was at first unsure if this would be possible, but there seems to be quite simple way:

https://www.w3.org/TR/custom-elements/#custom-elements-core-concepts

These requirements ensure a number of goals for valid custom element names:

• They contain a hyphen, used for namespacing and to ensure forward compatibility (since no elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the future).

So we could just check if the tag name contains hyphen to see if it is a custom element.

Would be great to run some performance tests on this though, as the check needs to be done on potentially performance critical path.

[Deraen]

Another workaround currently would probably be [:byu-footer-column {"class" "double-wide"} "Testing classname?"], because Reagent only renames symbol/keyword prop keys.

[WorldsEndless]

That work around works great. Thanks for that!

[:byu-footer-column {"class" "double-wide"} "Testing classname?"]

[WorldsEndless]

That work around works great. Thanks for that!

[:byu-footer-column {"class" "double-wide"} "Testing classname?"]