Use targets for created-by-current-user-controller

app/helpers/comments_helper.rb

@@ -0,0 +1,6 @@
+module CommentsHelper
+  def comment_tag(comment, &)
+    tag.div id: dom_id(comment), class: "comment flex align-start full-width",
+      data: { creator_id: comment.creator_id, created_by_current_user_target: "creation" }, &
+  end
+end

app/javascript/controllers/created_by_current_user_controller.js

@@ -1,14 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static values = { selector: String }
+  static targets = [ "creation" ]
   static classes = [ "mine" ]
 
-  connect() {
-    this.#createdElements.forEach(el => el.classList.add(this.mineClass))
-  }
-
-  get #createdElements() {
-    return this.element.querySelectorAll(`${this.selectorValue}[data-creator-id='${Current.user.id}']`)
+  creationTargetConnected(element) {
+    if (element.dataset.creatorId == Current.user.id) {
+      element.classList.add(this.mineClass)
+    }
   }
 }

app/views/bubbles/_messages.html.erb

@@ -2,7 +2,6 @@
     class="comments align-center center borderless margin flex flex-column gap-half"
     style="--bubble-color: <%= bubble.color %>"
     data-controller="created-by-current-user"
-    data-created-by-current-user-selector-value=".comment"
     data-created-by-current-user-mine-class="comment--mine">
   <%# Template Dependency: comments/comment %>
   <%# Template Dependency: event_summaries/event_summary %>

app/views/comments/_comment.html.erb

@@ -1,4 +1,4 @@
-<div id="<%= dom_id(comment) %>" class="comment flex align-start full-width" data-creator-id="<%= comment.creator_id %>">
+<%= comment_tag comment do %>
   <figure class="comment__avatar flex-item-no-shrink">
     <%= avatar_tag comment.creator, loading: :lazy %>
   </figure>
@@ -16,4 +16,4 @@
       <%= simple_format comment.body %>
     </div>
   </div>
-</div>
+<% end %>