Merge branch 'main' of https://github.com/bloomberg/container-timing

examples/adding-content/index.js

@@ -1,16 +1,13 @@
 window.ctDebug = true;
-// const observer = new ContainerPerformanceObserver((list) => {
-//   list.getEntries().forEach((entry) => {
-//     console.log(entry);
-//   });
-// });
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(window.location.search);
+const nestedStrategy = urlParams.get("nestedStrategy") || "ignore"
 
 const nativeObserver = new PerformanceObserver((v) => {
   console.log(v.getEntries());
 });
 
-nativeObserver.observe({ entryTypes: ["container"] });
-// observer.observe({ nestedStrategy: "transparent" });
+nativeObserver.observe({ type: "container", nestedStrategy: nestedStrategy });
 
 window.setTimeout(() => {
   const innerContainer = document.querySelector(".container div");

index.html

@@ -10,7 +10,10 @@ <h1>Container Timing Examples</h1>
     <ol>
       <li><a href="./examples/table/table.html">Table</a></li>
       <li>
-        <a href="./examples/adding-content/index.html">dynamic content</a>
+        Dynamic content with nested strategy
+        <a href="./examples/adding-content/index.html?nestedStrategy=ignore">ignore</a>,
+        <a href="./examples/adding-content/index.html?nestedStrategy=transparent">transparent</a>,
+        <a href="./examples/adding-content/index.html?nestedStrategy=shadowed">shadowed</a>
       </li>
     </ol>
   </body>

polyfill/polyfill.ts

@@ -1,3 +1,5 @@
+const native_implementation_available = ("PerformanceContainerTiming" in window);
+
 // https://wicg.github.io/element-timing/#performanceelementtiming
 interface PerformanceElementTiming extends PerformanceEntry {
   name: string;
@@ -82,19 +84,25 @@ const mutationObserverCallback = (mutationList: MutationRecord[]) => {
   }
 };
 
-// Wait until the DOM is ready then start collecting elements needed to be timed.
-document.addEventListener("DOMContentLoaded", () => {
-  mutationObserver = new window.MutationObserver(mutationObserverCallback);
-
-  const config = { attributes: false, childList: true, subtree: true };
-  mutationObserver.observe(document, config);
 
-  const elms = document.querySelectorAll(containerTimingAttrSelector);
-  elms.forEach((elm) => {
-    containerRoots.add(elm);
-    ContainerPerformanceObserver.setDescendants(elm);
+// Wait until the DOM is ready then start collecting elements needed to be timed.
+if (!native_implementation_available) {
+  console.debug("Enabling polyfill")
+  document.addEventListener("DOMContentLoaded", () => {
+    mutationObserver = new window.MutationObserver(mutationObserverCallback);
+
+    const config = { attributes: false, childList: true, subtree: true };
+    mutationObserver.observe(document, config);
+
+    const elms = document.querySelectorAll(containerTimingAttrSelector);
+    elms.forEach((elm) => {
+      containerRoots.add(elm);
+      ContainerPerformanceObserver.setDescendants(elm);
+    });
   });
-});
+} else {
+  console.debug("Native implementation of Container Timing available")
+}
 
 class PerformanceContainerTiming implements PerformanceEntry {
   entryType = "container";
@@ -504,4 +512,6 @@ class ContainerPerformanceObserver implements PerformanceObserver {
   }
 }
 
-window.PerformanceObserver = ContainerPerformanceObserver;
+if (!native_implementation_available) {
+  window.PerformanceObserver = ContainerPerformanceObserver;
+}