Attachment 346427 Details for Bug 188284 – A page with custom elements that log when their constructor and connectedCallback are called.

A page with custom elements that log when their constructor and connectedCallback are called.

safariCEParserCreatedOrder.html (text/html), 754 bytes, created by Russell Bicknell on 2018-08-02 16:32:38 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Russell Bicknell

Created: 2018-08-02 16:32:38 PDT

Size: 754 bytes

patch

obsolete

<!doctype html>

<script>
let order = 0;
class CE extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML = `
      [<span id="log"></span>] <slot></slot>
    `;
    this._log(`constructor ${order++}`);
  }

  connectedCallback() {
    this._log(`, connectedCallback ${order++}`);
  }

  _log(text) {
    this.shadowRoot.querySelector('#log').appendChild(new Text(text));
  }
}
customElements.define('c-e', CE);
</script>

<c-e>
  <c-e>
    <c-e></c-e>
    <c-e></c-e>
  </c-e>
  <c-e>
    <c-e></c-e>
    <c-e></c-e>
  </c-e>
</c-e>
<c-e>
  <c-e></c-e>
  <c-e></c-e>
</c-e>

<style>
c-e {
  display: block;
  margin: 2px;
  border: 1px solid gray;
  padding: 2px;
}

c-e c-e {
  margin-left: 2ch;
}
</style>

Actions: View

Attachments on bug 188284: 346427