Fazendo o AngularJS funcionar bem com tags personalizadas no IE8

Qualquer um que tente fazer um aplicativo AngularJS funcionar no IE8 ficará / terá ficado frustrado com as lindas idéias do IE8 sobre como renderizar tags fora do padrão. por exemplo, <section>torna-se <:section>ou torna <badger>Hello</badger>se <badger/>Hello<badger/>ou algum outro embaralhamento útil.

O conselho dado no site AngularJS é usar de document.createElement('badger')forma que o IE ‘aprenda’ o novo elemento, mas isso só funciona para tags não dinâmicas (ou seja, aquelas que existem no DOM mesmo antes de o Angular ser executado), não aquelas adicionadas pelos modelos Angular ou outros métodos dinâmicos.

A solução que descobri é baixar uma versão do jQuery que suporte IE8 (ou seja, 1.xx) e modificar a lista interna de tags suportadas para incluir as novas dinâmicas. A linha que você está procurando parece

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

então você apenas adiciona suas tags personalizadas no final e pronto.

Observação importante Você ainda precisa usar document.createElementpara tags que não são adicionadas dinamicamente. Isso me surpreendeu por um tempo.