javascript - 自定义组件中的connectedCallback()可以根据使用的上下文以不同的方式解释吗？

Question

我创建了一个包含 Vue 实例的自定义组件:

class ContentCardExample extends HTMLElement {
  connectedCallback() {
    const card = document.createElement('div');
    card.setAttribute("id", "app")
    card.innerHTML = 'hello is {{hello}}'
    this.appendChild(card);
    new Vue({
      el: "#app",
      data: {
        hello: 5
      }
    })
  }
}

customElements.define('content-card-example', ContentCardExample);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<content-card-example></content-card-example>

它工作正常独立(即 - 直接在浏览器中使用上面的代码片段)

然后我尝试将其添加到 Home Assistant它提供了一种通过创建自定义元素来创建自定义卡片的方法，然后由 Home Assistant 显示该元素。

在 Home Assistant 中使用相同的代码会导致 Vue 警告(实际上是错误):Cannot find element #app

我的问题如下:在某些情况下，我的自定义组件是否会根据使用位置的不同而呈现不同的效果？。附带问题是“如果是，这是否正常且符合预期”

注意:我不想将此问题设为“家庭助理”问题(这不是提问的正确位置) - 而是想了解我写的内容是否可以被视为“ self ” contains”，一旦它在简单的 HTML 文件中工作，它就应该可以在任何地方工作 - 或者自定义元素 content 是否仍然依赖/取决于该元素的使用位置。 Home Assistant 恰好是这种行为差异发生的地方。

Answer 1

Vue 实例找不到 #app。您可以将 card 元素直接传递给 el。我稍后使用了一个名为 vm 的变量来调用 vue 实例，并使用 vm.$el 将其附加到您的 DOM。

试试这个:

class ContentCardExample extends HTMLElement {
  connectedCallback() {
    const card = document.createElement('div');

    card.innerHTML = 'hello is {{hello}}';

    const vm = new Vue({
      el: card,
      data: {
        hello: 5
      }
    });

    this.appendChild(vm.$el);
  }
}

customElements.define('content-card-example', ContentCardExample);