Support for custom DOM elements & attributes

[Gozala]

Is there reason why React restricts you to just a subset of DOM elements and attributes ? Unfortunately it makes it really hard to use it with new HTML or non standard features unless support for that is added.

I noticed I could create custom elements via React.createFactory("custom")

https://github.com/facebook/react/blob/master/src/browser/ReactDOM.js#L30
https://github.com/facebook/react/blob/master/src/classic/element/ReactElement.js#L201-L209

But it's not documented & not sure if supported in long term. And even if it was supported that still does not solve problem of attributes as ones not listed in the docs seem to be ignored.

I think it would be good idea to allow defining custom virtual DOM Elements with a custom list of attributes so that users could implement them even if support for new element isn't in the core yet.

Finally support for namespaces would be super useful for using react even in more environments & should not be too hard either. I have successfully used vtree / vdom to do that.

[zpao]

Before createElement we had a hard coded list. We still have that list in the transform for deprecation purposes but as you noted you can pass anything to createElement and it'll work. There may be some special cases for custom elements that we haven't accounted for.

As for attributes, there is some work but the plan is to let anything through eventually. We need to make the transfer and consumption of props better, otherwise it will be super easy to put way too many props on DOM elements. We still need a whitelist of attributes that have special requirements so we can make sure we mutate nodes correctly. We can probably just use setAttibute for many though.

And lastly for namespaced attributes, there's a bit that needs to be done. The first is just adding support so we know when to use setAttributeNS. The 2nd is deciding how we write them in JSX. JSX doesn't support namespace:attribute={value}. Even if it did, what does that transform to? It can't be {namespace: { attribute: value }}. Our best path here will probably be to make namespaceAttribute={value} the way to do this, but unless we expose a way to register properties we'd have to whitelist everything possible (xul, svg). We have the mechanism to register properties (it's how React works internally) but it's not publicly exposed as it's not clear how we should handle collisions.

We did talk a long time ago about exposing a way to register elements but as we get rid of the whitelist it doesn't make sense moving forward. Registering attributes may be a thing though. We need to figure out the details of all of this to support web components so it's definitely all in progress.

[Gozala]

@zpao thanks for the comment. I think you could maybe provide some value boxing function to indicate that given prop is indeed an attribute:

React.DOM({ flex: React.AttributeNS(XUL_NS, 2),
                       align: React.Attribute("center") }, children)

In the end I managed to find a workaround by generating custom element constructors wrapped in react component (see https://github.com/Gozala/firefox.html/blob/react/js/element.js#L18-L87)

That enables me to define custom elements by providing it's field anotations:
https://github.com/Gozala/firefox.html/blob/react/js/frame.js#L8-L55

Although I'm afraid this way I'll am throwing some optimizations away.

[glenjamin]

The 2nd is deciding how we write them in JSX. JSX doesn't support namespace:attribute={value}. Even if it did, what does that transform to? It can't be {namespace: { attribute: value }}.

Is there a reason that <a ns:attr="1"> can't transform into React.createElement("a", {"ns:attr": "1"})?

[vegetableman]

AFAIK, only namespaced attributes need support. The above approach makes sense. What do you think @zpao?

[pekeler]

I'm confused. Isn't this supposed to be working since 0.12? The release notes state "lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components". Yet when I try to render <myCustomHtmlElement/> I'm getting Lower case component names (myCustomHtmlElement) are no longer supported in JSX: See http://fb.me/react-jsx-lower-case. That linked Gist also gives me the impression that it should work.

[andrewrota]

@pekeler that should be fixed with #2830

[pekeler]

Great. Thanks @andrewrota

[gnestor]

@andrewrota Can we use custom elements/web components in React 0.12.2? I tried and I'm getting the above error. I created a StackOverflow thread: http://stackoverflow.com/questions/28751629/react-0-12-2-error-lower-case-component-names-paper-button-are-no-longer-su

[andrewrota]

@gnestor, no, you'd need 0.13.0-alpha.1 or greater I believe.

[gnestor]

@andrewrota Ok thanks.

[arendjr]

I just upgraded to React 0.14.2 and noticed that I can add arbitrary attributes to custom elements now (this didn't work with 0.13). I'm guessing this can be closed now?

[gaearon]

When you use web components with React, you can pass any attributes.