Merge pull request #1416 from emielbeinema/fix_webcomponents

Make menu work in WebComponent

1 files changed, 4 insertions, 2 deletions

diff --git a/src/js/controls.js b/src/js/controls.js
index 78d3144f..275ffb3f 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -1138,7 +1138,9 @@ const controls = {
         } else if (is.keyboardEvent(input) && input.which === 27) {
             show = false;
         } else if (is.event(input)) {
-            const isMenuItem = popup.contains(input.target);
+            // If Plyr is in a shadowDOM, the event target is set to the component, instead of the
+            // element in the shadowDOM. The path, however, is complete.
+            const isMenuItem = popup.contains(input.path[0]);
 
             // If the click was inside the menu or if the click
             // wasn't the button or menu item and we're trying to
@@ -1191,7 +1193,7 @@ const controls = {
 
     // Show a panel in the menu
     showMenuPanel(type = '', tabFocus = false) {
-        const target = document.getElementById(`plyr-settings-${this.id}-${type}`);
+        const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
 
         // Nothing to show, bail
         if (!is.element(target)) {