Slang -> ECR -> HTML

basic.ecr

<span id="some-id" class="classname">
  <div id="hello" class="world world2">
    <span data-some-var="<%= some_var %>">
      <span>
        <span class="deep_nested">
          <%= Process.pid %>
        </span>
      </span>
    </span>
    <span class="alongside" pid="<%= Process.pid %>">
      <custom-tag id="with-id" pid="<%= "#{Process.pid}" %>">
        <% strings.each do |s| %>
          <span>
            <%= s %>
          </span>
        <% end %>
      </custom-tag>
    </span>
  </div>
</span>
<div id="amazing-div" some-attr="<%= "hello" %>"></div>

basic.slang

span#some-id.classname
  #hello.world.world2
    span data-some-var=some_var
      span
        span.deep_nested
          = Process.pid
    span.alongside pid=Process.pid
      custom-tag#with-id pid="#{Process.pid}"
        - strings.each do |s|
          span
            = s

#amazing-div some-attr="hello"

evaled.html

<span id="some-id" class="classname">
  <div id="hello" class="world world2">
    <span data-some-var="hello">
      <span>
        <span class="deep_nested">
          12280
        </span>
      </span>
    </span>
    <span class="alongside" pid="12280">
      <custom-tag id="with-id" pid="12280">

          <span>
            ah
          </span>

          <span>
            oh
          </span>

      </custom-tag>
    </span>
  </div>
</span>
<div id="amazing-div" some-attr="hello"></div>