add opal browser, find element in dom

Gemfile

@@ -33,6 +33,7 @@ gem "passenger" , "6.0.15" ,  require: "phusion_passenger/rack_handler"
 gem "bootsnap", require: false
 
 gem "opal-rails"
+gem "opal-browser"
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem

Gemfile.lock

@@ -265,6 +265,9 @@ GEM
     opal (1.7.2)
       ast (>= 2.3.0)
       parser (~> 3.0, >= 3.0.3.2)
+    opal-browser (0.3.3)
+      opal (>= 1.0, < 2.0)
+      paggio (>= 0.3.0)
     opal-rails (2.0.2)
       opal (~> 1.0)
       opal-sprockets (~> 1.0)
@@ -276,6 +279,7 @@ GEM
       tilt (>= 1.4)
     open4 (1.3.4)
     orm_adapter (0.5.0)
+    paggio (0.3.0)
     parser (3.2.0.0)
       ast (~> 2.4.1)
     passenger (6.0.15)
@@ -447,6 +451,7 @@ DEPENDENCIES
   kaminari
   merged!
   mina
+  opal-browser
   opal-rails
   passenger (= 6.0.15)
   pg (~> 1.1)

app/assets/javascript/opal_main.js.rb

@@ -1 +1,22 @@
 require "opal"
+require "native"
+require 'promise'
+require 'browser/setup/mini'
+
+class Kanta
+  def initialize(hash)
+    hash.each do |k,v|
+      instance_variable_set "@#{k}" , v
+      self.class.define_method k.to_sym do
+        instance_variable_get "@#{k}".to_sym
+      end
+      self.class.define_method "#{k}=".to_sym  do |new_v|
+        instance_variable_set "@#{k}" , new_v
+      end
+    end
+
+    def mount(on_class)
+      puts $document[on_class].inner_html
+    end
+  end
+end

app/views/kanta/show.html.haml

@@ -1,4 +1,4 @@
-.flex.justify-center
+#app.flex.justify-center
   .flex.flex-col
     = @image.attributes
 
@@ -6,13 +6,12 @@
       Back
 
 :opal
-  class Kanta
-    def initialize(hash)
-      hash.each do |k,v|
-      puts k
-      puts v
-      end
-    end
+  class Clicker < Kanta
+
   end
 
   kanta = Kanta.new(bg: 'bg-cyan-200')
+  puts kanta.bg
+  kanta.bg = "bg-cyan"
+  puts kanta.bg
+  kanta.mount("#app")