-1

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

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

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

  1. 我们无法使用 glimmer 将对象/数组传递给 Web 组件(我们尝试使用通过属性传递它)
  2. 当 web 组件被渲染时,shadow DOM 不工作

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

4

1 回答 1

0

要旨:

主意

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

解决方案

显而易见的解决方案是编写 web-component,但我们的代码已经用 emberjs 插件编写。因此,我们决定将附加项目迁移到最新的 ember,在我们将附加组件迁移到 glimmerjs 并将 glimmerjs 组件转换为 web 组件(使用@glimmer/web-component)并使用它之后。

我们付出了努力,并使其发挥了作用。我正在分享我们应用的当前解决方案。

正如我在问题中提到的那样,我们面临着几个挑战。我会一一回答这些问题。

  1. 为了在两个组件之间传递对象,我们通过提升CustomEventfrom child-componentto 来传递它parent-component

    didInsertElement() {
        this.element.dispatchEvent(
          new CustomEvent('data-ready', { bubbles: true, detail: this })
        );
    }
    
  2. 经过研究发现,glimmer 不支持 shadow DOM,他们还没有支持它的计划。shadow-dom一旦我们认为有特征是好的,就重新分析需求。我们正在使用 CSS 特异性(传统方式)来隔离特定于组件的 CSS:p

尽管在应用了上述内容之后,我们的状态良好。如果您想查看代码。请检查这个github 存储库(初步查看)

于 2020-01-20T17:01:19.797 回答