Cleanup Editors and some common elements (#2882)

This is what I do while watching TV 😄

src/panels/lovelace/components/hui-entity-editor.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../types";
@@ -12,16 +15,11 @@ import { EntityConfig } from "../entity-rows/types";
 import "../../../components/entity/ha-entity-picker";
 import { EditorTarget } from "../editor/types";
 
+@customElement("hui-entity-editor")
 export class HuiEntityEditor extends LitElement {
-  protected hass?: HomeAssistant;
-  protected entities?: EntityConfig[];
+  @property() protected hass?: HomeAssistant;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      entities: {},
-    };
-  }
+  @property() protected entities?: EntityConfig[];
 
   protected render(): TemplateResult | void {
     if (!this.entities) {
@@ -29,7 +27,6 @@ export class HuiEntityEditor extends LitElement {
     }
 
     return html`
-      ${this.renderStyle()}
       <h3>Entities</h3>
       <div class="entities">
         ${this.entities.map((entityConf, index) => {
@@ -79,13 +76,11 @@ export class HuiEntityEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        .entities {
-          padding-left: 20px;
-        }
-      </style>
+  static get styles(): CSSResult {
+    return css`
+      .entities {
+        padding-left: 20px;
+      }
     `;
   }
 }
@@ -95,5 +90,3 @@ declare global {
     "hui-entity-editor": HuiEntityEditor;
   }
 }
-
-customElements.define("hui-entity-editor", HuiEntityEditor);