containertiming HTML global attribute
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
The containertiming global attribute marks an element as a container root, for which PerformanceContainerTiming entries can be observed by PerformanceObserver objects using the "container" type.
Any paints to new areas inside the container root's subtree contribute to the container's timing (content painted inside the container root itself is excluded, as are repaints to already painted areas).
Timing entries are reported only until the user scrolls or interacts with the page.
Descendant subtrees can be excluded from a container's timing using the containertimingignore attribute.
For more details, see the PerformanceContainerTiming interface.
In the DOM, this attribute is reflected as HTMLElement.containerTiming.
Value
A string that identifies the container.
This is returned in PerformanceContainerTiming.identifier.
Examples
Marking a container root
This example marks two elements as container roots, identified as "hero" and "product-list".
<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 |