From 5ddd9e02def654bb677c988403dbefbc4a32787c Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 25 Apr 2019 12:09:46 +1000
Subject: [PATCH] Fix for the menu in the shadow DOM

---
 changelog.md       |  1 +
 src/js/controls.js | 20 ++++----------------
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/changelog.md b/changelog.md
index be9a96fb..f3284a08 100644
--- a/changelog.md
+++ b/changelog.md
@@ -9,6 +9,7 @@
 -   Fixed issue with ads volume not matching current content volume
 -   Fixed race condition where ads were loading during source change
 -   Improvement: Automatic aspect ratio for YouTube is now supported, meaning all aspect ratios are set based on media content - Note: we're now using a different API to get YouTube video metadata so you may need to adjust any CSPs you have setup
+-   Fix for menu in the Shadow DOM (thanks @emielbeinema)
 
 ## v3.5.3
 
diff --git a/src/js/controls.js b/src/js/controls.js
index 150dcdd2..9a960b38 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -10,20 +10,7 @@ import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
 import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
-import {
-    createElement,
-    emptyElement,
-    getAttributesFromSelector,
-    getElement,
-    getElements,
-    hasClass,
-    matches,
-    removeElement,
-    setAttributes,
-    setFocus,
-    toggleClass,
-    toggleHidden,
-} from './utils/elements';
+import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, matches, removeElement, setAttributes, setFocus, toggleClass, toggleHidden } from './utils/elements';
 import { off, on } from './utils/events';
 import i18n from './utils/i18n';
 import is from './utils/is';
@@ -1141,8 +1128,9 @@ const controls = {
             show = false;
         } else if (is.event(input)) {
             // 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]);
+            // Element in the shadowDOM. The path, if available, is complete.
+            const target = is.function(input.composedPath) ? input.composedPath()[0] : input.target;
+            const isMenuItem = popup.contains(target);
 
             // If the click was inside the menu or if the click
             // wasn't the button or menu item and we're trying to