1 回答

TA貢獻1810條經驗 獲得超5個贊
要旨:
主意
這個想法是創(chuàng)建與框架無關的組件,以便它可以完美地在不同的應用程序中使用。該組件已經用 emberjs 編寫。
解決方案
解決方案是編寫明顯的 web 組件,但我們已經用 emberjs 插件編寫了我們的代碼。所以我們決定將附加項目遷移到最新的 ember,在我們將附加組件遷移到 glimmerjs 并將該 glimmerjs 組件轉換為 web 組件(使用@glimmer/web-component)并使用它之后。
我們付出了努力,讓它發(fā)揮了作用。我正在分享我們應用的當前解決方案。
正如我在問題中提到的,我們面臨著一些挑戰(zhàn)。我會一一解答。
為了在兩個組件之間傳遞對象,我們通過提高CustomEventfromchild-component來傳遞它parent-component
didInsertElement() {
this.element.dispatchEvent(
new CustomEvent('data-ready', { bubbles: true, detail: this })
);
}
經過研究發(fā)現,glimmer不支持shadow DOM,目前他們也沒有任何支持的計劃。一旦我們認為shadow-dom擁有特性是好的,就重新分析需求。我們正在使用 CSS 特異性(傳統(tǒng)方式)來隔離特定于組件的 CSS :p
盡管在應用上述內容后,我們的狀態(tài)良好。如果你想看看代碼。請檢查此github 存儲庫(初始外觀)
添加回答
舉報