Declarative shadow dom

[keegankb93]

https://web.dev/articles/declarative-shadow-dom

This reached baseline in August. I'm wondering if there is any implications from this that can possible be used with ViewComponents. I.e. an easier way for style scoping. Potentially some sort of helper or renderer that could potentially take a heredoc comment of styles and inject it into the static erb. I.e. maybe some way to wrap a component in the template and inject the styles for convenience.

My 45 secs of code here:

<div>
  <template shadowrootmode="closed">
    <style> <%= styles %></style>
    <h2><%= @title %></h2>
  </template>
</div>

class ExampleComponent < ApplicationComponent
  def initialize(title:)
    @title = title
  end

  def styles
    @styles = <<~CSS
      .example {
        background-color: #f9f9f9;
        border: 1px solid #eaeaea;
        border-radius: 0.25rem;
        padding: 1rem;
        margin: 1rem 0;
      }
    CSS
  end
end

results:

[joelhawksley]

@keegankb93 I love your thinking here. For now, ViewComponent continues to have no control on what is rendered for a component as would be required for this feature, so I'd expect this to be something built at the application level. If you find a pattern that makes sense across many use-cases in practice, I'd be interested in seeing it for consideration.

[keegankb93]

@joelhawksley Pardon the code, took a few minutes break from writing tests and tried to drum some conceptual ideas.

<%= render(MessageComponent.new(name: "Keegan")) %>
<%= render(MessageComponent.new(name: "John", color: "peru", background_color: "orange")) %>
<%= render(MessageComponent.new(name: "Sally", color: "green", background_color: "lightgreen")) %>
<%= render(MessageComponent.new(name: "Margaret", color: "maroon", background_color: "pink")) %>

module Concerns
  module WebComponent
    extend ActiveSupport::Concern


    included do
      class_attribute :_tag_name, default: nil
      class_attribute :_styles, default: nil
      class_attribute :_template, default: nil
      class_attribute :_stimulus_controller, default: nil
    end

    class_methods do
      def tag_name(name)
        self._tag_name = name
      end

      def styles(&block)
        self._styles = block
      end

      def template(&block)
        self._template = block
      end

      def stimulus_controller(name)
        self._stimulus_controller = name
      end
    end

    def render_in(view_context, &block)
      result = ERB.new(web_component_template).result(binding)
      raw result
    end

    def web_component_template
      <<~ERB
          <#{_tag_name}>
            <template shadowrootmode="open">
              <style>
                <%= instance_exec(&self.class._styles) %>
              </style>
              <%= instance_exec(&self.class._template) %>
            </template>
          </#{_tag_name}>
        ERB
    end
  end
end

class MessageComponent < ViewComponent::Base
  include ::Concerns::WebComponent

  def initialize(name:, color: "blue", background_color: "lightblue")
    @name = name
    @color = color
    @background_color = background_color
  end

  tag_name "message-component"
  stimulus_controller "message"

  template do
    <<~HTML
      <div data-target="output">
        <h1>Hello, #{@name}</h1>
        <p class="counter"></p>
        <button>Click me</button>
      </div>
    HTML
  end

  styles do
    <<~CSS
      h1 {
        color: #{@color};
        background-color: #{@background_color};
      }
    CSS
  end
end

customElements.define("message-component", class extends HTMLElement {
    count = 0

    connectedCallback() {
        console.log("Message component connected")

        const counter = this.shadowRoot.querySelector("p.counter")
        this.shadowRoot.querySelector("button").addEventListener("click", () => {
            console.log("Button clicked")
            this.count++
            counter.textContent = `Counter: ${this.count}`
        })
    }
})

I tried implementing stimulus, but that's difficult considering it can't find the data attributes within the shadow roots. Lit element might be a possibility, but they implement their own render function which is more fine-grained than this, but I think if you operate off the Rails approach (server is source of truth/state) then you might be ok.

Screen.Recording.2025-01-24.at.12.26.55.PM.mov

how it looks in the dom

Not sure how everything would work together, and there's a lot of people who are smarter than me and may have better ideas.