diff --git a/static/js/components/base-component.js b/static/js/components/base-component.js
index 5cc352e62a..02ab9bfb7d 100644
--- a/static/js/components/base-component.js
+++ b/static/js/components/base-component.js
@@ -12,6 +12,7 @@
 class BaseComponent extends HTMLElement {
   constructor(template) {
     super();
+    this.idSuffix = `-${BaseComponent.count++}`;
     this.attachShadow({mode: 'open'});
     const templateClone = template.content.cloneNode(true);
     // Detect whether ShadowRoot has been polyfilled on this browser
@@ -44,4 +45,5 @@ class BaseComponent extends HTMLElement {
   }
 }
 
+BaseComponent.count = 0;
 module.exports = BaseComponent;
diff --git a/static/js/components/property/action.js b/static/js/components/property/action.js
index ce4b16d248..a730b57bef 100644
--- a/static/js/components/property/action.js
+++ b/static/js/components/property/action.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class Action extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -77,20 +79,18 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-action-container">
-    <div id="contents" class="webthing-action-contents">
-      <button id="button" type="button" class="webthing-action-button"></button>
+  <div id="container-${BaseComponent.count}" class="webthing-action-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-action-contents">
+      <button id="button-${BaseComponent.count}" type="button" class="webthing-action-button"></button>
     </div>
   </div>
-  <div id="name" class="webthing-action-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-action-name"></div>
 `;
 
-class Action extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._button = this.shadowRoot.querySelector('#button');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._button = this.shadowRoot.querySelector(`#button${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
     this._href = null;
 
     this._onClick = this.__onClick.bind(this);
diff --git a/static/js/components/property/boolean.js b/static/js/components/property/boolean.js
index 032c9fce38..f2f80df36c 100644
--- a/static/js/components/property/boolean.js
+++ b/static/js/components/property/boolean.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class BooleanProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -70,26 +72,24 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-boolean-property-container">
-    <div id="contents" class="webthing-boolean-property-contents">
-      <form id="form" class="webthing-boolean-property-form">
-        <input type="checkbox" id="checkbox"
+  <div id="container-${BaseComponent.count}" class="webthing-boolean-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-boolean-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-boolean-property-form">
+        <input type="checkbox" id="checkbox-${BaseComponent.count}"
           class="webthing-boolean-property-checkbox">
-        <label id="label" for="checkbox"
+        <label id="label" for="checkbox-${BaseComponent.count}"
           class="webthing-boolean-property-label">
         </label>
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-boolean-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-boolean-property-name"></div>
 `;
 
-class BooleanProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#checkbox');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#checkbox${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onClick = this.__onClick.bind(this);
     this._onKeyUp = this.__onKeyUp.bind(this);
diff --git a/static/js/components/property/color.js b/static/js/components/property/color.js
index 8b956648c6..7a85eff0f0 100644
--- a/static/js/components/property/color.js
+++ b/static/js/components/property/color.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class ColorProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -46,20 +48,18 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-color-property-container">
-    <div id="contents" class="webthing-color-property-contents">
-      <input type="color" id="color" class="webthing-color-property-color">
+  <div id="container-${BaseComponent.count}" class="webthing-color-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-color-property-contents">
+      <input type="color" id="color-${BaseComponent.count}" class="webthing-color-property-color">
     </div>
   </div>
-  <div id="name" class="webthing-color-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-color-property-name"></div>
 `;
 
-class ColorProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#color');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#color${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
   }
diff --git a/static/js/components/property/enum.js b/static/js/components/property/enum.js
index 8c5009ecef..8e525f49c0 100644
--- a/static/js/components/property/enum.js
+++ b/static/js/components/property/enum.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class EnumProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -64,22 +66,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-enum-property-container">
-    <div id="contents" class="webthing-enum-property-contents">
-      <select id="select" class="webthing-enum-property-select"></select>
-      <div id="unit" class="webthing-enum-property-unit"></div>
+  <div id="container-${BaseComponent.count}" class="webthing-enum-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-enum-property-contents">
+      <select id="select-${BaseComponent.count}" class="webthing-enum-property-select"></select>
+      <div id="unit-${BaseComponent.count}" class="webthing-enum-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-enum-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-enum-property-name"></div>
 `;
 
-class EnumProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._select = this.shadowRoot.querySelector('#select');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._select = this.shadowRoot.querySelector(`#select${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._type = 'string';
 
