Re: [WICG/webcomponents] Preventing re-renders prior to first call to `connectedCallback()` (Issue #1081)

Yes, ``attributeChangedCallback`` runs for **every** Observed attribute declared on the Custom Element.  
and **before** the ``connectedCallback``

Attributes (may) drive UI (or other stuff your Element does) so they need to _initialize_ before your Element presents itself in the DOM

Then,

**From [MDN isConnected:](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)**

> The read-only isConnected property returns a boolean indicating whether the node is connected to a Document

It does **NOT** mean the ``connectedCallback`` ran

Maybe ``isDocumentConnected`` would have been a better property name... _water under the bridge_

Can be demonstrated with 2 Custom Element _instances_ in a HTML document:

````html
<my-element id="ONE">  lightDOM  </my-element>
<script>
  customElements.define( "my-element", class extends HTMLElement {
      constructor() {
        super()
        console.log("constructor", this.id, this.isConnected,  this.innerHTML.length)
      }
      connectedCallback() {
        console.log("connectedCallback", this.id, this.isConnected,  this.innerHTML.length)
      }
    },
  )
</script>
<my-element id="TWO">  lightDOM </my-element>
````

**outputs:**
![](https://i.imgur.com/XgriXxz.png)

* ONE was parsed, so the ``constructor`` _can_ access its attributes, its lightDOM, everything

* TWO was not parsed **yet**, the ``constructor`` can NOT access DOM (that does not exist)

Note on #809: the ``connectedCallback`` fires on the **opening** tag, thus Custom Element ONE can reads its lightDOM in the ``connectedCallback`` (because it was parsed before ) and TWO can **NOT**. If you need that lightDOM you have to wait till it was parsed. ``setTimeout`` (1 LOC) is what I usually use, but you have to understand its [intricacies](https://dev.to/dannyengelman/web-component-developers-do-not-connect-with-the-connectedcallback-yet-4jo7). Lit, Shoelace, Solid, etc. etc. etc. all provide something like a ``parsedCallback``. @WebReflection [wrote a solid implementation (77 LOC)](https://github.com/WebReflection/html-parsed-element/blob/master/index.js) you can copy into your own BaseClass

<hr>

**Did connectedCallback ran?**

Yes, that means you have to add your own _semaphore_ for the ``connectedCallback``

Instead of:
````
connectedCallback() {
  if (this.rendered) return
}
render() {
  this.rendered = true;
}
````

I sometimes hack it like this:

````
connectedCallback() {
  this.renderOnce()
  // render again code
}
renderOnce() {
  this.renderOnce = ( ) => {}
  // render once code
}
````

That way I don't need a _semaphore_ in another method I later have to hunt for when refactoring

<hr>

**OPs** wishlist:

_Ideally, I would like one or both of:_

> * A flag that is false before the call to connectedCallback() and true after the initial calls to attributeChangedCallback() for each of the defined attributes.
    * An appropriate flag name might be attributesInitialised or attributesInitialized
    
"attributes initialized" could be a lot of work, There will probably be a mismatch between Observed attributes and declared attributes.
You will (I think) have to do this yourself, because the majority of developers is _not_ going to need this
And again, the ``connectedCallback`` by default runs **after** those ``attributeChangedCallback``

> * A callback that gets called between the initial calls to attributeChangedCallback() and the call to connectedCallback()
    * An appropriate callback name might be attributesInitialisedCallback or attributesInitializedCallback

There is no _"in between"_  
The ``connectedCallback`` will run **after** all (observed attribute) `` attributeChangedCallbacks``; so you know all attributes have _initialized_

HTH


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

Message ID: <WICG/webcomponents/issues/1081/2419072292@github.com>