containertiming HTML global attribute
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The containertiming global attribute marks an element as a container root for observation by PerformanceObserver objects using the "container" type.
Its value is a string that identifies the container.
For more details, see the PerformanceContainerTiming interface.
In the DOM, this attribute is reflected as HTMLElement.containerTiming.
Description
Any newly-painted content inside the container root's subtree contributes to the container's timing, including content painted inside a nested container root; that content also counts toward the ancestor containers' timing.
Descendant subtrees can be excluded from a container's timing using the containertimingignore attribute.
Examples
Marking a container root
<section containertiming="hero">
<h1>Welcome</h1>
<img src="hero.jpg" alt="" />
</section>
<div containertiming="product-list">
<!-- product cards -->
</div>
Specifications
| Specification |
|---|
| Container Timing API # dom-htmlelement-containertiming |