From 2f4132dc0cf81d685e8395f20395ba532a350ec9 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Wed, 15 May 2024 20:47:46 +0200
Subject: [PATCH] embed codepen example for reactivity

---
 ...3-12-21-reactive-custom-elements-with-html-dataset.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/_posts/2023-12-21-reactive-custom-elements-with-html-dataset.md b/_posts/2023-12-21-reactive-custom-elements-with-html-dataset.md
index eec0aa2..a152f39 100644
--- a/_posts/2023-12-21-reactive-custom-elements-with-html-dataset.md
+++ b/_posts/2023-12-21-reactive-custom-elements-with-html-dataset.md
@@ -28,6 +28,13 @@ Here we want to use standard APIs available for custom elements: `HTMLElement.da
 
 Let's consider the following code example (also [in CodePen &rarr;](https://codepen.io/ayoayco-the-styleful/pen/abMbvbo?editors=1010)):
 
+<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="abMbvbo" data-pen-title="Custom Element Reactivity" data-user="ayoayco-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+  <span>See the Pen <a href="https://codepen.io/ayoayco-the-styleful/pen/abMbvbo">
+  Custom Element Reactivity</a> by Ayo Ayco (<a href="https://codepen.io/ayoayco-the-styleful">@ayoayco-the-styleful</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+
 ```js
 class Counter extends HTMLElement {
   static observedAttributes = ["data-count"];
@@ -78,4 +85,4 @@ That's it really. I still use vanilla `HTMLElement` custom elements, and in fact
 
 But for things that need reactivity with real JS values as properties... I have a tiny, minimalistic base class for that. :)
 
-Check it out on [GitHub](https://ayco.io/gh/web-component-base). ✨
\ No newline at end of file
+Check it out on [GitHub](https://ayco.io/gh/web-component-base). ✨