diff --git a/static/js/components/property/label.js b/static/js/components/property/label.js
index 6eb9343d38..ecff04622a 100644
--- a/static/js/components/property/label.js
+++ b/static/js/components/property/label.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class LabelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -51,22 +53,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-label-property-container">
-    <div id="contents" class="webthing-label-property-contents">
-      <span id="value" class="webthing-label-property-value">
-      </span><span id="unit" class="webthing-label-property-unit"></span>
+  <div id="container-${BaseComponent.count}" class="webthing-label-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-label-property-contents">
+      <span id="value-${BaseComponent.count}" class="webthing-label-property-value">
+      </span><span id="unit-${BaseComponent.count}" class="webthing-label-property-unit"></span>
     </div>
   </div>
-  <div id="name" class="webthing-label-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-label-property-name"></div>
 `;
 
-class LabelProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._name = this.shadowRoot.querySelector('#name');
-    this._value = this.shadowRoot.querySelector('#value');
-    this._unit = this.shadowRoot.querySelector('#unit');
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
+    this._value = this.shadowRoot.querySelector(`#value${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
     this._precision = 0;
   }
 
diff --git a/static/js/components/property/level.js b/static/js/components/property/level.js
index 438b37e652..779232ae60 100644
--- a/static/js/components/property/level.js
+++ b/static/js/components/property/level.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class LevelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -93,35 +95,32 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-level-property-container">
-    <div id="contents" class="webthing-level-property-contents">
-      <div id="text" class="webthing-level-property-text hidden"></div>
-      <div id="bar-container"
+  <div id="container-${BaseComponent.count}" class="webthing-level-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-level-property-contents">
+      <div id="text-${BaseComponent.count}" class="webthing-level-property-text hidden"></div>
+      <div id="bar-container-${BaseComponent.count}"
         class="webthing-level-property-bar-container hidden">
-        <span id="bar" class="webthing-level-property-bar"></span>
+        <span id="bar-${BaseComponent.count}" class="webthing-level-property-bar"></span>
       </div>
-      <form id="form" class="webthing-level-property-form">
-        <input type="number" id="number" class="webthing-level-property-number">
+      <form id="form-${BaseComponent.count}" class="webthing-level-property-form-${BaseComponent.count}">
+        <input type="number" id="number-${BaseComponent.count}" class="webthing-level-property-number">
         <input type="range" id="slider" class="webthing-level-property-slider">
       </form>
-      <div id="unit" class="webthing-level-property-unit"></div>
+      <div id="unit-${BaseComponent.count}" class="webthing-level-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-level-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-level-property-name"></div>
 `;
-
-class LevelProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._text = this.shadowRoot.querySelector('#text');
-    this._barContainer = this.shadowRoot.querySelector('#bar-container');
-    this._bar = this.shadowRoot.querySelector('#bar');
-    this._form = this.shadowRoot.querySelector('#form');
-    this._number = this.shadowRoot.querySelector('#number');
-    this._slider = this.shadowRoot.querySelector('#slider');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._text = this.shadowRoot.querySelector(`#text${this.idSuffix}`);
+    this._barContainer = this.shadowRoot.querySelector(`#bar-container${this.idSuffix}`);
+    this._bar = this.shadowRoot.querySelector(`#bar${this.idSuffix}`);
+    this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+    this._number = this.shadowRoot.querySelector(`#number${this.idSuffix}`);
+    this._slider = this.shadowRoot.querySelector(`#slider`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
     this._onClick = this.__onClick.bind(this);
diff --git a/static/js/components/property/number.js b/static/js/components/property/number.js
index 53cecb6c01..61c2485472 100644
--- a/static/js/components/property/number.js
+++ b/static/js/components/property/number.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class NumberProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -72,26 +74,23 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-number-property-container">
-    <div id="contents" class="webthing-number-property-contents">
-      <form id="form" class="webthing-number-property-form">
-        <input type="number" id="input"
+  <div id="container-${BaseComponent.count}" class="webthing-number-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-number-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-number-property-form">
+        <input type="number" id="input-${BaseComponent.count}"
           class="webthing-number-property-input hide-spinner">
       </form>
-      <div id="unit" class="webthing-number-property-unit"></div>
+      <div id="unit-${BaseComponent.count}" class="webthing-number-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-number-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-number-property-name"></div>
 `;
-
-class NumberProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._form = this.shadowRoot.querySelector('#form');
-    this._input = this.shadowRoot.querySelector('#input');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+    this._input = this.shadowRoot.querySelector(`#input${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onClick = this.__onClick.bind(this);
     this._onSubmit = this.__onSubmit.bind(this);
diff --git a/static/js/components/property/slider.js b/static/js/components/property/slider.js
index 2b024e3da7..254d4d5fba 100644
--- a/static/js/components/property/slider.js
+++ b/static/js/components/property/slider.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class SliderProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -57,22 +59,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-slider-property-container">
-    <div id="contents" class="webthing-slider-property-contents">
-      <form id="form" class="webthing-slider-property-form">
-        <input type="range" id="slider" class="webthing-slider-property-slider">
+  <div id="container-${BaseComponent.count}" class="webthing-slider-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-slider-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-slider-property-form">
+        <input type="range" id="slider-${BaseComponent.count}" class="webthing-slider-property-slider">
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-slider-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-slider-property-name"></div>
 `;
 
-class SliderProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#slider');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#slider${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
   }
diff --git a/static/js/components/property/string.js b/static/js/components/property/string.js
index f1d3def246..2fd25dda2b 100644
--- a/static/js/components/property/string.js
+++ b/static/js/components/property/string.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class StringProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -59,23 +61,21 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-string-property-container">
-    <div id="contents" class="webthing-string-property-contents">
-      <form id="form" class="webthing-string-property-form">
-        <input type="text" id="input" class="webthing-string-property-input">
+  <div id="container-${BaseComponent.count}" class="webthing-string-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-string-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-string-property-form">
+        <input type="text" id="input-${BaseComponent.count}" class="webthing-string-property-input">
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-string-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-string-property-name"></div>
 `;
 
-class StringProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._form = this.shadowRoot.querySelector('#form');
-    this._input = this.shadowRoot.querySelector('#input');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+    this._input = this.shadowRoot.querySelector(`#input${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onSubmit = this.__onSubmit.bind(this);
     this._onBlur = this.__onBlur.bind(this);
diff --git a/static/js/components/property/switch.js b/static/js/components/property/switch.js
index 40548d0286..2acd3abe7a 100644
--- a/static/js/components/property/switch.js
+++ b/static/js/components/property/switch.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class SwitchProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -62,7 +64,7 @@ template.innerHTML = `
       transition: 0.1s;
     }
 
-    .webthing-switch-property-switch:checked + #slider::after {
+    .webthing-switch-property-switch:checked + #slider-${BaseComponent.count}::after {
       transform: translate(3.65rem, 0.35rem);
     }
 
@@ -80,27 +82,25 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-switch-property-container">
-    <div id="contents" class="webthing-switch-property-contents">
+  <div id="container-${BaseComponent.count}" class="webthing-switch-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-switch-property-contents">
       <form>
-        <input type="checkbox" id="switch"
+        <input type="checkbox" id="switch-${BaseComponent.count}"
           class="webthing-switch-property-switch">
-        <label id="slider" for="switch" class="webthing-switch-property-slider">
+        <label id="slider-${BaseComponent.count}" for="switch-${BaseComponent.count}" class="webthing-switch-property-slider">
         </label>
       </form>
-      <div id="label" class="webthing-switch-property-label"></div>
+      <div id="label-${BaseComponent.count}" class="webthing-switch-property-label"></div>
     </div>
   </div>
-  <div id="name" class="webthing-switch-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-switch-property-name"></div>
 `;
 
-class SwitchProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#switch');
-    this._name = this.shadowRoot.querySelector('#name');
-    this._label = this.shadowRoot.querySelector('#label');
+    this._input = this.shadowRoot.querySelector(`#switch${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
+    this._label = this.shadowRoot.querySelector(`#label${this.idSuffix}`);
 
     this._onClick = this.__onClick.bind(this);
     this._onKeyUp = this.__onKeyUp.bind(this);