I have recently developed a Custom Component that incorporates a Vue instance:
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>This component functions perfectly individually (as shown in the code snippet above directly in a web browser)
However, when I attempted to integrate it into Home Assistant, which allows for customized cards through a Custom Element displayed by Home Assistant, I encountered a Vue warning (essentially an error): Cannot find element #app
My query now is: Are there scenarios where my Custom Component renders differently based on its usage environment?. This leads to the related question of whether this behavior is normal and expected.
Note: I do not wish to focus on "Home Assistant" specifically (as this may not be the appropriate forum) - but rather understand if this component can be considered "self-contained" and should work universally once functional in a basic HTML file, or if a Custom Element's content still relies on and is influenced by its implementation location. In this case, Home Assistant showcased variations in behavior.