2

In knockout we can create custom elements that can look something like this:

<flight-deals params='from: "lhr", to: "sfo"'></flight-deals>

The definition of custom elements in HTML is still work in progress and a part of the process of using this today is to register the custom element to the DOM using document.registerElement.

However, I can not find anything in the knockout documentation regarding these aspects, and when I investigate if my custom elements are registered to the DOM by knockout after calling ko.components.register, they turn out not to be.

So if I'm using custom elements in knockout, should I also make sure to also register these manually using document.registerElement? The fact that knockout does not already do this makes me a little confused.

Community
  • 1
  • 1
Alex
  • 14,104
  • 11
  • 54
  • 77
  • 2
    I think (but not 100% sure, hence comment and not answer) that knockout custom elements shouldn't be thought of as HTML/w3 custom elements. Indeed, [the documentation](http://knockoutjs.com/documentation/component-custom-elements.html#introduction) says: _"Custom elements are a syntactical alternative to the component binding (and in fact, custom elements make use of a component binding behind the scenes)."_ – James Thorpe Jan 27 '16 at 11:58
  • @JamesThorpe But nevertheless, these tags are inserted as is into the DOM. Isn't that forcing us to also see these elements as real html custom elements regardless of how knockout handles them? – Alex Jan 27 '16 at 12:03
  • I'm not sure. Since the w3 spec is still in progress, I haven't looked too much into them at this stage. Given that knockout works without them being registered, it seems that at this point, no they don't need to be registered. Exactly what's going on under the hood though, I don't know. I will await a technical answer too! – James Thorpe Jan 27 '16 at 12:04
  • Looking at [the spec](https://www.w3.org/TR/html5/dom.html#htmlunknownelement), it says: _"The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification (or other applicable specifications)."_ Which to me says that it's perfectly valid to use whatever elements you like in your source, it will just treat them as an "unknown element". I guess the w3 custom elements spec is making it so you can turn those unknown elements into "known elements" in some fashion. – James Thorpe Jan 27 '16 at 12:13

1 Answers1

2

You don't need to do anything special for modern browsers and IE9+.

For IE6 - IE8 support you do need to be aware of this and use a wee bit of magic. As the relevant documentation mentions:

  • HTML5-era browsers, which includes Internet Explorer 9 and later, automatically allow for custom elements with no difficulties.
  • Internet Explorer 6 to 8 also supports custom elements, but only if they are registered before the HTML parser encounters any of those elements.

IE 6-8’s HTML parser will discard any unrecognized elements. To ensure it doesn’t throw out your custom elements, you must do one of the following:

  • Ensure you call ko.components.register('your-component') before the HTML parser sees any <your-component> elements
  • Or, at least call document.createElement('your-component') before the HTML parser sees any <your-component> elements. You can ignore the result of the createElement call — all that matters is that you have called it.
Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • haha... can't believe I didn't scroll down that page when I looked earlier! Was too distracted by HTML specs :) – James Thorpe Jan 27 '16 at 12:53
  • In my *past* experience, KO was pretty great at supporting them legacy IE versions (restecpa!). However, I'm glad I currently have to support only IE10+ >:D. – Jeroen Jan 27 '16 at 12:57
  • Yeah when we introduced it into our main product, we were still having to run in compatibility mode in IE, knockout didn't skip a beat – James Thorpe Jan 27 '16 at 12:58
  • Oh, and I missed the very last part of that snippet where they actually do refer to document.createElement and thus show that they are aware of that stuff. Question answered, but if would be interesting to know if there are cases where it even in modern browsers would be relevant to register the custom elements. Or is the registration solely about preventing old browsers from discarding unkown elements? – Alex Jan 27 '16 at 13:16
  • @Alex Solely for old browsers AFAIK. – Jeroen Jan 27 '16 at 13:27