Javascript 自定义组件中的connectedCallback（）是否可以根据使用它的上下文以不同的方式进行解释？

我创建了一个自定义组件，其中包括一个Vue实例：

class ContentCardExample扩展了HtmleElement{
connectedCallback（）{
const card=document.createElement（'div'）；
card.setAttribute（“id”、“应用程序”）
card.innerHTML='hello是{{{hello}}'
这是我的孩子（卡片）；
新Vue({
el:“应用程序”，
数据：{
你好：5
}
})
}
}
customElements.define（'content-card-example'，contentcard-example）
Vue实例找不到
#app
。您可以将
卡
元素直接传递到
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);

谢谢-您的解决方案非常有效。您是否知道如何从外部对Vue实例进行寻址
connectedCallback（）
？具体来说：我将为变量使用setter，并希望在Vue实例中更新那里的
hello
。很高兴听到；）如果要在外部编辑
hello
的值，可以全局添加
vm
并调用
$data.hello=10
，
Vue.set（vm，'hello'，10）
或
vm.$set（vm，'hello'，10）
。您还可以添加
vm
作为实例变量，并添加自己的类方法来更新数据。谢谢。我在构造函数中创建了一个属性
this.vm
，并在
connectedCallback（）
中分配了它
this.vm=vm
。然后，我通过
hass
的setter中的
this.vm.hello=hass
更新了该值。很好，再次感谢。（我想知道为什么没有找到
#app
（在独立文件中没有问题），但重要的是现在一切都很好）