Try with a different polyfill

Due to documented problems of transpiled ES2015 classes and extending
native constructors (babel/babel/issues/4480), I had to use the V0 api,
it all works fine in development but build is broken

index.html

@@ -52,7 +52,9 @@ <h1>Bitovi Open Source</h1>
       </bit-product>
     </div>
 
-    <script src="./node_modules/@webcomponents/custom-elements/src/native-shim.js"></script>
-    <script src="./node_modules/steal/steal.js"></script>
+    <!-- <script src="./node_modules/steal/steal.js"></script> -->
+
+    <!-- To load app in product modo, use the script tag below instead -->
+    <script src="./dist/steal.production.js"></script>
   </body>
 </html>

index.js

@@ -1,48 +1,56 @@
-import '@webcomponents/custom-elements#?needs-polyfill';
+import 'document-register-element#?needs-polyfill';
 import './styles.css';
 
-class BitProduct extends HTMLElement {
-  constructor() {
-    super();
+document.registerElement('bit-product', {
+  prototype: Object.create(HTMLElement.prototype, {
+    createdCallback: {
+      value() {
+        this.appendChild(this._makeLinkElement());
+      }
+    },
 
-    this.appendChild(this._makeLinkElement());
-  }
+    _makeLinkElement: {
+      value() {
+        let link = document.createElement('a');
 
-  _makeLinkElement() {
-    let link = document.createElement('a');
+        link.href = this.getAttribute('data-url');
+        link.appendChild(this._makeFigureElement());
 
-    link.href = this.getAttribute('data-url');
-    link.appendChild(this._makeFigureElement());
+        return link;
+      }
+    },
 
-    return link;
-  }
+    _makeFigureElement: {
+      value() {
+        let figure = document.createElement('figure');
 
-  _makeFigureElement() {
-    let figure = document.createElement('figure');
 
+        figure.appendChild(this._makeImageElement());
+        figure.appendChild(this._makeCaptionElement());
 
-    figure.appendChild(this._makeImageElement());
-    figure.appendChild(this._makeCaptionElement());
+        return figure;
+      }
+    },
 
-    return figure;
-  }
+    _makeImageElement: {
+      value() {
+        let img = document.createElement('img');
 
-  _makeImageElement() {
-    let img = document.createElement('img');
+        img.alt = this.getAttribute('data-name');
+        img.src = this.getAttribute('data-img');
+        img.className = 'product-img';
 
-    img.alt = this.getAttribute('data-name');
-    img.src = this.getAttribute('data-img');
-    img.className = 'product-img';
+        return img;
+      },
+    },
 
-    return img;
-  }
+    _makeCaptionElement: {
+      value() {
+        let caption = document.createElement('figcaption');
 
-  _makeCaptionElement() {
-    let caption = document.createElement('figcaption');
-
-    caption.innerText = this.getAttribute('data-caption');
-    return caption;
-  }
-}
-
-customElements.define('bit-product', BitProduct);
+        caption.innerText = this.getAttribute('data-caption');
+        return caption;
+      }
+    }
+  })
+});

needs-polyfill.js

@@ -1 +1,10 @@
-export default (typeof customElements === 'undefined');
+// Only NodeJS has a process variable that is of [[Class]] process
+const __process =  typeof process !== 'undefined' ? process : 0;
+const isNodeJS = Object.prototype.toString.call(__process) === '[object process]';
+
+// prevent undefined reference errors during build, only needed because
+// steal-conditional will load this module during build to make sure it is
+// added to the main bundle
+export default isNodeJS ?
+  null :
+  typeof document.registerElement === 'undefined';

package.json

@@ -6,11 +6,11 @@
   "author": "Bitovi",
   "license": "MIT",
   "scripts": {
-    "build": "steal-tools",
+    "build": "rm -rf dist && steal-tools",
     "test": "jshint *.js --config .jshintrc"
   },
   "devDependencies": {
-    "@webcomponents/custom-elements": "^1.0.0-alpha.3",
+    "document-register-element": "^1.3.0",
     "jshint": "^2.9.4",
     "steal": "^1.0.0-rc.9",
     "steal-conditional": "^0.2.1",