use fat arrows in class

components/example.js

@@ -6,6 +6,7 @@ export default function Example({ title, children }) {
       <style jsx>{`
         h2 {
           margin: 0;
+          margin-bottom: var(--spacing-small);
         }
         section {
           border: 3px solid var(--moz-green);

pages/web-components-in-react.js

@@ -27,14 +27,12 @@ export default function WCInReact() {
       </Example>
       <Example title="Nøstede komponenter">
         <WebComponentLoader load={['fancy-border']}>
-          <fancy-border color="green">
-            <p className="fancy-border">
-              Her er noe JSX tekst inni fancy-border.
-            </p>
+          <fancy-border color="green" party="false">
+            <span>Her er noe JSX tekst inni fancy-border.</span>
           </fancy-border>
           <p>Men kva skjer om me freister å style innholdet inni?</p>
         </WebComponentLoader>
-        <style jsx global>
+        {/* <style jsx global>
           {`
             .fancy-border {
               padding: 12px;
@@ -42,7 +40,7 @@ export default function WCInReact() {
             }
           `}
         </style>
-        <div className="fancy-border">just a test</div>
+        <div className="fancy-border">just a test</div> */}
       </Example>
     </>
   )

public/chill-counter-v2.js

@@ -8,8 +8,6 @@
       super()
       this.counter = 0
       this.root = this.attachShadow({ mode: 'open' })
-      this.increment = this.increment.bind(this)
-      this.decrement = this.decrement.bind(this)
     }
 
     connectedCallback() {
@@ -30,12 +28,12 @@
       h.cleanup()
     }
 
-    increment() {
+    increment = () => {
       this.counter++
       this.counterDiv.textContent = `Counter: ${this.counter}`
     }
 
-    decrement() {
+    decrement = () => {
       this.counter--
       this.counterDiv.textContent = `Counter: ${this.counter}`
     }

public/fancy-border.js

@@ -1,7 +1,12 @@
-;(async function () {
+;(function () {
   // Inspired by: https://alligator.io/web-components/attributes-properties/
   const template = document.createElement('template')
   template.innerHTML = `
+    <style>
+      div {
+        padding: 12px;
+      }
+    </style>
     <div>
       <slot></slot>
     </div>
@@ -24,10 +29,7 @@
       this.root = this.attachShadow({ mode: 'open' })
       this.root.appendChild(template.content.cloneNode(true))
       this.borderDiv = this.root.querySelector('div')
-      this.borderStyle = borderStyles[0]
-      this.flipBorder = this.flipBorder.bind(this)
-      this.renderBorder = this.renderBorder.bind(this)
-      this.checkIfParty = this.checkIfParty.bind(this)
+      this.borderStyle = 'solid'
     }
 
     static get observedAttributes() {
@@ -43,11 +45,11 @@
       }
     }
 
-    renderBorder() {
+    renderBorder = () => {
       this.borderDiv.style = `border: 5px ${this.borderStyle} ${this.color}`
     }
 
-    checkIfParty() {
+    checkIfParty = () => {
       const isParty = this.getAttribute('party')
       if (isParty === 'true' && !this.intervalID) {
         this.intervalID = setInterval(this.flipBorder, 1000)
@@ -57,7 +59,7 @@
       }
     }
 
-    flipBorder() {
+    flipBorder = () => {
       const currentIndex = borderStyles.indexOf(this.borderStyle)
       if (currentIndex === borderStyles.length - 1) {
         this.borderStyle = borderStyles[0]