Context menu don´t work inside shadowDOM. #49
Comments
|
Thanks for reporting this issue Fernando. Anyone able to look into this bug? Help would be welcome. |
josdejong
added
bug
|
hmm for me they work, at least with the current version. I am using lit, however |
|
Thanks for your feedback @vdwees. I tried to reproduce but can't get the editor working in Shadow DOM in the first place, it misses styling. Do you know how to add styling @vdwees? <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSONEditor | Shadow DOM</title>
<script type="module">
import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/[email protected]/index.js'
class JSONEditorElement extends HTMLElement {
constructor() {
super();
// Create a shadow root
const shadow = this.attachShadow({ mode: "open" });
const target = document.createElement('div')
shadow.append(target)
const editor = new JSONEditor({
target,
props: {
content: {
json: [1, 2, 3]
}
}
})
}
}
// Define the new element
customElements.define('json-editor', JSONEditorElement)
</script>
</head>
<body>
<h1>JSONEditor in Shadow DOM</h1>
<json-editor></json-editor>
</body>
</html> |
|
Actually, I imported the styles directly from the package separately and added them into the wrapper component. Looks quite ok, but its true the encapsulation is not perfect. But I just noticed a bug. The context menu opens fine in tree view, but does not do anything once you select an option: #49
|
|
Ah, I see it indeed works when loading for example <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSONEditor | Shadow DOM</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/jse-theme-default.css" />
<script type="module">
import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/[email protected]/index.js'
class JSONEditorElement extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: "open" })
const target = document.createElement('div')
const style = document.createElement('style')
style.textContent = `
div.shadow-dom-editor {
width: 500px;
height: 500px;
}`
shadow.appendChild(style)
target.className = 'shadow-dom-editor'
shadow.append(target)
const editor = new JSONEditor({
target,
props: {
content: {
json: [1, 2, 3]
}
}
})
}
}
customElements.define('json-editor', JSONEditorElement)
</script>
</head>
<body>
<h1>JSONEditor in Shadow DOM</h1>
<json-editor></json-editor>
</body>
</html>The ContextMenu opens, but indeed nothing happens when you click an action. At first sight, it looks like the editor is not aware that it has focus. It may be easy to fix. I'll try to do some debugging soon, though help would be very welcome. |
|
@josdejong did you manage to look into this? :) |
|
No, help would be welcome. |
If you create a component that extends HTMLElement and use shadowDOM, the context menus wont appear.
How to reproduce:
If you keep everthing the same but don´t use shadowDOM it works as expected.
The text was updated successfully, but these errors were encountered: