Don't use custom built-in elements because they are not supported in webkit

src/index.js

@@ -11,7 +11,6 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
   proneToggle = document.getElementById('toggle-prone-counter'),
   contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
-  // fileName = localStorage.getItem('map') || (env === 'test' ? 'test_map' : 'map1'),
   fileName = localStorage.getItem('map') || 'scenario-side_show',
   map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
   fileInputEl = document.querySelector('input[type="file"]'),

src/modules/record_sheet.js

@@ -82,7 +82,7 @@ function createRecord(unit) {
   const { dataset: { allegiance, number, squad }} = unit,
     primaryWeapon = unit.querySelector('.primary-weapon'),
     pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
-    div = document.createElement('div', { is: 'soldier-record-block' }),
+    div = document.createElement('soldier-record-block'),
     spans = Array(6).fill('span').map(t => document.createElement(t)),
     [tn, sn, pwt, pwd, pwrs, pwrl] = spans;
 

src/soldier_record_block.js

@@ -1,6 +1,6 @@
 customElements.define(
   'damage-block',
-  class extends HTMLSpanElement {
+  class extends HTMLElement {
     constructor() {
       super();
 
@@ -32,12 +32,11 @@ customElements.define(
       }
     }
   },
-  { extends: 'span' }
 );
 
 customElements.define(
   'soldier-record-block',
-  class extends HTMLDivElement {
+  class extends HTMLElement {
     constructor() {
       super();
 
@@ -52,5 +51,4 @@ customElements.define(
       this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());
     }
   },
-  { extends: 'div' }
 );