ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

embed codepen example for reactivity

Browse source
This commit is contained in:
Ayo Ayco 2024-05-15 20:47:46 +02:00
parent e99ab10064
commit 2f4132dc0c
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_posts/2023-12-21-reactive-custom-elements-with-html-dataset.md
View file

@ -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 →](https://codepen.io/ayoayco-the-styleful/pen/abMbvbo?editors=1010)): Let's consider the following code example (also [in CodePen →](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 ```js
class Counter extends HTMLElement { class Counter extends HTMLElement {
static observedAttributes = ["data-count"]; 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. :) 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). ✨ Check it out on [GitHub](https://ayco.io/gh/web-component-base). ✨