Re: [WICG/webcomponents] Empty innerHTML/textContent in connectedCallback, but the actual content is rendered (#903)

> I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1673811 on that. Note that `setTimeout` is absolutely the wrong approach here and might very well fire at the wrong time. You want to observe actual mutations to the tree using mutation observers.

@annevk Hi, could you provide a more detailed example.

I tried the following `MutationObserver` code, but the `innerText` is still undefined.

```js
class PyxelRunElement extends HTMLElement {
  static get observedAttributes() {
    return ["root", "name", "script", "packages", "gamepad"];
  }

  observer = new MutationObserver(() => {
    console.log("callback that runs when observer is triggered");
    console.log(`this.innerText: ${this.innerText}`);
  });

  constructor() {
    super();
    // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
    this.observer.observe(this, { subtree: true, childList: true, characterData: true });
  }

  connectedCallback() {
    console.info("connectedCallback");
    // https://github.com/WICG/webcomponents/issues/903
    setTimeout(() => {
      console.log(`this.innerText: ${this.innerText}`);
    }, 0);
  }

  // // Not working
  // renderedCallback() {
  //   console.info("renderedCallback");
  //   console.log(`this.innerText: ${this.innerText}`);
  // }

  attributeChangedCallback(name, _oldValue, newValue) {
    this[name] = newValue;
    console.info(`attributeChangedCallback: ${name} = ${newValue}`);
  }
}

window.customElements.define("pyxel-run", PyxelRunElement);
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/903#issuecomment-1496901466
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/903/1496901466@github.com>