在 Polymer 2.x 中导入失败：("The element ... is not defined")

Question

我想导入一个元素并绑定它的一个属性。我的导入无声地失败了。我希望 userLocal 的值是一个对象。但是，userLocal 是 undefined.

我的-app.html

<link rel="import" href="/src/app-state/state-user-local.html">
...
<state-user-local user-local="{{userLocal}}"></state-user-local>
...
<script>
  /* @polymerElement */
  class MyApp extends Polymer.Element {
    static get is() { return 'my-app; }
    static get properties() { return {
      userLocal: {
        type: Object,
        notify: true,
      },
      ...
    }}
  }
  window.customElements.define(MyApp.is, MyApp);
</script>

出现以下错误消息。

The element state-user-local is not defined

我知道导入定义是正确的，因为我正在使用 VSCode 并且当我 command+click 导入它时带我到正确的文件。

我知道<state-user-local>这个元素本身没有问题，因为我成功的将它导入到应用中的其他element/s中，并在那里获得了userLocal的期望值

这个问题听起来像下面 link 中描述的问题。

第一个 link 讨论了在 class 之上使用“/* @polymerElement */”，这是我尝试过的（见上面的代码）但没有成功。

Answer 1

在我看来，您没有在文件中定义 <state-user-local> 元素；你定义了 <my-app>。如果你想使用标签名称 <state-user-local> 你需要这样定义它。

<script>
      class StateUserLocal extends Polymer.Element {
        static get is() { return 'state-user-local'; }
        static get properties() { return {
          userLocal: {
            type: Object,
            notify: true,
          },
          ...
        }}
      }
      window.customElements.define(StateUserLocal.is, StateUserLocal);
</script>

在 Polymer 2.x 中导入失败：("The element ... is not defined")

Failing import in Polymer 2.x: ("The element ... is not defined")

import

web-component

polymer

visual-studio-code

polymer-2.x