How to use LWC inside a card?

[malwina]

Hi!
I need to put a Lightning Web Component (and pass parameters to it) inside a card.
Ideally, I would need something similar to:

taskRenderer({ cardConfig, taskRecord }) {
  ...
  cardConfig.children.body.children.contributors = {
    class: 'contributors',
    html: `<c-avatar-group contributors={${taskRecord.contributors}}></c-avatar-group>`
  };
}

This, of course, doesn't work so I'd be grateful if you could point me in the right direction.

[alex.l]

Hi,

It is not supported currently. I've opened a ticket to investigate/add this functionality https://github.com/bryntum/support/issues/8480

If you want to play with it by you own, I suggest to start from this article https://developer.salesforce.com/docs/platform/lwc/guide/js-dynamic-components.html

[malwina]

Thank you Alex! I appreciate the help.
Fingers crossed for the feature request.

[gbrdhvndi]

Unfortunately, this won't work because Bryntum components in the LWC run-time need to be rendered in an element marked as lwc:dom="manual" to allow direct DOM manipulation, which means that the Lightning Web Components framework is not going to be automatically re-rendering this DOM subtree (hence "manual"). So a custom element like this one won't be rehydrated.

[alex.l]

Hi Aleksei, thanks for sharing your expertise!
I was thinking about empty containers marked as "manual" with delayed adding of components inside as it described in the article I mentioned. But didn't have a complete solution in my mind. Looks like we have not many chances for success.

[gbrdhvndi]

No worries, happy to help!

It is unfortunate, indeed. For one of my LWC open-source projects I had to reimplement a couple of LWC components as Bryntum Widgets so I could place them in a Grid cell. Learned about the compose() method, it was fun