emberjs：Glimmer Web 组件传递 array/objects 不工作

Question

我们的业务问题陈述之一是，我们必须创建组件，以便任何消费者都可以将它们用作小部件并嵌入到他们的网站中。问题是我们已经用 ember.

制作了那些组件

我们不知道消费者网站将拥有哪个堆栈，这可能是随机的。所以我们想到了将这些 ember 组件转换为 Web 组件。

我们做了一个小的 POC，我们无法使用 glimmer 从 ember 组件创建 Web 组件。但是我们面临着几个问题

我们无法通过 glimmer 将 objects/arrays 传递给 Web 组件（我们尝试使用通过属性传递它）
渲染 Web 组件时阴影 DOM 无法正常工作

为了使用简单的微光组件，我遵循了 https://glimmerjs.com/guides/using-glimmer-as-web-components

Answer 1

要点：

想法

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

解决方案

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

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

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

为了在两个组件之间传递对象，我们通过将 CustomEvent 从 child-component 提高到 parent-component

来传递它

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

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

尽管在应用了上述内容之后，我们的状态还是不错的。如果万一您想查看代码。请检查这个github repository（初看）

emberjs：Glimmer Web 组件传递 array/objects 不工作

emberjs: Glimmer web component pass array/objects not working

javascript

ember.js

web-component

glimmer.js

ember-octane