diff --git a/src/test/browser/page-object/thing-detail-page.js b/src/test/browser/page-object/thing-detail-page.js
index 55e5d626d..d9d27718b 100644
--- a/src/test/browser/page-object/thing-detail-page.js
+++ b/src/test/browser/page-object/thing-detail-page.js
@@ -102,7 +102,7 @@ class BrightnessPropertySection extends InputPropertySection {
 class LevelPropertySection extends InputPropertySection {
   constructor(browser, rootElement) {
     super(browser, rootElement);
-    this.defineElement('slider', '#slider');
+    this.defineElement('slider', '#slider-level-6');
   }
 
   async setValue(value) {
diff --git a/static/js/components/capability/label.js b/static/js/components/capability/label.js
index 2b121fe96..9dd74cee1 100644
--- a/static/js/components/capability/label.js
+++ b/static/js/components/capability/label.js
@@ -54,8 +54,10 @@ class LabelCapability extends BaseComponent {
   constructor() {
     super(template);
 
-    this._value = this.shadowRoot.querySelector('#value');
-    this._unit = this.shadowRoot.querySelector('#unit');
+    this._value = this.shadowRoot.querySelector(
+      '.webthing-label-capability-value');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-label-capability-unit');
     this._precision = 0;
     this._level = 0;
   }
diff --git a/static/js/components/capability/multi-level-switch.js b/static/js/components/capability/multi-level-switch.js
index edbed769d..be98a11c9 100644
--- a/static/js/components/capability/multi-level-switch.js
+++ b/static/js/components/capability/multi-level-switch.js
@@ -79,10 +79,12 @@ const ON_BLANK = 'white';
 class MultiLevelSwitchCapability extends BaseComponent {
   constructor() {
     super(template);
-
-    this._container = this.shadowRoot.querySelector('#container');
-    this._bar = this.shadowRoot.querySelector('#bar');
-    this._label = this.shadowRoot.querySelector('#label');
+    this._container = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-container');
+    this._bar = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-bar');
+    this._label = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-label');
     this._on = false;
     this._level = 0;
     this._onClick = this.__onClick.bind(this);
diff --git a/static/js/components/property/action.js b/static/js/components/property/action.js
index 4a18f98c3..f3f254989 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,19 @@ 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(
+      '.webthing-action-button');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-action-name');
     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 665ee1d10..679591ddc 100644
--- a/static/js/components/property/boolean.js
+++ b/static/js/components/property/boolean.js
@@ -72,9 +72,9 @@ class BooleanProperty extends BaseComponent {
       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">
+  <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 class="webthing-boolean-property-label" for='checkbox-${BaseComponent.count}'>
@@ -82,7 +82,7 @@ class BooleanProperty extends BaseComponent {
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-boolean-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-boolean-property-name"></div>
 `;
     super(template);
     this._input =
diff --git a/static/js/components/property/color.js b/static/js/components/property/color.js
index edab69a6a..11dd3ee5c 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,19 @@ 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(
+      '.webthing-color-property-color');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-color-property-name');
 
     this._onChange = this.__onChange.bind(this);
   }
diff --git a/static/js/components/property/enum.js b/static/js/components/property/enum.js
index e1970bcdf..81775bff3 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,22 @@ 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(
+      '.webthing-enum-property-select');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-enum-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-enum-property-name');
 
     this._type = 'string';
 
diff --git a/static/js/components/property/level.js b/static/js/components/property/level.js
index 3b0d6b0f5..8594ca493 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,40 @@ 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">
-        <input type="range" id="slider" class="webthing-level-property-slider">
+      <form id="form-${BaseComponent.count}" class="webthing-level-property-form">
+        <input type="number" id="number-${BaseComponent.count}" class="webthing-level-property-number">
+        <input type="range" id="slider-level-${BaseComponent.count}" 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(
+      '.webthing-level-property-text');
+    this._barContainer = this.shadowRoot.querySelector(
+      '.webthing-level-property-bar-container');
+    this._bar = this.shadowRoot.querySelector(
+      '.webthing-level-property-bar');
+    this._form = this.shadowRoot.querySelector(
+      '.webthing-level-property-form');
+    this._number = this.shadowRoot.querySelector(
+      '.webthing-level-property-number');
+    this._slider = this.shadowRoot.querySelector(
+      '.webthing-level-property-slider');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-level-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-level-property-name');
 
     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 168b4713a..ad8815751 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,27 @@ 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(
+      '.webthing-number-property-form');
+    this._input = this.shadowRoot.querySelector(
+      '.webthing-number-property-input');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-number-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-number-property-name');
 
     this._onClick = this.__onClick.bind(this);
     this._onSubmit = this.__onSubmit.bind(this);
diff --git a/static/js/components/property/numeric-label.js b/static/js/components/property/numeric-label.js
index 615504d13..e784dcec0 100644
--- a/static/js/components/property/numeric-label.js
+++ b/static/js/components/property/numeric-label.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class NumericLabelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -51,22 +53,22 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-numeric-label-property-container">
-    <div id="contents" class="webthing-numeric-label-property-contents">
-      <span id="value" class="webthing-numeric-label-property-value">
-      </span><span id="unit" class="webthing-numeric-label-property-unit"></span>
+  <div id="container-${BaseComponent.count}" class="webthing-numeric-label-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-numeric-label-property-contents">
+      <span id="value-${BaseComponent.count}" class="webthing-numeric-label-property-value">
+      </span><span id="unit-${BaseComponent.count}" class="webthing-numeric-label-property-unit"></span>
     </div>
   </div>
-  <div id="name" class="webthing-numeric-label-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-numeric-label-property-name"></div>
 `;
-
-class NumericLabelProperty 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(
+      '.webthing-numeric-label-property-name');
+    this._value = this.shadowRoot.querySelector(
+      '.webthing-numeric-label-property-value');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-numeric-label-property-unit');
     this._precision = 0;
   }
 
diff --git a/static/js/components/property/slider.js b/static/js/components/property/slider.js
index 98b83bff1..75376899c 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,21 @@ 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(
+      '.webthing-slider-property-slider');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-slider-property-name');
 
     this._onChange = this.__onChange.bind(this);
   }
diff --git a/static/js/components/property/string-label.js b/static/js/components/property/string-label.js
index cf1c62556..dfce4581a 100644
--- a/static/js/components/property/string-label.js
+++ b/static/js/components/property/string-label.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class StringLabelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -54,19 +56,19 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-string-label-property-container">
-    <div id="value" class="webthing-string-label-property-value"></div>
+  <div id="container-${BaseComponent.count}" class="webthing-string-label-property-container">
+    <div id="value-${BaseComponent.count}" class="webthing-string-label-property-value"></div>
   </div>
-  <div id="name" class="webthing-string-label-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-string-label-property-name"></div>
 `;
-
-class StringLabelProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._name = this.shadowRoot.querySelector('#name');
-    this._container = this.shadowRoot.querySelector('#container');
-    this._value = this.shadowRoot.querySelector('#value');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-string-label-property-container');
+    this._container = this.shadowRoot.querySelector(
+      '.webthing-string-label-property-value');
+    this._value = this.shadowRoot.querySelector(
+      '.webthing-string-label-property-value');
     this._inverted = false;
   }
 
diff --git a/static/js/components/property/string.js b/static/js/components/property/string.js
index e2a0c47b7..740a55cf4 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,23 @@ 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(
+      '.webthing-string-property-form');
+    this._input = this.shadowRoot.querySelector(
+      '.webthing-string-property-input');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-string-property-name');
 
     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 ca5095232..21606e19b 100644
--- a/static/js/components/property/switch.js
+++ b/static/js/components/property/switch.js
@@ -82,18 +82,18 @@ class SwitchProperty extends BaseComponent {
       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-${BaseComponent.count}"
           class="webthing-switch-property-switch">
         <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>
 `;
     super(template);