Method to display child elements in WebComponent

Question

I'm trying to rebuild a React component into a WebComponent in order to get rid of the dependency on React.

I would like to see a WebComponent like this in HTML:

<editable-h1>Hello, world</editable-h1>

It should look like this:

<span>
  <h1>Hello, world</h1>
  <button onClick=this.onEdit>Edit</button>
</span>

If I click the edit button, I want it to appear like this:

<form>
  <input type='text' value='Hello, world'></input>
  <button onClick=this.onSave>Save</button>
</form>

Clicking the Save button will save the changes to the database via an API call and return to the original rendering (but with the text already edited).

I believe I can handle switching rendering and making API calls, but what I'm confused about is how to get the child element text "Hello, world" from the initial WebComponent in order to render.

Answer 1

Trigger the connectedCallback event on open tag<editable-h1>

So your

Hello World’s innerHTML has not been parsed

To wait until parsing is completed before executing, use

setTimeout

NOTE: All tools and libraries that provide

parsedCallback will use a similar trick under the hood, using requestAnimationFrame or MutationObserver (there are many more lines of code) .

If you think one line of

setTimeout is a hack, or you don't want to waste that millisecond using setTimeout, you can check out Andrea Giammarchi's html- parsed-element code (Of course it requires loading and parsing, and it also increases dependencies and code complexity, so it takes more time overall)

And follow WC experts, this discussion continues:

Need a callback function to execute after the child element changes or parsing is completed https://github.com/WICG/webcomponents/issues/809

All methods boil down to the same goal: Wait for the event loop to be empty

What is an event loop?

https://www.youtube.com/watch?v=8aGhZQkoFbQ

customElements.define("editable-h1", class extends HTMLElement {
  connectedCallback() {
    setTimeout(() => {
      this.innerHTML = `<h1>${this.innerHTML}</h1><button>Edit</button>`;
      
      let h1     = this.querySelector("h1");
      let button = this.querySelector("button");
      
      button.onclick = (evt) => {
        button.innerHTML = (h1.contentEditable = !h1.isContentEditable) 
                              ? (h1.focus(),"Save")
                              : "Edit";
      }
      
    });
  }
});

<editable-h1>Hello World!</editable-h1>

<editable-h1>Hello Web Components World!</editable-h1>