diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
index c862e0d56c..8c2b755834 100644
--- a/app/javascript/alchemy_admin.js
+++ b/app/javascript/alchemy_admin.js
@@ -21,6 +21,7 @@ import PagePublicationFields from "alchemy_admin/page_publication_fields"
 // Web Components
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/clipboard_button"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
 import "alchemy_admin/components/element_editor"
@@ -33,7 +34,6 @@ import "alchemy_admin/components/page_select"
 import "alchemy_admin/components/select"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tinymce"
-import "alchemy_admin/clipboard"
 
 import { setDefaultAnimation } from "shoelace"
 
diff --git a/app/javascript/alchemy_admin/clipboard.js b/app/javascript/alchemy_admin/clipboard.js
deleted file mode 100644
index c6c69a4d35..0000000000
--- a/app/javascript/alchemy_admin/clipboard.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import "clipboard"
-
-const clipboard = new ClipboardJS("[data-clipboard-text]")
-
-clipboard.on("success", (e) => {
-  Alchemy.growl(e.trigger.dataset.clipboardSuccessText)
-  e.clearSelection()
-})
-
-const currentDialog = Alchemy.currentDialog()
-
-if (currentDialog) {
-  currentDialog.dialog.on("DialogClose.Alchemy", () => {
-    clipboard.destroy()
-  })
-}
diff --git a/app/javascript/alchemy_admin/components/clipboard_button.js b/app/javascript/alchemy_admin/components/clipboard_button.js
new file mode 100644
index 0000000000..4dcd4f287a
--- /dev/null
+++ b/app/javascript/alchemy_admin/components/clipboard_button.js
@@ -0,0 +1,28 @@
+import "clipboard"
+
+class ClipboardButton extends HTMLElement {
+  constructor() {
+    super()
+
+    this.innerHTML = `
+      <i class="icon ri-clipboard-line ri-fw"></i>
+    `
+
+    this.clipboard = new ClipboardJS(this, {
+      target: this,
+      text: () => {
+        return this.getAttribute("content")
+      }
+    })
+
+    this.clipboard.on("success", (evt) => {
+      Alchemy.growl(this.getAttribute("success-text"))
+    })
+  }
+
+  disconnectedCallback() {
+    this.clipboard.destroy()
+  }
+}
+
+customElements.define("alchemy-clipboard-button", ClipboardButton)
diff --git a/app/views/alchemy/admin/attachments/show.html.erb b/app/views/alchemy/admin/attachments/show.html.erb
index e2a9a5a9a9..5966b7a30b 100644
--- a/app/views/alchemy/admin/attachments/show.html.erb
+++ b/app/views/alchemy/admin/attachments/show.html.erb
@@ -8,16 +8,20 @@
   <div class="value with-icon">
     <label><%= Alchemy::Attachment.human_attribute_name(:url) %></label>
     <p><%= @attachment.url %></p>
-    <a data-clipboard-text="<%= @attachment.url %>" data-clipboard-success-text="<%= Alchemy.t("Copied to clipboard") %>" class="icon_button--right">
-      <%= render_icon(:clipboard) %>
-    </a>
+    <alchemy-clipboard-button
+      content="<%= @attachment.url %>"
+      success-text="<%= Alchemy.t("Copied to clipboard") %>"
+      class="icon_button--right"
+    ></alchemy-clipboard-button>
   </div>
   <div class="value with-icon">
     <label><%= Alchemy::Attachment.human_attribute_name(:download_url) %></label>
     <p><%= @attachment.url(download: true) %></p>
-    <a data-clipboard-text="<%= @attachment.url(download: true) %>" data-clipboard-success-text="<%= Alchemy.t("Copied to clipboard") %>" class="icon_button--right">
-      <%= render_icon(:clipboard) %>
-    </a>
+    <alchemy-clipboard-button
+      content="<%= @attachment.url(download: true) %>"
+      success-text="<%= Alchemy.t("Copied to clipboard") %>"
+      class="icon_button--right"
+    ></alchemy-clipboard-button>
   </div>
 </div>