Issue metadata
Sign in to add a comment
|
<iframe> Doesn’t Load When Appended to Shadow Root in XHTML Document
Reported by
h...@hughguiney.com,
Mar 11 2017
|
||||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Steps to reproduce the problem:
1. Create index.html. Serve as application/xhtml+xml
<html>
<!DOCTYPE html>
<head>
<!-- ... -->
<link rel="import" href="x-custom-element.html" />
</head>
<body>
<h1>Host Document</h1>
<x-custom-element></x-custom-element>
</body>
</html>
2. Create iframe.html
<html>
<!DOCTYPE html>
<head></head>
<body>
<h1>Iframe Document</h1>
</body>
</html>
3. Create x-custom-element.html (Web Components v1 Custom Element with ES6 Class) and load iframe
<html>
<template>
<div id="iframe-wrapper"></div>
</template>
<script>
class XCustomElement extends HTMLElement {
constructor() {
super();
const $shadowRoot = this.attachShadow({mode: 'open'});
const $CustomElement = ownerDocument.querySelector( '#template' );
const $shadowContent = $CustomElement.content.cloneNode( true );
$shadowRoot.appendChild( $shadowContent );
} // constructor
connectedCallback() {
this.shadowRoot.querySelector( '#iframe-wrapper' ).innerHTML = '<iframe width="200" height="200" src="iframe.html"></iframe>';
}
}
window.customElements.define( 'x-custom-element', XCustomElement );
</script>
</html>
What is the expected behavior?
Iframe loads
What went wrong?
Iframe does not load. However, if host document is served as text/html, then the iframe does load.
Did this work before? N/A
Chrome version: 56.0.2924.87 Channel: n/a
OS Version: OS X 10.12.3
Flash Version: Shockwave Flash 24.0 r0
,
Mar 13 2017
Just realized I'm missing a few lines in the reproduction on Step 3:
```
<script>
+ (function () {
+ "use strict";
+
+ var ownerDocument = document.currentScript.ownerDocument;
class XCustomElement extends HTMLElement {
// ...
}
window.customElements.define( 'x-custom-element', XCustomElement );
+ })();
</script>
```
,
Mar 14 2017
,
Mar 14 2017
Unable to reproduce the issue in MacBook Pro (Retina, 15-inch, Mid 2014) 10.12.3 by using chrome reported version #56.0.2924.87 and latest canary #59.0.3039.0. Steps followed to reproduce the issue are as follows: ----------- 1. Created 3 html files as provided in comment#0 and comment #2 and saved all the files in a folder. 2. loaded the iframe.html file. 3. Observed that the iframe loaded as expected. Attaching screen cast for reference. Reporter@ - Could you please check the screencast and please let us know if anything missed from our side. Thanks...!!
,
Mar 14 2017
Not sure I completely followed your reproduction steps in that screencast. It looked like issue2 .html was blank? And then I did not see the Iframe Document (issue1.html) load within the Host Document (issue.html). An inability to reproduce should display both <h1>s on the same page. You will probably also want to serve these documents from a web server with an explicit Content-Type header of application/xhtml+xml for at least index.html. Accessing it via a file:// URI, I presume it will default to text/html unless you’re coercing the MIME some other way. I have recorded my own screencast for comparison, attached. The screencast shows Chrome stable but I tried Canary as well with the same result, @ 59.0.3041.0 (Official Build) canary (64-bit). I don’t suspect this is a factor, but for further reference, I am on a MacBook Pro (Retina, 13-inch, Early 2015). N.B. Upon recording the screencast, I noticed further corrections needed to the original reproduction steps: 1. I omitted the XML declaration from index.html, and 2. I misplaced or omitted the DOCTYPE declarations across the three files; they should come before the starting <html> obviously, not after. I filed this bug on very little sleep so I apologize for the discrepancies. However, in my testing of both omitting and including both the XML declaration and the DOCTYPEs, I found them to not affect the outcome either way.
,
Mar 14 2017
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Mar 15 2017
,
Mar 22 2017
,
Apr 4 2017
This is because HTML parser for the innerHTML call doesn't use xhtml namespace. Adding a xmlns attribute to <iframe> fixes the issue: - this.shadowRoot.querySelector( '#iframe-wrapper' ).innerHTML = '<iframe width="200" height="200" src="iframe.html"></iframe>'; + this.shadowRoot.querySelector( '#iframe-wrapper' ).innerHTML = '<iframe xmlns="http://www.w3.org/1999/xhtml" width="200" height="200" src="iframe.html"></iframe>'; I'm not sure if this is expected behavior or not. cc:dominicc since it seems to be somewhat related to Issue 312320 or Issue 676246 .
,
Apr 6 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 9 2018
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by kojii@chromium.org
, Mar 13 2017