Offset: $.fn.offset() on element inside shadowRoot
#1976
Conversation
|
See #1784 for the discussion; also a related ticket for the We want to think this through as supporting shadow nodes correctly may require changes in many places in code. It's also quite early - only Blink is shipping Shadow DOM support so we have no guarantee the spec doesn't change before we could rely on this interface. We need to be careful here. |
|
I'm actively using Web Components, so I'm patching most of components in some ways to make them working together nicely. It is difficult to maintain custom patches, so usually I'm sending the to upstream, thankfully, most developers supports me in this direction. |
|
Please do see the discussion in gh-1784, it seems that the standard either wanted to prevent this type of usage or did not account for it. We can, of course, try to work around it inside jQuery since there is always a way. But to me this indicates there are use cases the spec is not addressing. The best course of action is for the people who think these are still valid use cases to argue them to the standards bodies. |
| return box; | ||
| // We have element in ShadowDOM, need recursive traversal from element to its parent | ||
| if ( elem.matches && elem.matches( ":host *" ) ) { | ||
| if ( !elem.getBoundingClientRect ) { |
There was a problem hiding this comment.
Is there any situation where a browser would support shadowDOM but not getBoundingClientRect? seems unlikely.
There was a problem hiding this comment.
We don't check form getBoundingClientRect at all, I removed this if in my commit dropping older browsers.
There was a problem hiding this comment.
Oh right, that was for some old BlackBerry.
|
This needs unit tests. |
|
Just merged upstream and dropped |
Try |
|
Thanks, @mzgol, it works. |
|
Anything holding this up? Encountered this issue while using web components as well. |
|
Closing in favor of #2043, which is just about ready to land. |
$.fn.offset()didn't worked onhtml>...>shadowRoot>...>target_element, whiletarget_element.getBoundingClientRectworked fine with correct result.The reason was that check for disconnected node made by checking whether
documentcontainstarget_elementfails, which is correct, element inside shadowDOM, not in main DOM.That is why I've added recursive traversal from element to its parent until it reaches
documentor untilparent_element.parentNodeisfalsy(for disconnected nodes it will benull, if pass some badly composed object - it may beundefined, so, justfalsy, in this case we just return).If we encounter
DocumentFragment(shadowRoot), we takeparent_element.hostproperty instead ofparent_element.parentNodein order to get parent element of thatshadowRoot.Also it was necessary to add explicit check for
target_element.getBoundingClientRectproperty.This is modern, Web Components-aware version of ea507b3