Side navigation
#10427 closed bug (invalid)
Opened October 05, 2011 02:16PM UTC
Closed January 02, 2012 05:25PM UTC
Last modified January 30, 2012 03:10PM UTC
Creating custom elements is broken on IE7 and 8 using $('<...>').
| Reported by: | bmustiata | Owned by: | rwaldron |
|---|---|---|---|
| Priority: | undecided | Milestone: | |
| Component: | manipulation | Version: | 1.7b1 |
| Keywords: | 1.8-discuss | Cc: | |
| Blocked by: | Blocking: |
Description
Fiddle test case: http://jsfiddle.net/nmfCy/1/
Proposed Patch: http://download.androidknight.com/jquery-custom-elements-1.6.4.patch
Full-Original: http://download.androidknight.com/jquery-1.6.4-original.js
Full-Patched : http://download.androidknight.com/jquery-1.6.4-patched.js
Description.
The expected nodes to be added is:
<customelement>
However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set:
<customelement>
and
</customelement> (!!) - yes, with the beginning slash character as tagName,
and all the content that should belong in the <customelement> is now a sibling living between the two elements.
This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: http://jsfiddle.net/nmfCy/2/).
To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them.
However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it.
The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method).
The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1.
Attachments (0)
Change History (20)
Changed October 05, 2011 02:41PM UTC by comment:1
| resolution: | → duplicate |
|---|---|
| status: | new → closed |
Changed October 06, 2011 09:14AM UTC by comment:3
If I may, I think this issue should be reopened to really support unknown elements for IE7/8. The problem is that the current implementation has ''a list of unknown'' elements.
This causes in my view (at least) two problems:
1. If tomorrow html5 decide to add a new element, old versions of the applications that use the current jQuery version will suddenly stop working until they upgrade their jQuery, and for any new element this list must be upgraded.
2. This approach also doesn't allow custom elements to be created that are not (and will never be) part of HTML5. We are actually using this in an application, where we create custom rendered metadata nodes on the fly (we receive them via AJAX). Elements are things like <loop>, <metatarget>, etc.
I am currently working on a fork where I try to allow creation of completely unknown elements, because currently (in the 1.7 beta):
jQuery('<customelement>some content</customelement>');
has a different outcome in IE8 than in IE9 (or any other decent browser).
I hope you find these requirements acceptable for reopening this. (since HTML5 support is implemented, and only custom elements are not working).
Changed October 06, 2011 01:08PM UTC by comment:4
| component: | unfiled → manipulation |
|---|---|
| keywords: | → 1.8-discuss |
| milestone: | None → 1.8 |
| resolution: | duplicate |
| status: | closed → reopened |
Changed October 06, 2011 01:08PM UTC by comment:5
| version: | 1.6.4 → 1.7b1 |
|---|
Changed October 06, 2011 01:13PM UTC by comment:6
Reopening for inclusion in 1.8 features discussion - it's too late and this feature is too different than HTML5 support for this to be included in 1.7.
Changed October 07, 2011 12:26AM UTC by comment:7
| status: | reopened → open |
|---|
Marking as valid to get it out of the unreviewed bugs list. IMO we should only support heroic measures for HTML5 tags, as we do now in 1.7.
Changed October 07, 2011 01:20AM UTC by comment:8
@dmethvin I'm not sure it behooves us to try to support all magic.
Changed October 07, 2011 01:31AM UTC by comment:9
what if the list of shiv'd elements had a fixHooks-esque accessible list for users to add more elements beyond the HTML5 set, but sparing us the possibility of shving on the fly?
Changed October 07, 2011 01:58AM UTC by comment:10
Based on @ajpiano's idea https://github.com/rwldrn/jquery/pull/new/10427
Changed October 07, 2011 02:04AM UTC by comment:11
just kidding. that won't work. back to the drawing board.
Changed October 07, 2011 09:14AM UTC by comment:12
@ajpiano: Should be fine with adding them via hooks.
Thus based on @ajpiano's and @rwaldron's idea: https://github.com/jquery/jquery/pull/533
Changed October 07, 2011 01:31PM UTC by comment:13
| owner: | → rwaldron |
|---|---|
| status: | open → assigned |
Changed December 13, 2011 04:18PM UTC by comment:14
| description: | '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/] \ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch \ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js] \ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js] \ \ '''Description'''. \ The expected nodes to be added is: \ <customelement> \ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set: \ <customelement> \ and \ </customelement> (!!) - yes, with the beginning slash character as tagName, \ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements. \ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]). \ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them. \ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it. \ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method). \ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. → '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/]\ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch\ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js]\ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js]\ \ '''Description'''.\ The expected nodes to be added is:\ <customelement>\ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set:\ <customelement>\ and\ </customelement> (!!) - yes, with the beginning slash character as tagName,\ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements.\ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]).\ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them.\ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it.\ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method).\ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. |
|---|
+0
Changed December 13, 2011 06:17PM UTC by comment:15
| description: | '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/]\ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch\ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js]\ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js]\ \ '''Description'''.\ The expected nodes to be added is:\ <customelement>\ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set:\ <customelement>\ and\ </customelement> (!!) - yes, with the beginning slash character as tagName,\ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements.\ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]).\ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them.\ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it.\ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method).\ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. → '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/] \ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch \ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js] \ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js] \ \ '''Description'''. \ The expected nodes to be added is: \ <customelement> \ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set: \ <customelement> \ and \ </customelement> (!!) - yes, with the beginning slash character as tagName, \ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements. \ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]). \ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them. \ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it. \ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method). \ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. |
|---|
-1, HTML5 defines the tags we need to support. Adding custom tags smells like an ad-hoc attempt at parsing arbitrary XML using IE's tag-soup parser. Use a supported format like JSON instead.
Changed December 14, 2011 01:26AM UTC by comment:16
| description: | '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/] \ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch \ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js] \ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js] \ \ '''Description'''. \ The expected nodes to be added is: \ <customelement> \ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set: \ <customelement> \ and \ </customelement> (!!) - yes, with the beginning slash character as tagName, \ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements. \ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]). \ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them. \ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it. \ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method). \ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. → '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/]\ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch\ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js]\ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js]\ \ '''Description'''.\ The expected nodes to be added is:\ <customelement>\ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set:\ <customelement>\ and\ </customelement> (!!) - yes, with the beginning slash character as tagName,\ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements.\ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]).\ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them.\ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it.\ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method).\ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. |
|---|
+0, I'll punt to rwaldron on this one.
Changed December 14, 2011 04:08PM UTC by comment:17
-1, I'd rather follow spec
Changed December 19, 2011 05:32PM UTC by comment:18
| description: | '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/]\ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch\ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js]\ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js]\ \ '''Description'''.\ The expected nodes to be added is:\ <customelement>\ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set:\ <customelement>\ and\ </customelement> (!!) - yes, with the beginning slash character as tagName,\ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements.\ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]).\ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them.\ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it.\ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method).\ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. → '''Fiddle test case''': [http://jsfiddle.net/nmfCy/1/] \ \ '''Proposed Patch''': http://download.androidknight.com/jquery-custom-elements-1.6.4.patch \ \ '''Full-Original''': [http://download.androidknight.com/jquery-1.6.4-original.js] \ \ '''Full-Patched''' : [http://download.androidknight.com/jquery-1.6.4-patched.js] \ \ '''Description'''. \ The expected nodes to be added is: \ <customelement> \ \ However in IE7/8 (IE9 works fine) two elements get created after innerHtml is set: \ <customelement> \ and \ </customelement> (!!) - yes, with the beginning slash character as tagName, \ \ and all the content that should belong in the <customelement> is now a sibling living between the two elements. \ \ This needs to work, since the HTML5 elements do match the criteria of unknown elements, and creating them programatically now breaks the DOM structure in IE7/8 (same example but with a canvas element instead: [http://jsfiddle.net/nmfCy/2/]). \ \ To make matters worse the added elements (via innerHtml) are unknown html elements, that do not allow creating child elements into them. \ \ However, if we create the same element with document.createElement('customelement') and we append this one to the DOM, we can add children elements into it. \ \ The given patch adds the check for custom elements support, and if it does not exists, it then attempts to find and fix the eventually broken newly created custom elements (in the clean method). \ \ The patch was tested against IE7, IE8, IE9, Chrome 14.0 and Firefox 7.0.1. |
|---|
+0, I want to revisit this and all the test cases involved.
Changed January 02, 2012 05:25PM UTC by comment:19
| resolution: | → invalid |
|---|---|
| status: | assigned → closed |
This is no longer valid. The latest version of html5shim actually builds support into document.createElement directly.
Changed January 30, 2012 03:10PM UTC by comment:20
| milestone: | 1.8 |
|---|
Thanks for your time and interest in helping out the jQuery project - you're right that this is a big issue, and a high priority one for us to solve. However, we already did that, and it's already available in the jQuery 1.7 beta. Given your interest in this issue, we'd appreciate your taking that for a spin. Thanks!