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 存储库（初步查看）