emberjs: Glimmer web component pass array/objects not working

Question

One of our business problem statement is, we have to create component such that any consumer can use them as a widget and embed in their website. And the thing is we already have those component made with ember.

We're not aware that which stack the consumer website going to have, that could be random. So we thought of converting these ember components to web components.

We did small POC where we were not able to create web component out of ember component using glimmer. But we're facing couple of problems

1. We're not able to pass objects/arrays to web components with glimmer (we tried using pass it through properties)
2. Somehow shadow DOM is not working when web component gets rendered

For using simple glimmer component I have followed https://glimmerjs.com/guides/using-glimmer-as-web-components

Answer 1

Gist:

Idea

The idea was to create framework agnostic component, so that it can be used inside different applications flawlessly. The component was already written in emberjs.

Solution

Solution is to write web-component for obvious, but we've our code already written in emberjs add-on. So we decided to migrate add-on project to latest ember, after we migrated add-on components to glimmerjs and converted that glimmerjs component to web-component (using @glimmer/web-component) and use it across.

We took an effort, and made it working. I'm sharing the current solution that we've applied.

As we were facing couple of challenges as I mentioned in my question. I'll answer those points one by one.

1. For passing object between two component, we're passing it by raising CustomEvent from child-component to parent-component

   didInsertElement() {
       this.element.dispatchEvent(
         new CustomEvent('data-ready', { bubbles: true, detail: this })
       );
   }
   

2. After a research found that, glimmer does not support shadow DOM, they don't have any plan for supporting it yet. And re-analysing the requirement once we thought shadow-dom is good to have feature. We're using CSS specificity (traditional way) to isolate CSS specific to component :p

Though after applying above things we're in good shape. If in case you wanted to have a look at the code. Please check this github repository (initial look)