How do I tap into `connected` / `disconnected` lifecycle methods ?

[mykulyak]

Hi,

I am writing an element wrapping Monaco editor (+ doing extra stuff related to my app).
To set up the editor I need somehow to hook into 'connectedCallback'. However, I don't see a possibility to do this.

Can you guide me ? Here's the "more or less" what I'm trying to achieve.

[smalluban]

Every property supports connect() callback, which is triggered within the connectedCallback of the Custom Elements API.

You can try to do something like this:

{
  tag: 'my-monaco-editor',
  editor: {
    value: undefined,
    connect: (host, key) => {
      host[key] = host[key] || monaco.editor.create(host.render().querySelector('div'), {
	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
	language: 'javascript'
      });
    },
  },
  render: () => html`<div></div>`,
};

[smalluban]

I am not sure if I can help more in that subject. There is also an explanation of the concept in the docs here: https://hybrids.js.org/#/component-model/structure?id=connect

Feel free to re-open if you need more help.