Here is the vaadin-context-menu documentation page.
On that page, there is a button labeled TRY IT OUT that links to a demo page here.
My problem is that I can't get the demo page to actually do anything. I see no errors in the console.
Is the problem on my end? Or is there something wrong with the demo? If it's the latter, how can I fix the code to get the demo to work?
Please show the solution in a working jsBin or Codepen.
https://jsbin.com/yihupap/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>
<paper-listbox>
<paper-item>First menu item</paper-item>
<paper-item>Second menu item</paper-item>
</paper-listbox>
</template>
<p>This paragraph has the context menu provided in the above template.</p>
<p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>
The problem is actually with JSBin and Safari. I cant even get the darn page to load in Safari (Version 10.1.1 12603.2.4).
But the main demo page does work in safari, chrome, etc: http://vaadin.com/elements/-/element/vaadin-context-menu#demos
Use that instead.
As requested here is a working codepen using the same example in your question : https://codepen.io/anon/pen/MozOxG
<!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>
<paper-listbox>
<paper-item>First menu item</paper-item>
<paper-item>Second menu item</paper-item>
</paper-listbox>
</template>
<p>This paragraph has the context menu provided in the above template.</p>
<p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>