diff --git a/src/vaadin-context-menu-overlay.html b/src/vaadin-context-menu-overlay.html
index 6cac9699..f55c9ab7 100644
--- a/src/vaadin-context-menu-overlay.html
+++ b/src/vaadin-context-menu-overlay.html
@@ -69,6 +69,12 @@
parentOverlay: {
type: Object,
readOnly: true
+ },
+
+ theme: {
+ type: String,
+ reflectToAttribute: true,
+ observer: '_themeChanged'
}
};
}
@@ -90,6 +96,31 @@
});
}
+ _themeChanged(theme) {
+ const childContextMenu = this.querySelector('vaadin-context-menu');
+ const childListBox = this.querySelector('vaadin-context-menu-list-box');
+
+ if (childListBox) {
+ if (theme && theme !== '') {
+ childListBox.setAttribute('theme', theme);
+ Array.from(childListBox.querySelectorAll('vaadin-context-menu-item'))
+ .forEach(item => item.setAttribute('theme', theme));
+ } else {
+ childListBox.removeAttribute('theme');
+ Array.from(childListBox.querySelectorAll('vaadin-context-menu-item'))
+ .forEach(item => item.removeAttribute('theme'));
+ }
+ }
+
+ if (childContextMenu) {
+ if (theme && theme !== '') {
+ childContextMenu.setAttribute('theme', theme);
+ } else {
+ childContextMenu.removeAttribute('theme');
+ }
+ }
+ }
+
getBoundaries() {
// Measure actual overlay and content sizes
const overlayRect = this.getBoundingClientRect();
diff --git a/src/vaadin-context-menu.html b/src/vaadin-context-menu.html
index aca41b5e..c07bb26d 100644
--- a/src/vaadin-context-menu.html
+++ b/src/vaadin-context-menu.html
@@ -248,6 +248,8 @@
*
* Note: the `theme` attribute value set on `` is
* propagated to the internal `` component.
+ * In case of using nested menu items, the `theme` attribute is also propagated
+ * to internal `vaadin-context-menu-list-box` and `vaadin-context-menu-item`'s.
*
* @memberof Vaadin
* @mixes Vaadin.ElementMixin
diff --git a/src/vaadin-contextmenu-items-mixin.html b/src/vaadin-contextmenu-items-mixin.html
index 0fbcbc38..e000a069 100644
--- a/src/vaadin-contextmenu-items-mixin.html
+++ b/src/vaadin-contextmenu-items-mixin.html
@@ -156,6 +156,12 @@
// Store the reference to align based on parent overlay coordinates
subMenu.$.overlay._setParentOverlay(parent);
+ // Set theme attribute from parent element
+ const parentTheme = parent.getAttribute('theme');
+ if (parentTheme && parentTheme !== '') {
+ subMenu.setAttribute('theme', parentTheme);
+ }
+
let x;
content.style.minWidth = '';
if (document.documentElement.clientWidth - itemRect.right > itemRect.width) {
@@ -200,6 +206,7 @@
component.setAttribute('role', 'separator');
}
component.classList.add('vaadin-menu-item');
+ component.setAttribute('theme', this.theme);
component._item = item;
@@ -236,7 +243,7 @@
__initMenu(root, menu) {
if (!root.firstElementChild) {
root.innerHTML = `
-
+
`;
Polymer.flush();
diff --git a/test/items.html b/test/items.html
index 8688976c..3028b4f0 100644
--- a/test/items.html
+++ b/test/items.html
@@ -20,6 +20,14 @@
+
+
+
+
+
+
+
+