From af431ffcb821c6b1754e40d42cfbfb22562fc5e4 Mon Sep 17 00:00:00 2001
From: Samuel Williams <samuel.williams@shopify.com>
Date: Wed, 9 Sep 2026 11:27:24 +1200
Subject: [PATCH] Add element selector

Assisted-By: devx/7ef83274-928f-499d-b668-48449b1ff60e
---
 lib/live/element.rb  | 6 ++++++
 releases.md          | 4 ++++
 test/live/element.rb | 8 ++++++++
 3 files changed, 18 insertions(+)

diff --git a/lib/live/element.rb b/lib/live/element.rb
index c7292c6..2b6bfe2 100644
--- a/lib/live/element.rb
+++ b/lib/live/element.rb
@@ -70,6 +70,12 @@ def initialize(id, data)
 		# @attribute [Page | Nil] The page this element is bound to.
 		attr :page
 		
+		# A CSS selector that uniquely identifies this element.
+		# @returns [String]
+		def selector
+			"[id=#{JSON.dump(@id)}]"
+		end
+		
 		# Generate a JavaScript string which forwards the specified event to the server.
 		# @parameter detail [Hash] The detail associated with the forwarded event.
 		def forward_event(detail = nil)
diff --git a/releases.md b/releases.md
index b1c5557..366cd32 100644
--- a/releases.md
+++ b/releases.md
@@ -1,5 +1,9 @@
 # Releases
 
+## Unreleased
+
+  - Add `Live::Element#selector` for safely targeting an element by its exact HTML identifier from CSS selector APIs.
+
 ## v0.20.0
 
 ### Web Packages
diff --git a/test/live/element.rb b/test/live/element.rb
index 89ea0a1..9b33a34 100644
--- a/test/live/element.rb
+++ b/test/live/element.rb
@@ -30,6 +30,14 @@
 		expect(element.data[:class]).to be == "Live::Element"
 	end
 	
+	with "#selector" do
+		it "selects the exact element id" do
+			element = subject.new('2eef0b2c:child"view', {})
+			
+			expect(element.selector).to be == '[id="2eef0b2c:child\\"view"]'
+		end
+	end
+	
 	with ".root" do
 		it "separates element data from constructor options" do
 			dependency = Object.new