diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java
index 8d2dd4c..920559b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java
@@ -66,6 +66,10 @@
     decodeClientBehaviors(facesContext, input);
   }
 
+  public HtmlElements getComponentTag() {
+    return HtmlElements.TOBAGO_SELECT_BOOLEAN_CHECKBOX;
+  }
+
   @Override
   protected void encodeBeginField(final FacesContext facesContext, final UIComponent component) throws IOException {
     final AbstractUISelectBoolean select = (AbstractUISelectBoolean) component;
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java
index 4ee5497..0e4ee50 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java
@@ -20,10 +20,15 @@
 package org.apache.myfaces.tobago.internal.renderkit.renderer;
 
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
 
 public class SelectBooleanToggleRenderer extends SelectBooleanCheckboxRenderer {
 
   protected TobagoClass getTobagoClass() {
     return TobagoClass.SELECT_BOOLEAN_TOGGLE;
   }
+
+  public HtmlElements getComponentTag() {
+    return HtmlElements.TOBAGO_SELECT_BOOLEAN_TOGGLE;
+  }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index b5fd301..870eeb6 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -142,6 +142,8 @@
   TOBAGO_PANEL("tobago-panel"),
   TOBAGO_POPUP("tobago-popup"),
   TOBAGO_SPLIT_LAYOUT("tobago-split-layout"),
+  TOBAGO_SELECT_BOOLEAN_CHECKBOX("tobago-select-boolean-checkbox"),
+  TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
   TOBAGO_STARS("tobago-stars"),
   TOBAGO_SUGGEST("tobago-suggest"),
   TOBAGO_TAB("tobago-tab"),
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
index 23bf731..093ff63 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
@@ -15,20 +15,31 @@
  * limitations under the License.
  */
 
-import {Listener, Phase} from "./tobago-listener";
 import {DomUtils} from "./tobago-utils";
 
-class SelectBooleanCheckbox {
+export class SelectBooleanCheckbox extends HTMLElement {
 
-  static init = function (element: HTMLElement): void {
-    for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectBooleanCheckbox input[readonly]")) {
-      checkbox.addEventListener("click", (event: Event) => {
-        // in the "readonly" case, prevent the default, which is changing the "checked" state
-        event.preventDefault();
-      });
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    if (this.input.readOnly) {
+      this.input.addEventListener("click", preventClick);
     }
-  };
+
+    function preventClick(event: MouseEvent): void {
+      // in the "readonly" case, prevent the default, which is changing the "checked" state
+      event.preventDefault();
+    }
+  }
+
+  get input(): HTMLInputElement {
+    const rootNode = this.getRootNode() as ShadowRoot | Document;
+    return rootNode.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "field") as HTMLInputElement;
+  }
 }
 
-Listener.register(SelectBooleanCheckbox.init, Phase.DOCUMENT_READY);
-Listener.register(SelectBooleanCheckbox.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-select-boolean-checkbox", SelectBooleanCheckbox);
+});
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
index 5da7e1b..0fa076f 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
@@ -15,20 +15,31 @@
  * limitations under the License.
  */
 
-import {Listener, Phase} from "./tobago-listener";
 import {DomUtils} from "./tobago-utils";
 
-class SelectBooleanToggle {
+class SelectBooleanToggle extends HTMLElement {
 
-  static init = function (element: HTMLElement): void {
-    for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectBooleanCheckbox input[readonly]")) {
-      checkbox.addEventListener("click", (event: Event) => {
-        // in the "readonly" case, prevent the default, which is changing the "checked" state
-        event.preventDefault();
-      });
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    if (this.input.readOnly) {
+      this.input.addEventListener("click", preventClick);
     }
-  };
+
+    function preventClick(event: MouseEvent): void {
+      // in the "readonly" case, prevent the default, which is changing the "checked" state
+      event.preventDefault();
+    }
+  }
+
+  get input(): HTMLInputElement {
+    const rootNode = this.getRootNode() as ShadowRoot | Document;
+    return rootNode.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "field") as HTMLInputElement;
+  }
 }
 
-Listener.register(SelectBooleanToggle.init, Phase.DOCUMENT_READY);
-Listener.register(SelectBooleanToggle.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-select-boolean-toggle", SelectBooleanToggle);
+});