Getting AngularJS to play nicely with custom tags in IE8

Anyone trying to get an AngularJS app working in IE8 will be/have been frustrated by IE8's lovely ideas about how to render non-standard tags. e.g. <section> becomes <:section> or <badger>Hello</badger> becomes <badger/>Hello<badger/> or some other helpful scrambling.

The advice given on the AngularJS site is to use document.createElement('badger') so that IE 'learns' the new element, but this only works for non-dynamic tags (i.e. those which exist in the DOM even before Angular has run), not those added by Angular templates or other dynamic methods.

The solution I landed on is to download a version of jQuery which supports IE8 (i.e. 1.x.x) and modify the internal list of supported tags to include your new dynamic ones. The line you're after looks like

var nodeNames = "abbr|article|aside|audio|bdi|canvas...

so you just add your custom tags on the end and you're done.

Important note You still need to use document.createElement for tags which aren't added dynamically. This caught me out for a while.