Context menu don´t work inside shadowDOM.

bonafe commented 2 years ago

If you create a component that extends HTMLElement and use shadowDOM, the context menus wont appear. How to reproduce:

Create a class that extends HTMLElement
Create a ShadowDOM via: this.attachShadow({mode: 'open'});
Create a svelt-jsoneditor inside this custom Element
Context menu don´t work.

If you keep everthing the same but don´t use shadowDOM it works as expected.

josdejong commented 2 years ago

Thanks for reporting this issue Fernando.

Anyone able to look into this bug? Help would be welcome.

vdwees commented 1 year ago

hmm for me they work, at least with the current version.

I am using lit, however

josdejong commented 1 year ago

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/vanilla-jsoneditor@0.17.0/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>

vdwees commented 1 year ago

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: https://github.com/josdejong/svelte-jsoneditor/issues/49

josdejong commented 1 year ago

Ah, I see it indeed works when loading for example themes/jse-theme-default.css, thanks. I can now reproduce your issue with the following 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/vanilla-jsoneditor@0.17.0/themes/jse-theme-default.css" />

  <script type="module">
    import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor@0.17.0/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.

thernstig commented 6 months ago

@josdejong did you manage to look into this? :)

josdejong commented 6 months ago

No, help would be welcome.

josdejong / svelte-jsoneditor

Context menu don´t work inside shadowDOM. #49