` instead), or 4. if you **do use** custom element tags, then you must take these steps to make IE 8 and below happy: ```html ... ``` 5. Use `ng-style` tags instead of `style="{{ someCss }}"`. The later works in Chrome and Firefox but does not work in Internet Explorer <= 11 (the most recent version at time of writing). The **important** parts are: * `xmlns:ng` - *namespace* - you need one namespace for each custom tag you are planning on using. * `document.createElement(yourTagName)` - *creation of custom tag names* - Since this is an issue only for older version of IE you need to load it conditionally. For each tag which does not have namespace and which is not defined in HTML you need to pre-declare it to make IE happy. # Long Version IE has issues with element tag names which are not standard HTML tag names. These fall into two categories, and each category has its own fix. * If the tag name starts with `my:` prefix then it is considered an XML namespace and must have corresponding namespace declaration on `` * If the tag has no `:` but it is not a standard HTML tag, then it must be pre-created using `document.createElement('my-tag')` * If you are planning on styling the custom tag with CSS selectors, then it must be pre-created using `document.createElement('my-tag')` regardless of XML namespace. ## The Good News The good news is that these restrictions only apply to element tag names, and not to element attribute names. So this requires no special handling in IE: `

`. ## What happens if I fail to do this? Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same result): ```html some text ``` It should parse into the following DOM: ``` #document +- HTML +- BODY +- mytag +- #text: some text ``` The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has the text `some text`. But this is not what IE does (if the above fixes are not included): ``` #document +- HTML +- BODY +- mytag +- #text: some text +- /mytag ``` In IE, the behavior is that the `BODY` element has three children: 1. A self closing `mytag`. Example of self closing tag is `
`. The trailing `/` is optional, but the `
` tag is not allowed to have any children, and browsers consider `
some text
` as three siblings not a `
` with `some text` as child. 2. A text node with `some text`. This should have been a child of `mytag` above, not a sibling. 3. A corrupt self closing `/mytag`. This is corrupt since element names are not allowed to have the `/` character. Furthermore this closing element should not be part of the DOM since it is only used to delineate the structure of the DOM. ## CSS Styling of Custom Tag Names To make CSS selectors work with custom elements, the custom element name must be pre-created with `document.createElement('my-tag')` regardless of XML namespace. ```html ... ```