-
Notifications
You must be signed in to change notification settings - Fork 165
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ShadyDOM] Polymer 2 components not inspectable in IE11 #67
Comments
This looks like a ShadyDOM issue, as I can replicate this behavior without Polymer: http://jsbin.com/pukohuj/edit?html,output FWIW, windows 10's version of IE11 is also pretty busted, with the inspected element being shown above |
Also reproduceable in iOS 10.3 |
Also affects IE11 on Windows 10. |
This makes debugging IE11 specific issues quite hard, but not impossible. I noticed that when you try to inspect an element, you do see and have access to editing the CSS rules for the selected element in the Styles panel even though you can't see it in the DOM Explorer panel. Also you can actually see the DOM structure by selecting an element in the Console. After inspecting you can just run Or you could run something like: |
@Haprog How did you inspect an element to see the CSS rules? When I'm inspecting an element, the Dev Tools show me only the This makes Polymer 2 pretty unusable right now if one needs to support IE11 :( |
@ronnyroeller You can’t, as far as I can tell. However, once you have an element selected in the console the way @Haprog describes, you can change styling imperatively using e.g. |
Fighting with this as well, cannot inspect anything in my project using IE11, even when enforcing all polyfills and shadydom. Surprisingly enough, I seem to be able to inspect the page under https://www.polymer-project.org/ Anyone knows why this is possible? |
@rednil it is because of the fact that initial markup passed from the server can be inspected. You can observe this effect on the Polymer Hacker News client demo. |
I have a temporary workaround which should work in some scenarios. Short story: to workaround this for now you can use a dirty solution - to patch locally webcomponents polyfill to disable overrides of getters for children/childNodes/etc... on Node/Element/etc... prototypes For example I removed this code from minified file ( Which is basically this function body https://github.com/webcomponents/shadydom/blob/2e4b73247a2bf413148acb2970f2a0dea886c837/src/patch-accessors.js#L415-L425 No guarantees though that the code will behave exactly the same. Most likely you will have issues accessing light DOM. And it should be only used for temporary debugging purposes. |
Long story I suppose that IE11 elements inspector uses In the old version of the polyfill (0.x.x, and Polymer 1 based on it) you could not use native getters on your custom elements and were forced to use Good news is that this is not an indication that smth is broken in IE11. I wonder how other browsers do not run into the same issue in their inspectors. Maybe they force applying native getters implementations (imagine cached getter method applied like this Of course by just not overriding getters temporarily while debugging we can not solve this problem, because this will break the code accessing light DOM, because it will always return the composed tree rather than actual light DOM. Good news is that if you use hybrid approach and still have |
I am working with webcomponents v0.7.24 (along with Polymer 1.x which uses shady DOM mode by default) in IE11 in Win10. And I ran into same problem. And I have found really simple workaround: I just close and reopen DevTools. After that I see complete DOM tree in DOM Explorer and Select element tool works just fine. |
Is this ever going to be fixed? A development only option would be fine. |
I think we could probably take something like @bashmish's approach and integrate it into ShadyDOM as a global option. To inspect an element you'd probably have to set the option in the console, or via a bookmarklet, inspect, then reset the option to resume normal ShadyDOM operation. |
@azakus this has been closed by accident as a result of merging HTML imports polyfill. |
From @jehna on March 22, 2017 12:50
Description
Polymer 2 objects cannot be inspected with IE11's developer tools.
Live Demo
http://run.plnkr.co/plunks/U3hRP96zlpVhN4aH8E5e/
Steps to Reproduce
Expected Results
The developer tools' Dom Explorer tool should show a
div
element that has the string "This is not inspectable on IE11" text node in it.Actual Results
The Dom Explorer tool highlights the string
<!DOCTYPE html>
and there is nothing inside the<polymer-test-app>
tag in the Dom Explorer.Browsers Affected
Versions
Source code for the sample
You can see the source code for the plnkr here:
https://github.com/jehna/polymer-ie11-dom-explorer-bug
Copied from original issue: Polymer/polymer#4452
The text was updated successfully, but these errors were encountered: