Comments (15)
It should've been fixed with 1.14.2
... thanks gosh it was deadly simple to patch
from document-register-element.
Can your describe the problem and how you addressed it?
Problem if you overwrite a host object method within an iframe, when such iframe reloads such method won't be the inherited one, but undefined instead (the shadowed override won't persist).
Minimal steps to reproduce in IE11 using this file as iframe content:
<!DOCTYPE html>
<script>
console.log(document.createElement);
document.createElement = function () {};
setTimeout(function () { location.reload(true); }, 5000);
</script>
Solution deleting the prototypal inherited shadowed method right before the possible iframe refresh/reload fixes the issue.
<!DOCTYPE html>
<script>
console.log(document.createElement);
document.createElement = function () {};
setTimeout(function () { location.reload(true); }, 5000);
addEventListener('beforeunload', function () { delete document.createElement; }, false);
</script>
I assume this can be relevant for alot of polyfill code.
They don't talk to me, not sure I should talk to them.
Maybe as a section "polyfilling caveats with IE11 and iframes" in your readme.md?
Not really, as there's no caveat, since the poly provides a solution already, so there's nothing to be worried about.
Or as a separate blog post?
I've already twitted about it, there's not much to add, IMO (and if they don't follow me, they won't read my blog post neither).
Because of your follow up, I am assuming you are also confirming the issue has been solved though, so thanks for coming back.
from document-register-element.
OK, I've double checked this time, and everything seems to be fine.
Please let me know if that's not the case.
If you are curious about what's the difference now, basically I delete also document.importNode
and document.registerElement
so that next frame reload won't have any sort of issue.
from document-register-element.
Thanks alot for your lightning fast reaction times. I can confirm that both in the MVCE as well as in our application the error does no longer occur.
Good job!
from document-register-element.
can you please try with fully qualified CDN name as in https://unpkg.com/[email protected]/build/document-register-element.js
? it looks like unpkg is having issues, with any browser
from document-register-element.
Done. Problem remains the same. Is also the same on our real product where we import the script from node_modules
and run it through webpack.
from document-register-element.
I can reproduce, yes. This is super messed up ... apparently IE loses its core definitions on iframe reloads, I've no idea if I can even fix this, but I'll try when I'll have time.
from document-register-element.
Not sure, but could this be related? https://javascript.info/cross-window-communication#iframe-wrong-document-pitfall
from document-register-element.
no, it's the usual IE11 BS; try this code in the iframe and read undefined
after 5 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
console.log(document.createElement);
document.createElement = function () {};
setTimeout(function () { location.reload(true); }, 5000);
</script>
</body>
</html>
from document-register-element.
Will give it a ride in the office tomorrow and let you know how it went. Thanks for caring!
from document-register-element.
Can your describe the problem and how you addressed it? I assume this can be relevant for alot of polyfill code. Maybe as a section "polyfilling caveats with IE11 and iframes" in your readme.md? Or as a separate blog post?
from document-register-element.
Unfortunately your fix only solves the issue for the first refresh.
Immediately refresh again, and document.createElement
again is undefined
.
Additionally it throws an Object expected
error in the console:
I updated the demonstration repository accordingly so you can reproduce it easily.
Do you think this could and should be raised as bug report with Microsoft?
from document-register-element.
This is not what I am experiencing. This is the exact code, used as iframe of your repo example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
console.log(document.createElement);
document.createElement = function () {};
setTimeout(function () { location.reload(true); }, 5000);
addEventListener('beforeunload', function () { delete document.createElement; }, false);
</script>
</body>
</html>
from document-register-element.
Your example does not involve your polyfill. If I had to guess I'd go with your polyfill probably not being executed due to the necessity checks on iframe refresh, and thus, the event listener for beforeunload
not being added? Did you even check with my repository code, respectively with your polyfill?
from document-register-element.
I thought you had those issues with the minimal reproducible code I've provided, while you meant the poly fails, and I've probably tested too quickly and hoorrayed too soon.
Will have a look later on today, the fix will be the same regardless, but the listener added at the beginning of each check, instead of at the end, dropping all patches in there (I thought it was just one, maybe it's more).
from document-register-element.
Related Issues (20)
- LifeCycle events order of nested custom elements inconsistent across Chrome and Firefox HOT 18
- Built-in elements don't work in Firefox HOT 6
- TypeError: new.target does not define a custom element HOT 3
- document.registerElement is deprecated and will be removed in M73 HOT 3
- Post-install script slowness HOT 3
- appreciate your feedback for custom element diagram HOT 8
- [Uncaught DOMException: Failed to execute 'registerElement' on 'Document'] when used in Chrome Extension HOT 16
- Functions are not evaluated in connectedCallback HOT 1
- `this` reference in contructor broken HOT 14
- Multiple instances of the polyfill leads to unexpected behaviour HOT 1
- error ""Failed to construct 'HTMLElement': Please use the 'new' operator"" when using with Angular/elements 8.2.0 HOT 2
- `attributeChangedCallback()` bound value is invalid HOT 15
- Add DRE to Polyfill.io service HOT 1
- [QUESTION] Unable to get property '_isMounted' of undefiened. HOT 1
- TypeError - Object doesn't support property or method 'registerElement' HOT 3
- Time to compare again? (webcompents/custom-elements) HOT 2
- Polyfill does not seem to be working in IE 11 HOT 6
- postinstall fails in noexec enviornment HOT 1
- We unable to install latest version @1.14.7 HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from document-register-element.