Inserting Custom Tags (a la WebComponents)

[twashing]

Can we insert custom tags using Kioo (ex: <div>Hello <my-tag>World</my-tag></div>)? I'm in the market for using webcomponents, and react certainly allows it (see here).

I ask because it looks like Om Next still employs whitelisting (see here), which React doesn't do anymore (at least from JSX).

[ckirkendall]

Right now if you are using kioo with om it uses the om.dom package and that does seem to be limited. If you are using kioo directly or with reagent we probably have a bit more room to fix this. For kioo directly we use React.DOM but we could mimic what jsx is doing. we might be able to do the same thing with om but first we need to figure out exactly how jsx is supporting custom tags in the compiled code.

[twashing]

Hey, thanks for getting back to me.

At the end of the day, I think JSX would just emit <my-custom-tag>foo</my-custom-tag> to the HTML string. WebComponents are a W3 spec (Shadow Dom + HTML Imports, Templates , et al), so passing custom tags to the browser will just work.

I'd imagine things would get a lot more complex, as soon as you have to use any DOM API. At that point, you'd have to manually construct your DOM tree. Well, that's an educated guess anyways :) If there's a way to just emit HTML, I see that as the easiest way.

[ckirkendall]

It looks like we can do this programmably by doing the following. https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html#creating-a-reactelement

[twashing]

Hey Creighton,

Currently, when using Om's DOM API, it goes through that whitelist above. But you're saying that when Kioo renders, it can fall back on React's API to create these DOM elements. If that's the case, then that's awesome. We certainly can't anticipate future HTML5 tags. And I think the Webcomponent use case is a strong argument for having this kind of escape hatch.

I know that WebComponents require that you import HTML Templates (example here) to use your component (example here). A) So something to consider when implementing this, is how to handle those imports. You can probably assume that the user has already done that. But I imagine you'd have to be mindful of it. Also B) I the event systems might be different between Om/React and WebComponents. So keep that in mind as well.

Hth