Lovelace: Custom Cards - custom element doesn't exist

Configuration Frontend
1

image

i’ve been stuck for four days now.

How do you add new custom card element?

this is my configuration. it’s really messy because i’m still learning.

image
image1645×609 69.9 KB

image
image620×1015 40.9 KB

Thanks!!

1 Like
2

usually you need to copy your content-card-example.js somewhere inside /www/ and add it to resources : if you’re using LL in YAML mode, check out this (example), otherwise go to Configuration → Lovelace Dashboards, select Resources tab and click the yellows plus sign at the bottom left to add a new one.
type is usually module.
path is /local/path/file.js where /local= /www/

here’s some info just in case

3

i worked home assistant 0.107.7

  • add resources to configuration.yaml

  • add card to ui-lovelace.yaml

i’ve made a blank card.

thanks to this card I was able to understand and make a blank card.

class BlankCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  setConfig(config) {
    if (!config.entity) {
      throw new Error('Please define an entity');
    }

    const root = this.shadowRoot;
    if (root.lastChild) root.removeChild(root.lastChild);

    const card = document.createElement('ha-card');
    const content = document.createElement('div');
    const style = document.createElement('style');
    style.textContent = `
      ha-card {
        --base-unit: 50px;
        height: calc(var(--base-unit)*3);
        position: relative;
      }
    `;
    // content.innerHTML = `
    //   <div class="container">
    //   </div>
    // `;
    // card.appendChild(content);
    card.appendChild(style);
    root.appendChild(card);
    this._config = config;
  }

  set hass(hass) {
    const config = this._config;

    const root = this.shadowRoot;
    root.lastChild.hass = hass;
  }

  getCardSize() {
    return 1;
  }
}

customElements.define('blank-card', BlankCard);