Skip to content
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

Closed
2 of 8 tasks
dfreedm opened this issue Mar 23, 2017 · 15 comments
Closed
2 of 8 tasks

[ShadyDOM] Polymer 2 components not inspectable in IE11 #67

dfreedm opened this issue Mar 23, 2017 · 15 comments

Comments

@dfreedm
Copy link
Contributor

dfreedm commented Mar 23, 2017

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

  1. Open the plnkr link in IE11
  2. Open Developer tools by pressing F12
  3. Press "Select Element" button (ctrl+b)
  4. Click "This is not inspectable on IE11"

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.

screen shot 2017-03-22 at 14 44 54

Browsers Affected

  • Chrome
  • Firefox
  • Edge
  • Safari 9
  • Safari 8
  • IE 11 Windows 7
  • IE 11 Windows 8.1
  • IE 11 Windows 10

Versions

  • Polymer: 2.0.0-rc.2
  • webcomponents: v1.0.0-rc.5

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

@dfreedm
Copy link
Contributor Author

dfreedm commented Mar 23, 2017

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 <html>

@jehna
Copy link

jehna commented Apr 4, 2017

Also reproduceable in iOS 10.3

@Haprog
Copy link

Haprog commented Apr 21, 2017

Also affects IE11 on Windows 10.

@Haprog
Copy link

Haprog commented Apr 21, 2017

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 $0 to get the selected element, or you can use any standard DOM methods for getting a reference to another element relative to it (like $0.parentNode, $0.previousSibling, etc.). Then you see the DOM of the element in the console and you can even expand it to see its children. And then you can even right click any element that you see in Console and select "Show in DOM Explorer" to be able to see and edit its CSS rules (even for elements that you cant directly select by inspecting.

Or you could run something like: document.querySelector('my-app').shadowRoot.children[5] or document.querySelector('my-app').shadowRoot.querySelector('p') to get to a specific element and browse it's Light DOM children.

@ronnyroeller
Copy link

@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 <html> element with no way of seeing the sub elements.

This makes Polymer 2 pretty unusable right now if one needs to support IE11 :(

@HughxDev
Copy link

HughxDev commented Jul 7, 2017

@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. element.style.paddingTop = '15px'. Agreed though that this is a pretty major issue.

@rednil
Copy link

rednil commented Oct 10, 2017

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?

@web-padawan
Copy link
Contributor

@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.

@bashmish
Copy link

bashmish commented Feb 9, 2018

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

https://github.com/webcomponents/shadydom/blob/2e4b73247a2bf413148acb2970f2a0dea886c837/src/patch-accessors.js#L177-L369

https://github.com/webcomponents/shadydom/blob/006b3d651acf0df1d04e5442a89c55dcd70e94ea/src/patch-builtins.js#L300-L308

For example I removed this code from minified file (webcomponents-lite.js 1.1.0):

image

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.

@bashmish
Copy link

bashmish commented Feb 9, 2018

Long story

I suppose that IE11 elements inspector uses childNodes/children getters under the hood. Overridden ones return empty arrays which sort of makes sense if you have a shadowRoot only and your light DOM is empty. This behavior is according to the ShadowDOM spec, so in Polymer 2 you can use more native methods instead of Polymer.dom wrappers to access different DOM subtrees. For elements containing light DOM and shadow DOM you will still see light DOM for one top-level element in IE11 inspector, because overridden getters will return light DOM that is again according to the spec. But normally you don't have light DOM in your <my-cool-app></my-cool-app>, that's why you see nothing inside at all.

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 Polymer.dom wrappers. But inspector in IE11 worked perfectly. So #usetheplatform here kinda broke IE11 inspector.

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 Node.prototype.__lookupGetter__('childNodes').apply(myElem)). To be honest I didn't investigate which getter exactly is used in IE11 inspector, but one or a few of them for sure.

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 Polymer.dom wrappers, this should be solvable by patching wrappers. In Polymer 2 they are currently proxied to native methods, but for debugging purposes we can revert this logic to Polymer 1. For purely Polymer 2 elements I don't see how this can be fixed without the huge impact on your codebase.

@victor-yarema
Copy link

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.
When I load page with DevTools opened then I can see only part of DOM tree that came as page response from the server. I can't see any items that Polymer adds dynamically afterwards.
Select element tool just select outer wrapper that it can find in DOM Explorer.

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.

@LarsDenBakker
Copy link

Is this ever going to be fixed? A development only option would be fine.

@justinfagnani
Copy link
Collaborator

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.

@web-padawan
Copy link
Contributor

@sorvell @azakus any chance to land this workaround? We are still struggling with the debugging in IE11 due to broken dev tools. We have to use alert as sometimes console even doesn't open.

@dfreedm dfreedm transferred this issue from webcomponents/shadydom Jun 7, 2019
@dfreedm dfreedm changed the title Polymer 2 components not inspectable in IE11 [ShadyDOM] Polymer 2 components not inspectable in IE11 Jun 12, 2019
@web-padawan
Copy link
Contributor

@azakus this has been closed by accident as a result of merging HTML imports polyfill.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests