Set contenteditable focus in shadowDOM

by dannye

HTML

<ce-main></ce-main>

<script>
  customElements.define("ce-main",
    class extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        this.attachShadow({
          mode: "open"
        }).innerHTML = `<style>
            ce-leaf {
            	  display: block;
                padding: .5em;
                cursor: text;
                counter-increment: leafCounter;
            }
            ce-leaf:empty::before {
            	  color: grey;
                content: "placeholder text #" counter(leafCounter);
            }      
            *:focus{
                background: lightgreen;
            }
        </style>` + '<ce-leaf></ce-leaf>'.repeat(10);
      }
    });

  customElements.define("ce-leaf", class extends HTMLElement {
    constructor() {
      super();
      this.addEventListener("click", evt => {
        this.contentEditable = true;
        this.focus();
      });
      this.addEventListener("blur", evt => {
        this.contentEditable = false;
      });
    }
  });
</script>