contenteditable lit-element

content-element-input.js

import { LitElement, html, css } from "lit";
import { property, customElement } from "lit/decorators.js";

@customElement("content-element-input")
class ContentElementInput extends LitElement {
  @property({ type: Boolean })
  contentEditable = true;

  @property({ type: String })
  placeholder = "";

  static styles = css`
    :host {
      display: block;
    }

    slot {
      display: block;
    }

    slot:focus {
      outline: none;
    }

    slot:focus:empty::before {
      content: attr(placeholder);
    }
  `;

  render() {
    return html`<slot
      ?contenteditable=${this.contentEditable}
      placeholder=${this.placeholder}
    ></slot>`;
  }
}