[whatwg/dom] [shadow-dom] Why does attributeChangedCallback fire before connectedCallback during parsing? (#899)

It's a bit weird because you expect to use `connectedCallback` to initialize things, then `attributeChangedCallback` in between `connectedCallback` and `disconnectedCallback` in the parse case (constructing and changing attributes before connecting an element imperatively is valid but is a different use case).

The follow code throws an error:

```html
{
  // pretend this is an element you import from some library.
  class CoolElement extends HTMLElement {
    connectedCallback() {
      console.log('connectedCallback')
      this.root = this.attachShadow({mode: 'closed'})
      this.root.innerHTML = `
        <div style="border: 10px solid cornflowerblue">
          <slot></slot>
        </div>
      `
    }

    static observedAttributes = ['color']

    attributeChangedCallback(attributeName, oldValue, newValue) {
      console.log('attributeChangedCallback')
      if (attributeName === 'color') {
        this.root.children[0].style = 'border: 10px solid ' + (newValue || 'cornflowerblue')
      }
    }
  }

  customElements.define('cool-element', CoolElement)


  // pretend this is the end user code that consumes the cool element.
  document.body.innerHTML = `
    <cool-element>
      <p>This is a paragraph of text.</p>
    </cool-element>


    <cool-element color="deeppink">
      <p>This is a paragraph of text.</p>
    </cool-element>


    <cool-element color="rebeccapurple">
      <p>This is a paragraph of text.</p>
    </cool-element>
  `
}
```


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/899