mkdir testioc
cd testioc
npm init

npm i skinny-widgets --save

<sk-config
       theme="antd"
       base-path="/node_modules/skinny-widgets/src"
></sk-config>
<script src="/node_modules/skinny-widgets/dist/sk-compat-bundle.js"></script>
<script type="module">
   import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
   window.registry = window.registry || new Registry();
   registry.wire({
       SkConfig: { def: SkConfig, is: 'sk-config'},
       SkButton: { def: SkButton, is: 'sk-button'},
   });
</script>

<sk-button>Open</sk-button>

npx http-server

<script type="module">
   import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
   import { MyDialog } from "./my-dialog.js";
   window.registry = window.registry || new Registry();
   registry.wire({
       SkConfig: { def: SkConfig, is: 'sk-config'},
       SkButton: { def: SkButton, is: 'sk-button'},
       myDialog: { def: MyDialog, is: 'my-dialog' },
   });
</script>
<sk-button>Open</sk-button>
<my-dialog>This is my dialog</my-dialog>

export class MyDialog extends SkDialog {
}

export class MyView extends HTMLElement {
   bindDialog() {
       if (this.dialogCfg) {
           let button = this.querySelector(this.dialogCfg.buttonSl);
           let dialog = this.querySelector(this.dialogCfg.dialogSl);
           if (button) {
               button.addEventListener('click', (event) => {
                   dialog.open();
               });
           }
       }
   }
   render() {
       this.bindDialog();
   }
   connectedCallback() {
       this.render();
   }
}

this.dialogCfg

<script type="module">
   import { Registry } from "/node_modules/skinny-widgets/complets/registry.js";
   import { MyDialog } from "./my-dialog.js";
   import { MyView } from "./my-view.js";
   window.registry = window.registry || new Registry();
   registry.wire({
       SkConfig: { def: SkConfig, is: 'sk-config'},
       SkButton: { def: SkButton, is: 'sk-button'},
       dialogCfg: { buttonSl: '#dialogButton', dialogSl: '#dialog' },
       myDialog: { def: MyDialog, is: 'my-dialog' },
       myView: { def: MyView, deps: { dialogCfg: 'dialogCfg' }, is: 'my-view' },
   });
</script>
<my-view>
   <sk-button id="dialogButton">Open</sk-button>
   <my-dialog id="dialog">This is my dialog</my-dialog>
</my-view>