Input parameters not working inside a web component

[simeon-penev]

Describe the Bug

The input parameters cannot be opened inside a webcomponent, because 'min-dom' is using document and not document.body..shadowDom

The error occurs in InputOutputParameter.js:77 because entryNode is null:

  result.setOpen = function(value) {
    var entryNode = domQuery('[data-entry="' + collapsible.id + '"]');
    collapsible.setOpen(value, entryNode);
  };

Steps to Reproduce

1. Build the properties panel inside a web component and add 2 input parameters.
2. Try to open one of the input parameters from the icon 'arrow' on the left side.
3. Error is shown in the console

Expected Behavior

The input parameters can be edited inside a web component.

Environment

• Host (Browser/Node version), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS] Chrome and Edge Chromium
• OS: [e.g. Windows 7] Windows 10
• Library version: [e.g. 2.0.0] 0.40.0

[nikku]

@simeon-penev What would be the exact fix to make it shadow DOM and DOM compatible? Do you mind contributing a fix?

domQuery supports a second, context parameter like so: domQuery('.some-selector', someDiv)

[simeon-penev]

@nikku Thanks for the suggestion, just posted the pull-request #460