diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index f1ec6145087..87e836c0b5a 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -113,7 +113,7 @@ class AddEditBookmarkHanger extends React.Component {
   }
 
   render () {
-    return <Dialog className={cx({
+    return <Dialog bookmarkHanger className={cx({
       bookmarkDialog: this.props.isModal,
       bookmarkHanger: !this.props.isModal,
       [css(styles.bookmarkHanger)]: !this.props.isModal
diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index c6b009eab7c..5dfc7064d00 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -59,6 +59,7 @@ class BrowserButton extends ImmutableComponent {
   render () {
     return <button
       disabled={this.props.disabled}
+      data-extension-button={this.props.extensionButton}
       data-l10n-id={this.props.l10nId}
       data-test-id={this.props.testId}
       data-test2-id={this.props.test2Id}
diff --git a/app/renderer/components/common/contextMenu.js b/app/renderer/components/common/contextMenu.js
index a0561739e5c..736fc4ae12c 100644
--- a/app/renderer/components/common/contextMenu.js
+++ b/app/renderer/components/common/contextMenu.js
@@ -509,6 +509,7 @@ class ContextMenu extends React.Component {
     }
 
     return <div
+      data-context-menu
       ref={(node) => { this.node = node }}
       className={cx({
         contextMenu: true,
diff --git a/app/renderer/components/common/dialog.js b/app/renderer/components/common/dialog.js
index 589763b2cb6..8a0f3d2b863 100644
--- a/app/renderer/components/common/dialog.js
+++ b/app/renderer/components/common/dialog.js
@@ -41,11 +41,13 @@ class Dialog extends ImmutableComponent {
   }
 
   render () {
-    return <div className={cx({
-      [css(styles.dialog)]: true,
-      [css(styles.dialog_isNotClickDismiss)]: !this.props.isClickDismiss,
-      [this.props.className]: !!this.props.className
-    })}
+    return <div
+      data-bookmark-hanger={this.props.bookmarkHanger}
+      className={cx({
+        [css(styles.dialog)]: true,
+        [css(styles.dialog_isNotClickDismiss)]: !this.props.isClickDismiss,
+        [this.props.className]: !!this.props.className
+      })}
       data-test-id={this.props.testId}
       data-test2-id={this.props.test2Id}
       tabIndex='-1'
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
index b47ccd149ba..9ce947de0fc 100644
--- a/app/renderer/components/main/main.js
+++ b/app/renderer/components/main/main.js
@@ -459,18 +459,19 @@ class Main extends React.Component {
   }
 
   onMouseDown (e) {
-    // TODO(bsclifton): update this to use eventUtil.eventElHasAncestorWithClasses
     let node = e.target
+    const datasets = [
+      'popupWindow',
+      'contextMenu',
+      'extensionButton',
+      'menubarItem',
+      'bookmarkHanger'
+    ]
     while (node) {
-      if (node.classList &&
-          (node.matches('[class^="popupWindow"]') ||
-            node.classList.contains('contextMenu') ||
-            node.matches('[class*="extensionButton_"]') ||
-            node.classList.contains('menubarItem') ||
-            node.classList.contains('bookmarkHanger'))) {
+      if (eventUtil.elementHasDataset(node, datasets)) {
         // Middle click (on context menu) needs to fire the click event.
         // We need to prevent the default "Auto-Scrolling" behavior.
-        if (node.classList.contains('contextMenu') && e.button === 1) {
+        if (eventUtil.elementHasDataset(node, 'contextMenu') && e.button === 1) {
           e.preventDefault()
         }
         // Click event is handled downstream
diff --git a/app/renderer/components/main/popupWindow.js b/app/renderer/components/main/popupWindow.js
index ce8b2861c27..87f8d167435 100644
--- a/app/renderer/components/main/popupWindow.js
+++ b/app/renderer/components/main/popupWindow.js
@@ -118,6 +118,7 @@ class PopupWindow extends React.Component {
     }
 
     return <div
+      data-popup-window
       className={css(
         styles.popupWindow,
         style.right !== undefined && styles.reverseExpand
diff --git a/app/renderer/components/navigation/browserAction.js b/app/renderer/components/navigation/browserAction.js
index 104cfb4c09e..2aabed09723 100644
--- a/app/renderer/components/navigation/browserAction.js
+++ b/app/renderer/components/navigation/browserAction.js
@@ -81,6 +81,7 @@ class BrowserAction extends React.Component {
     // TODO(bridiver) should have some visual notification of hover/press
     return <div className={css(styles.browserActionButton)}>
       <BrowserButton
+        extensionButton
         extensionItem
         l10nId='browserActionButton'
         testId='extensionBrowserAction'
diff --git a/app/renderer/components/navigation/menuBarItem.js b/app/renderer/components/navigation/menuBarItem.js
index 0329e7e0703..3f84feea2ce 100644
--- a/app/renderer/components/navigation/menuBarItem.js
+++ b/app/renderer/components/navigation/menuBarItem.js
@@ -67,6 +67,7 @@ class MenuBarItem extends React.Component {
 
   render () {
     return <span
+      data-menubar-item
       className={'menubarItem' + (this.props.selected ? ' selected' : '')}
       onClick={this.onClick}
       onMouseOver={this.onMouseOver}
diff --git a/js/lib/eventUtil.js b/js/lib/eventUtil.js
index 655a576a37a..f2bd937cc3b 100644
--- a/js/lib/eventUtil.js
+++ b/js/lib/eventUtil.js
@@ -10,6 +10,12 @@ module.exports.isForSecondaryAction = (e) =>
   e.button === 1
 
 module.exports.eventElHasAncestorWithClasses = (e, classesToCheck) => {
+  // DO NOT ADD NEW CHECKS USING THIS METHOD
+  // classNames are changed from dev to prod by Aphrodite est. v1.2.3
+  // and new code will not work. Consider using dataset attribute instead.
+  // See issue #10029 for a breaking example.
+  // ....
+  // TODO deprecate this method.
   let node = e.target
 
   while (node) {
@@ -28,3 +34,20 @@ module.exports.eventElHasAncestorWithClasses = (e, classesToCheck) => {
 
   return false
 }
+
+/**
+ * Checks if a given node dataset matches a given dataset or array of datasets
+ * @param {Object} The node to check if dataset is included
+ * @param {Array|String} the dataset value to check against
+ * @returns {Boolean} Whether or not the given dataset is included in the check
+ */
+module.exports.elementHasDataset = (node, datasetArray) => {
+  if (!node.dataset) {
+    return false
+  }
+
+  const datasetToMatch = Array.isArray(datasetArray) ? datasetArray : [datasetArray]
+  const elementDataset = Object.keys(node.dataset)
+
+  return elementDataset.some(dataset => datasetToMatch.includes(dataset))
+}
diff --git a/test/unit/js/lib/eventUtilTest.js b/test/unit/js/lib/eventUtilTest.js
new file mode 100644
index 00000000000..c825322421f
--- /dev/null
+++ b/test/unit/js/lib/eventUtilTest.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* global describe, it */
+
+const eventUtil = require('../../../../js/lib/eventUtil')
+const assert = require('assert')
+
+require('../../braveUnit')
+
+describe('eventUtil', function () {
+  describe('elementHasDataset', function () {
+    let datasetToTest
+    let node = { dataset: { nespresso: true } }
+
+    it('returns false if node dataset do not match', function () {
+      datasetToTest = ['starbucks', 'keurig']
+      assert.equal(eventUtil.elementHasDataset(node, datasetToTest), false)
+    })
+    it('returns true if node dataset match the provided dataset array', function () {
+      datasetToTest = ['wow', 'such', 'nespresso', 'very', 'amazing']
+      assert.equal(eventUtil.elementHasDataset(node, datasetToTest), true)
+    })
+    it('can accept strings for the dataset to match against', function () {
+      datasetToTest = 'nespresso'
+      assert.equal(eventUtil.elementHasDataset(node, datasetToTest), true)
+    })
+    it('can not accept partial string match', function () {
+      datasetToTest = ['nespressomnibox']
+      assert.equal(eventUtil.elementHasDataset(node, datasetToTest), false)
+    })
+    it('returns false if node do not provide a dataset', function () {
+      node = delete node.dataset
+      datasetToTest = ['nespresso']
+      assert.equal(eventUtil.elementHasDataset(node, datasetToTest), false)
+    })
+  })
+})