Embed Size (px)
Citation preview
Developer GuideDeveloper Guide // ieie
This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML attributes and tags.Read this document if you are planning on deploying your Angular application on IE v8.0 or earlier.
To make your Angular application work on IE please make sure that:
You polyfill JSON.stringify if necessary (IE7 will need this). You can use JSON2 or JSON3 polyfills for this.1.
you do not use custom element tags such as <ng:view> (use the attribute version <div ng-view> instead), or2.
if you do use custom element tags, then you must take these steps to make IE happy:3.
<html<html xmlns:ngxmlns:ng=="http://angularjs.org""http://angularjs.org">>1.
<head><head>2.
<!--[if lte IE 8]><!--[if lte IE 8]>3.
<script> <script>4.
document.createElement('ng-include'); document.createElement('ng-include');5.
document.createElement('ng-pluralize'); document.createElement('ng-pluralize');6.
document.createElement('ng-view'); document.createElement('ng-view');7.
8.
// Optionally these for CSS // Optionally these for CSS9.
document.createElement('ng:include'); document.createElement('ng:include');10.
document.createElement('ng:pluralize'); document.createElement('ng:pluralize');11.
document.createElement('ng:view'); document.createElement('ng:view');12.
</script> </script>13.
<![endif]--> <![endif]-->14.
</head></head>15.
<body><body>16.
... ...17.
</body></body>18.
</html></html>19.
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 inHTML you need to pre-declare it to make IE happy.
IE has issues with element tag names which are not standard HTML tag names. These fall into two categories, and eachcategory has its own fix.
If the tag name starts with my: prefix than it is considered an XML namespace and must have corresponding
namespace declaration on <html xmlns:my="ignored">
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 usingdocument.createElement('my-tag') regardless of XML namespace.
The Good NewsThe good news is that these restrictions only apply to element tag names, and not to element attribute names. So thisrequires no special handling in IE: <div my-tag your:tag> </div>.
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><html>1.
<body><body>2.
<mytag><mytag>some textsome text</mytag></mytag>3.
</body></body>4.
</html></html>5.
It should parse into the following DOM:
#document#document1.
+-+- HTML HTML2.
+-+- BODY BODY3.
+-+- mytag mytag4.
+-+- #text: some text#text: some text5.
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#document1.
+-+- HTML HTML2.
+-+- BODY BODY3.
+-+- mytag mytag4.
+-+- #text: some text#text: some text5.
+-+- //mytagmytag6.
In IE, the behavior is that the BODY element has three children:
A self closing mytag. Example of self closing tag is <br/>. The trailing / is optional, but the <br> tag is not allowed
to have any children, and browsers consider <br>some text</br> as three siblings not a <br> with some text as
child.
1.
A text node with some text. This should have been a child of mytag above, not a sibling.2.
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 theDOM.
3.
CSS Styling of Custom Tag NamesTo make CSS selectors work with custom elements, the custom element name must be pre-created withdocument.createElement('my-tag') regardless of XML namespace.
<html<html xmlns:ngxmlns:ng=="needed for ng: namespace""needed for ng: namespace">>1.
<head><head>2.
<!--[if lte IE 8]><!--[if lte IE 8]>3.
<script> <script>4.
// needed to make ng-include parse properly // needed to make ng-include parse properly5.
document.createElement('ng-include'); document.createElement('ng-include');6.
7.
// needed to enable CSS reference // needed to enable CSS reference8.
document.createElement('ng:view'); document.createElement('ng:view');9.
</script> </script>10.
<![endif]--> <![endif]-->11.
<style><style>12.
ng\\ ng\\::view view {{13.
display display:: block block;;14.
border border:: 1px1px solid red solid red;;15.
}}16.
17.
ng ng--include include {{18.
display display:: block block;;19.
border border:: 1px1px solid blue solid blue;;20.
}}21.
</style></style>22.
</head></head>23.
<body><body>24.
<ng:view></ng:view><ng:view></ng:view>25.
<ng-include></ng-include><ng-include></ng-include>26.
... ...27.
</body></body>28.
</html></html>29.
![[MS-INDEXDB]: Microsoft Edge / Internet Explorer Indexed ... · Windows Internet Explorer 10 Internet Explorer 11 Internet Explorer 11 for Windows 10 Microsoft Edge Each browser version](https://img.pdfslide.net/doc/110x75/5f6247bba7b60d5e1c2cdd91/ms-indexdb-microsoft-edge-internet-explorer-indexed-windows-internet-explorer.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer …MS-HTML5].pdfMicrosoft Edge / Internet Explorer HTML5 ... Microsoft Edge / Internet Explorer HTML5 ... Microsoft Edge / Internet Explorer](https://img.pdfslide.net/doc/110x75/5ad35ecf7f8b9aff738de6d3/ms-html5-microsoft-edge-internet-explorer-ms-html5pdfmicrosoft-edge-.jpg)
