Fixes (#1377)

* Fix legacy wrapper in browsers without native custom elements

* Better error reporting for picture-elements

* Lint

src/panels/lovelace/cards/hui-legacy-wrapper-card.js

@@ -27,10 +27,8 @@ export default class LegacyWrapperCard extends HTMLElement {
 
     if (entityId in hass.states) {
       this._ensureElement(this._tag);
-      this.lastChild.setProperties({
-        hass,
-        stateObj: hass.states[entityId],
-      });
+      this.lastChild.hass = hass;
+      this.lastChild.stateObj = hass.states[entityId];
     } else {
       this._ensureElement('HUI-ERROR-CARD');
       this.lastChild.setConfig(createErrorCardConfig(`No state available for ${entityId}`, this._config));

src/panels/lovelace/cards/hui-picture-elements-card.js

@@ -14,6 +14,8 @@ import toggleEntity from '../common/entity/toggle-entity.js';
 import EventsMixin from '../../../mixins/events-mixin.js';
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
+const VALID_TYPES = new Set(['service-button', 'state-badge', 'state-icon', 'state-label']);
+
 /*
  * @appliesMixin EventsMixin
  * @appliesMixin LocalizeMixin
@@ -85,6 +87,10 @@ class HuiPictureElementsCard extends EventsMixin(LocalizeMixin(PolymerElement))
     if (!config || !config.image || !Array.isArray(config.elements)) {
       throw new Error('Invalid card configuration');
     }
+    const invalidTypes = config.elements.map(el => el.type).filter(el => !VALID_TYPES.has(el));
+    if (invalidTypes.length) {
+      throw new Error(`Incorrect element types: ${invalidTypes.join(', ')}`);
+    }
 
     this._config = config;
     if (this.$) this._buildConfig();
@@ -106,7 +112,6 @@ class HuiPictureElementsCard extends EventsMixin(LocalizeMixin(PolymerElement))
     img.src = config.image;
     root.appendChild(img);
 
-
     config.elements.forEach((element) => {
       const entityId = element.entity;
       let el;