I’m trying to create my own custom card, but somehow I can’t get Home assistant to see the card as an actual card and I don’t know what I’m doing wrong.
So I followed the instruction and created a file in the /www folder called ‘my-custom-card.js’ with the following code:
class MyCustomCard extends LovelaceCard {
setConfig(config) {
if (!config) {
throw new Error('Invalid configuration');
}
this.config = config;
this.title = config.title || 'My Custom Card';
// You can define your card's content and behavior here.
}
render() {
// Render your card's content here using HTML or Lit HTML.
const card = document.createElement('div');
card.innerHTML = 'Hello, Custom Card!';
return card;
}
}
customElements.define('my-custom-card', MyCustomCard);
And added the resource in the UI as ‘/local/my-custom-card.js’ (I checked and the Javascript file is accessible through this link)
But if I try to add a new card to my lovelace dashboard it firstly doesn’t show up in the types list. And if I try to add it manualy is says:
Custom element doesn’t exist: my-custom-card
What am I doing wrong and how can I fix this?