How to style vaadin-context-menu?

Question

This question is about the ES6 web component (compatible with Polymer 2.0) called vaadin-context-menu version 3.0.0-alpha1.

In the below screen capture, I want the paper-item labeled "Logout" to look the same as the paper items labeled "Edit Profile" and "Preferences."

Specifically, when not being hovered, I want all three to have:

paper-item {
  background-color: white;
  font-weight: normal;
}

Here is my code.

my-el.html

<vaadin-context-menu selector="button" open-on="click" close-on="none">
  <template>
    <style>
      paper-item {
        cursor: pointer;
        --paper-item-focused: {     /* Doesn't seem to work */
          background-color: white;  /* Doesn't seem to work */
          font-weight: normal;      /* Doesn't seem to work */
        };
      }
      paper-item {                  /* Doesn't seem to work */
        background-color: white;    /* Doesn't seem to work */
        font-weight: normal;        /* Doesn't seem to work */
      }
      paper-item:hover {
        background-color: var(--app-primary-color);
        color: white;
      }
    </style>
    <paper-listbox>
      <paper-item>Edit Profile</paper-item>
      <paper-item>Preferences</paper-item>
      <hr />
      <paper-item>Logout</paper-item>
    </paper-listbox>
  </template>
  <button>Click Me</button>
</vaadin-context-menu>

At a guess, what happens if you remove the horizontal rule? – Ryan Leach Jun 27 '17 at 02:08 — Ryan Leach, Jun 27 '17 at 02:08
@RyanTheLeach: No impact. – Let Me Tink About It Jun 27 '17 at 04:19 — Let Me Tink About It, Jun 27 '17 at 04:19

score 1 · Answer 1 · answered Jun 27 '17 at 04:45

Looking at https://vaadin.com/elements/-/element/vaadin-context-menu#demos It appears that custom styling is the current focus (in regards to keyboard) that's what the grey is.

https://github.com/vaadin/vaadin-context-menu/issues/55 References the style saying it's a paper-menu feature, the bold reprensents the last chosen option.

That’s a feature. There is a workaround to make it invisible:

<paper-menu selected-class="not-defined">...</paper-menu>

https://www.webcomponents.org/element/PolymerElements/paper-menu

--paper-menu-selected-item Mixin applied to the selected item {}

--paper-menu-focused-item Mixin applied to the focused item {}

See https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-a-custom-properties-api-to-style-an-element

for using custom properties.

paper-menu {
  --paper-menu-selected-item: {
    background-color: white;
    font-weight: normal;  
  }
  --paper-menu-focused-item: {
    background-color: var(--app-primary-color);
    color: white;
  }
}

score 0 · Answer 2 · answered Jul 08 '17 at 19:31

Here is one solution that bypasses the automatic highlighting of previously selected items. It is taken from the documentation here.

jsBin | source

https://jsbin.com/muwapaweke/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>


<vaadin-context-menu>
  <template>
    <style>
      .my-menu {
        padding: 8px 0;
        background: #fff;
      }

      .my-menu-item {
        display: block;
        padding: 8px 24px;
        text-decoration: none;
        color: #000;
      }

      .my-menu-item:hover {
        background: #eee;
      }
    </style>
    <div class="my-menu">
      <a href="#" class="my-menu-item">First menu item</a>
      <a href="#" class="my-menu-item">Second menu item</a>
    </div>
  </template>

  <p>
    This paragraph has a context menu built using basic HTML elements
    and global CSS styles.
  </p>
</vaadin-context-menu>
</body>
</html>

How to style vaadin-context-menu?

2 Answers2