PerformanceContainerTiming: rootElement property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility
Learn more

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The rootElement read-only property of the PerformanceContainerTiming interface returns the container root — the element carrying the containertiming attribute that this entry describes.

Value

An HTMLElement, or null if there is none.

Examples

Logging the root element of a container

This example demonstrates that rootElement always returns the same container root, however many entries are reported for it.

HTML

First we define a <section> element that is marked as a container root with the containertiming attribute identified as "hero", along with two buttons: one to add more content to the container, and one to reset it.

html

<section containertiming="hero">
  <h2>Hero content</h2>
</section>
<button id="add">Add element</button>
<button id="reset">Reset</button>

Note that there is also hidden HTML (and code) for displaying log information.

<pre id="log"></pre>

#log {
  height: 250px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

The following code first checks if there are any "container" entries: if not, it logs that the feature is not supported. It then creates a PerformanceObserver that logs each entry's rootElement, and whether it's the same element as the <section> in the page.

const container = document.querySelector("section");
let count = 0;

if (PerformanceObserver.supportedEntryTypes.includes("container")) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      log(`rootElement is container: ${entry.rootElement === container}`);
    }
  });
  observer.observe({ type: "container", buffered: true });
} else {
  log("This feature is not supported by your browser.");
}

We then define click event handlers to add a new paragraph to the container, triggering a new paint event and timing entry, and to reset the example.

document.querySelector("#add").addEventListener("click", () => {
  count++;
  const paragraph = document.createElement("p");
  paragraph.textContent = `New paragraph ${count}`;
  container.appendChild(paragraph);
});

document.querySelector("#reset").addEventListener("click", () => {
  window.location.reload(true);
});

Result

Click "Add element" to add new elements. Each element should trigger a new log confirming that rootElement still refers to the same container root. Then click "Reset" to restart the example.

Specifications

Specification
Container Timing API # dom-performancecontainertiming-rootelement

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content