Может ли 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

У меня следующий вопрос: Существуют ли обстоятельства, когда мой пользовательский компонент отображается по-разному в зависимости от того, где он используется? . Дополнительный вопрос: «Если да - это нормально и ожидаемо»

Примечание: Я не хочу делать этот вопрос «домашним помощником» (это не то место, где его можно задать), а скорее чтобы понять, можно ли считать то, что я написал, «самодостаточным» "и как только он работает в простом HTML-файле, он должен работать где угодно - или зависит от того, где этот элемент используется, пользовательский элемент content все еще зависит / зависит от того, где он используется. Домашний помощник - это место, где такое различие в поведении происходит.

Answer 1

Экземпляр Vue не может найти #app. Вы можете передать свой элемент card непосредственно в el. Я использовал переменную с именем vm для последующего вызова экземпляра vue и добавления его в DOM с помощью vm.$el.

Попробуйте это:

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);