Shadow DOM breaks contextmenu
Categories
(Core :: DOM: Core & HTML, defect, P5)
Tracking
()
People
(Reporter: me, Unassigned)
References
(Blocks 1 open bug)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0
Steps to reproduce:
Attempt to use the contextmenu attribute on an element with a shadow root attached, or on an element inside a shadow root.
Sample HTML demonstrating the possibilities I came up with:
<!doctype html>
<menu id=a type=context>
<menuitem>It works! (#a)</menuitem>
</menu>
<p>Green items are the ones that work at the time of writing. Red items are the ones that don’t work at the time of writing.
<ol style=color:red>
<li style=color:green>
<div contextmenu=a>
<p>This paragraph exists in a real DOM; its parent has contextmenu=a. This is the control case, involving no shadow DOM.
</div>
<li style=color:green><p contextmenu=a id=b></p>
<li><div contextmenu=a><div id=c></div></div>
<li><div contextmenu=a id=d></div>
<li><div id=e></div>
<li><div id=f>
<menu id=g type=context>
<menuitem>It works! (#g)</menuitem>
</menu>
</div>
<li><div id=h contextmenu=i>
<menu id=i type=context>
<menuitem>It works! (#i)</menuitem>
</menu>
</div>
<li><div id=j></div>
</ol>
<script>
b.attachShadow({mode:'open'}).innerHTML = `This text exists in a shadow DOM with no intervening elements; <strong style=color:red>text then within an element doesn’t work</strong>; the host element has contextmenu=a.`;
c.attachShadow({mode:'open'}).innerHTML = `<p>This paragraph exists in a shadow DOM; the host element’s parent has contextmenu=a.`;
d.attachShadow({mode:'open'}).innerHTML = `<p>This paragraph exists in a shadow DOM; the host element has contextmenu=a.`;
e.attachShadow({mode:'open'}).innerHTML = `<p contextmenu=a>This paragraph exists in a shadow DOM and has contextmenu=a (a menu outside the shadow root, so not expected to work).`;
f.attachShadow({mode:'open'}).innerHTML = `<slot></slot><p contextmenu=g>This paragraph exists in a shadow DOM and has contextmenu=g (a menu inside the normal DOM, either hidden by or slotted into the shadow root, not expected to work).`;
h.attachShadow({mode:'open'}).innerHTML = `<slot></slot><p>This paragraph exists in a shadow DOM; the host element has contextmenu=i (a menu inside the normal DOM, either hidden by or slotted into the shadow root, probably not expected to work).`;
j.attachShadow({mode:'open'}).innerHTML = `
<menu id=k type=context>
<menuitem>It works! (#k)</menuitem>
</menu>
<p contextmenu=k>This paragraph exists in a shadow DOM and has contextmenu=k (a menu inside the same shadow DOM).
`;
</script>
Actual results:
When you right click within an element that is within a shadow root, any contextmenu that should be effective fails to work. In the example given, only example 1 and example 2 apart from the bold text work.
Expected results:
I’d expect approaches 1–4 and 8 to work. 5 and 6 I don’t expect to work, 7 I don’t think should work.
(My expectations on 5–7 are influenced by the operation of <label>, when the element identified by the for attribute is not in the same root.)
The effect of all this is that as I migrate my tty-player element to use shadow DOM for better encapsulation, &c., I lose context menu functionality (adding Play/Pause and Show/Hide Controls, matching the audio and video elements).
|
||
Updated•4 years ago
|
|
||
Comment 1•4 years ago
•
|
||
Could you possible attach the testcase as attachment. "Attach new file".
But in general it isn't defined how contextmenu should work with shadow DOM, since it has been removed from HTML spec, and is still
in progress of being removed from Gecko too (unless other browser vendors implement it too).
See https://bugzilla.mozilla.org/show_bug.cgi?id=1372276#c0
But then https://bugs.webkit.org/show_bug.cgi?id=179020 did land to webkit, but is that enabled on Safari?
Though, that patch didn't add support for contextmenu.
|
||
Updated•4 years ago
|
|
||
Updated•2 years ago
|
Description
•