Bad performance with customElements

[zibous]

When I activate the custom header, the constructor of a customElements is called multiple times. This worsens the display of the view massively.

System Home Assistant 0.116.0b5
Frontend-Version: 20201001.1 - latest

arch	x86_64
dev	false
docker	false
hassio	false
installation_type	Home Assistant Core
os_name	Linux
os_version	5.4.0-48-generic
python_version	3.8.2
timezone	Europe/Vaduz
version	0.116.0b5
virtualenv	true

Config

## ########################################
## Compact Custom Header
## ########################################

custom_header:
  compact_mode: true
  header_text: "IPS Smarthome"
  footer_mode: false
  hide_help: true
  background: "rgba(0,0,0,0.8)"

Without custom_header:

With custom_header:

customElement:

class ContentCardExample extends HTMLElement {
	
	constructor() {
		super();
		console.log('*****Event - card - constructor', Math.random().toString(36).substr(2, 9), new Date().getTime());
	}
	
    set hass(hass) {
		if (!this.content) {
            let startTime = new Date()
            console.log("Create new ha-card", startTime)
			const card = document.createElement("ha-card");
			card.header = "Example card";
			this.content = document.createElement("div");
			this.content.style.padding = "0 16px 16px";
			card.appendChild(this.content);
			this.appendChild(card);
		}

		const entityId = this.config.entity;
		const state = hass.states[entityId];
		const stateStr = state ? state.state : "unavailable";

		this.content.innerHTML = `
        The state of ${entityId} is ${stateStr}!
        <br><br>
        <img src="http://via.placeholder.com/350x150">
      `;
	}

	setConfig(config) {
		if (!config.entity) {
			throw new Error("You need to define an entity");
		}
		this.config = config;
	}

	// The height of your card. Home Assistant uses this to automatically
	// distribute all cards over the available columns.
	getCardSize() {
		return 3;
	}
}

customElements.define("content-card-example", ContentCardExample);

Is there a workaround for so I can use the CCH?

[github-actions]

Important:

Issues that don't provide the necessary information listed below may not get a reply and will be closed until the info is provided.

is the current version of Custom Header. Be sure that you are using the latest version by checking your browser's dev tools console (usually found by pressing F12). If this doesn't display the current version either clear your cache or reinstall.

If you haven't yet done so, please read the "Before Posting an Issue" section of the docs site.

Include as much of the following info as you can to help me replicate and investigate your issue:

• A copy/paste of your Custom Header config (found in "Raw Config Editor" or ui-lovelace.yaml).
  Use the tip at the end of this post to format it correctly.
• Any errors relevant to Custom Header found in the HA logs
• Any relevant errors found in your browsers dev console (F12)
• The version of Home Assistant and Custom Header you are using
• The browsers or apps that are affected (i.e. Firefox, Chrome, Chrome Mobile, iOS HA Companion app, etc.)
• Installation method (HACS or manual)
• Lovelace Mode (YAML or Storage). If you are unsure, you are most likely using Storage.

When pasting in your config always place 3 backticks ``` above the first line of your config and after the last line. Doing this will format it correctly so that I may find any formatting errors in your config.

[maykar]

I have decided to stop work on Custom Header and will be archiving the project. Please, see the following post for more info:

https://community.home-assistant.io/t/custom-header/155399/1100