get it working

button-group.js

@@ -1,22 +1,27 @@
 export class ButtonGroup extends HTMLElement {
   constructor() {
     super()
-    this.attachShadow({open: true})
+    this.attachShadow({mode: 'open'})
   }
 
   connectedCallback() {
     const style = document.createElement('style')
-    style.value = `
+    style.textContent = `
       :host {
         display: flex;
-        direction: row-reverse;
+        flex-direction: row-reverse;
         gap: 5px;
       }
       button {
+        font-size: 16px;
         font-family: sans-serif;
         font-weight: normal;
         background: #111;
         color: #eee;
+        margin: 0;
+        border: none;
+        padding: 5px 10px;
+        border-radius: 3px;
       }
     `
     this.shadowRoot.appendChild(style)
@@ -26,7 +31,7 @@ export class ButtonGroup extends HTMLElement {
     const el = document.createElement('button')
     el.innerText = text
     el.classList.add(cls)
-    el.addEventListener('click', () => handler)
+    el.addEventListener('click', handler)
     this.shadowRoot.appendChild(el)
     return el
   }