From 3e5377f4f3b1d0f06af50e21026835bee0556b4a Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Fri, 9 Mar 2012 15:12:48 -0800 Subject: doc(fixes): to better support ng-directive notation --- docs/content/guide/ie.ngdoc | 162 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 docs/content/guide/ie.ngdoc (limited to 'docs/content/guide') diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc new file mode 100644 index 00000000..3ba93d2d --- /dev/null +++ b/docs/content/guide/ie.ngdoc @@ -0,0 +1,162 @@ +@ngdoc overview +@name Developer Guide: Internet Explorer Compatibility +@description + +# Overview + +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. + +# Short Version + +To make your angular application work on IE please make sure that: + + 1. you **do not** use custom element tags such as `` (use the attribute version `
` instead), or + + 2. if you **do use** custom element tags, then you must take these steps to make IE happy: + +
+  
+    
+      
+    
+    
+      ...
+    
+  
+
+ +The **important** parts are: + + * `xmlns:ng` - *namespace* - you need one namespace for each custom tay 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 an 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 than 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 have 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): + +
+  
+    
+      some text
+    
+  
+
+ +It should pares 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 delimitate the structure of the DOM. + + +## CSS Styling of Custom Tag Names + +The to make CSS selector work with custom elements the custom element name must be shived with the +`document.createElement('my-tag')` regardless of XML namespace. + +
+  
+    
+      
+      
+    
+    
+      
+      
+      ...
+    
+  
+
+ + + -- cgit v1.2.3