diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index a937455..50a6188 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -31,6 +31,7 @@ jobs:
node-version: 21
- name: Install & build TypeScript
run: |
+ cd polyfill
npm ci
npm run build
- name: Setup Pages
diff --git a/docs/img/container-timing-demo.gif b/docs/img/container-timing-demo.gif
new file mode 100644
index 0000000..6454715
Binary files /dev/null and b/docs/img/container-timing-demo.gif differ
diff --git a/docs/polyfill.md b/docs/polyfill.md
index 9f8bcb1..4907e7a 100644
--- a/docs/polyfill.md
+++ b/docs/polyfill.md
@@ -1,8 +1,23 @@
## Container Timing: Polyfill
-This polyfill should be loaded in the head or as early as possible so it can annotate elements needed for timing when the observer runs. At the very latest it should be loaded before you make the call to initiate the observer.
+This polyfill simulates Container Timing in your browser, it relies heavily on element-timing internally which means as of this writing it only works on Chromium-based browsers.
-Once added to the top of your page you can then use the `ContainerPerformanceObserver` to mark entries. The `ContainerPerformanceObserver` behaves very similarly to the `PerformanceObserver` but is only useful for this specific metric. You will also need to mark containers you're interested in tracking with the `containertiming` attribute (See [update below](#update-22022024)), just like you would on individual elements. See the example below:
+This will need to be loaded in the head or as early as possible so that it can override the built-in PerformanceObserver and mark elements needing to be timed (those underneath a `containertiming` attribute).
+
+Once added, you can mark containers you're interested in with the `containertiming` attribute and use the `container` entryType in the PerformanceObserver. You can also see the examples folder for an idea on how to use the polyfill.
+
+## Setup
+
+Right now this polyfill is not on npm, so you will need to build and run locally. Go to the polyfill directory then run these steps:
+
+- `npm i`
+- `npm run build`
+- Open up one of the example html files
+- Check the dev tools console
+
+## Demo
+
+![img](../docs/img/container-timing-demo.gif)
**Markup**
diff --git a/examples/adding-content/index.js b/examples/adding-content/index.js
index 29a730e..26e04a8 100644
--- a/examples/adding-content/index.js
+++ b/examples/adding-content/index.js
@@ -1,16 +1,16 @@
window.ctDebug = true;
-const observer = new ContainerPerformanceObserver((list) => {
- list.getEntries().forEach((entry) => {
- console.log(entry);
- });
-});
+// const observer = new ContainerPerformanceObserver((list) => {
+// list.getEntries().forEach((entry) => {
+// console.log(entry);
+// });
+// });
const nativeObserver = new PerformanceObserver((v) => {
- console.log(v);
+ console.log(v.getEntries());
});
nativeObserver.observe({ entryTypes: ["container"] });
-observer.observe({ nestedStrategy: "transparent" });
+// observer.observe({ nestedStrategy: "transparent" });
window.setTimeout(() => {
const innerContainer = document.querySelector(".container div");
diff --git a/examples/shadow-dom/index.js b/examples/shadow-dom/index.js
index 68f27be..d51bd9c 100644
--- a/examples/shadow-dom/index.js
+++ b/examples/shadow-dom/index.js
@@ -4,7 +4,7 @@ const observer = new PerformanceObserver((list) => {
});
});
-observer.observe({ type: "element", buffered: true });
+observer.observe({ entryTypes: ["container"] });
window.setTimeout(() => {
const host = document.querySelector("#host");
diff --git a/examples/svg/index.html b/examples/svg/index.html
index ffb7db5..4398e3f 100644
--- a/examples/svg/index.html
+++ b/examples/svg/index.html
@@ -7,7 +7,7 @@