emberjs：Glimmer Web 组件传递数组/对象不起作用

Question

我们的业务问题陈述之一是，我们必须创建组件，以便任何消费者都可以将它们用作小部件并嵌入到他们的网站中。问题是我们已经有了用 ember 制作的那些组件。我们不知道消费者网站将拥有哪个堆栈，这可能是随机的。所以我们想到了将这些 ember 组件转换为 web 组件。我们做了一个小的 POC，我们无法使用 glimmer 从 ember 组件中创建 web 组件。但我们面临几个问题我们无法通过 glimmer 将对象/数组传递给 Web 组件（我们尝试使用通过属性传递它）当 web 组件被渲染时，shadow DOM 以某种方式不起作用为了使用简单的微光组件，我遵循了https://glimmerjs.com/guides/using-glimmer-as-web-components

Answer 1

要旨：

主意

这个想法是创建与框架无关的组件，以便它可以完美地在不同的应用程序中使用。该组件已经用 emberjs 编写。

解决方案

解决方案是编写明显的 web 组件，但我们已经用 emberjs 插件编写了我们的代码。所以我们决定将附加项目迁移到最新的 ember，在我们将附加组件迁移到 glimmerjs 并将该 glimmerjs 组件转换为 web 组件（使用@glimmer/web-component）并使用它之后。

我们付出了努力，让它发挥了作用。我正在分享我们应用的当前解决方案。

正如我在问题中提到的，我们面临着一些挑战。我会一一解答。

为了在两个组件之间传递对象，我们通过提高CustomEventfromchild-component来传递它parent-component

didInsertElement() {

    this.element.dispatchEvent(

      new CustomEvent('data-ready', { bubbles: true, detail: this })

    );

}

经过研究发现，glimmer不支持shadow DOM，目前他们也没有任何支持的计划。一旦我们认为shadow-dom拥有特性是好的，就重新分析需求。我们正在使用 CSS 特异性（传统方式）来隔离特定于组件的 CSS :p

尽管在应用上述内容后，我们的状态良好。如果你想看看代码。请检查此github 存储库（初始外观）