emberjs：微光 web 組件傳遞數組/對象不起作用

Question

我們的業務問題陳述之一是，我們必須創建組件，以便任何消費者都可以將它們用作小部件並嵌入到他們的網站中。 問題是我們已經有了用 ember 制作的那些組件。

我們不知道消費者網站將擁有哪個堆棧，這可能是隨機的。 所以我們想到了將這些 ember 組件轉換為 web 組件。

我們做了小型 POC，我們無法使用 glimmer 從 ember 組件中創建 web 組件。 但是我們面臨着幾個問題

1. 我們無法使用微光將對象/數組傳遞給 web 組件（我們嘗試使用通過屬性傳遞它）
2. 當 web 組件被渲染時，影子 DOM 不工作

為了使用簡單的微光組件，我遵循了 https://glimmerjs.com/guides/using-glimmer-as-web-components

Answer 1

要旨：

主意

這個想法是創建與框架無關的組件，以便它可以完美地在不同的應用程序中使用。 該組件已經用 emberjs 編寫。

解決方案

顯而易見的解決方案是編寫 web-component，但我們的代碼已經用 emberjs 插件編寫。 因此，我們決定將附加項目遷移到最新的 ember，在我們將附加組件遷移到 glimmerjs 並將 glimmerjs 組件轉換為 web-component （使用@glimmer/web-component ）並使用它之后。

我們付出了努力，並使其發揮了作用。 我正在分享我們應用的當前解決方案。

正如我在問題中提到的那樣，我們面臨着幾個挑戰。 我會一一回答這些問題。

1. 為了在兩個組件之間傳遞 object，我們通過將CustomEvent從child-component提升到parent-component組件來傳遞它

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

2. 經過研究發現，glimmer 不支持 shadow DOM，他們還沒有支持它的計划。 一旦我們認為shadow-dom具有特征是好的，重新分析需求。 我們正在使用 CSS 特異性（傳統方式）來隔離特定於組件的 CSS：p

盡管在應用了上述內容之后，我們的狀態良好。 如果您想查看代碼。 請檢查此github 存儲庫（初步查看）