6

In one of my React components, I have the following definition for some custom elements:

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace JSX {
        interface IntrinsicElements {
            'd3fc-group': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
            'd3fc-svg': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
        }
    }
}

and I return as:

return (
    <div ref={d3Container} className='main_layout' data-testid={'chart'}>
        <d3fc-group
            id='group'
            className='hellooo'
            style={{ display: 'flex', height: '100%', width: '100%', flexDirection: 'column' }}
            auto-resize>
        </d3fc-group>
    </div>
);

But in the resulting html, "className" is converted to "classname" not "class" attribute.

<d3fc-group id="group" classname="hellooo" auto-resize="true" style="display: flex; height: 100%; width: 100%; flex-direction: column;"><div style="flex: 1 1 0%; display: flex; flex-direction: column;"></d3fc-group>

How to make it converted to "class" attribute like other components?

Tanrikut
  • 418
  • 5
  • 11

2 Answers2

7

It looks like React treats custom elements differently and passes through all attributes directly without any converting the names of React's special attributes. Thus className does not get translated to class.

You can instead use class directly in your case.

See issue discussion: https://github.com/facebook/react/issues/4933
and docs: https://reactjs.org/docs/web-components.html

Silveri
  • 4,836
  • 3
  • 35
  • 44
1

Please make it simple and use class instead of className.

Custom elements DO work in React. You must use class instead of className because the custom element spec requires that we allow users to specify a className attribute and we need to preserve that functionality for custom elements. - Source

1harshh
  • 31
  • 7
  • Did you mean to cite the "Source" of your quote? This *appears* to be [this GitHub repo](https://github.com/facebook/react/issues/4933). – Adrian Mole Oct 23 '22 at 10:10