updated for derivative state prototype

src/components/badge/badge.jsx

@@ -0,0 +1,30 @@
+export const inferredObservability = true;
+
+export default class BadgeComponent extends HTMLElement {
+
+  constructor() {
+    super();
+
+    this.counter = 0;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const { counter } = this;
+    const condition = ` (${counter % 2 === 0 ? 'even' : 'odd'}) `;
+    // const conditionalClass = ` (${predicate ? 'even' : 'odd'}) `;
+    // const conditionalText = predicate ? ' 🥳' : '';
+
+    // TODO  <span class={conditionalClass}>{counter}<span>{conditionalText}</span></span>
+    // should have attr AND text instructions
+    // though technically conditionalClass should only observe off predicate
+    return (
+      <span><span>{counter}</span><span>{condition}</span></span>
+    );
+  }
+}
+
+customElements.define('wcc-badge', BadgeComponent);

src/components/counter/counter.jsx

@@ -1,3 +1,5 @@
+import '../badge/badge.jsx';
+
 export const inferredObservability = true;
 
 export default class Counter extends HTMLElement {
@@ -16,7 +18,7 @@ export default class Counter extends HTMLElement {
     return (
       <div>
         <button onclick={this.count -= 1}> -</button>
-        <span>You have clicked {count} times !!!</span>
+        <span>You have clicked <wcc-badge counter={count}></wcc-badge> times !!!</span>
         <button onclick={this.count += 1}> +</button>
       </div>
     );

src/index.html

@@ -53,8 +53,6 @@
       window.addEventListener('load', () => {
         counter = document.getElementsByTagName('wcc-counter')[0];
 
-        counter.setAttribute('count', 0);
-
         document.getElementById('start').addEventListener('click', () => {
           startIncrement();
         });