<div>

  <!-- @component
    name: foo1
    capture: 3
  -->

  <div>1</div>
  <div>2</div>
  <div>3</div>


  <!-- @component
    name: foo2
    capture: -1
  -->

  <div>-</div>


  <!-- @component
    name: foo3
    capture: 0
  -->

  <div>-</div>


  <!-- @component
    name: foo4
    capture: section
  -->

  <div>4</div>
  <div>5</div>
  <div>6</div>


  <!-- @component
    name: foo5
    capture: 1
  -->
  <div>7</div>


  <!-- @component
    name: foo6
    capture: section
  -->

  <style type="text/css">
    background: red;
  </style>

  <script>
    alert('hello')
  </script>

  <div>8</div>
</div>

<div>

  <!-- @component
    name: foo6
    capture: all
  -->

  <div>1</div>
  <div>2</div>
  <div>3</div>

  <!-- @component -->
  <div>4<div>4b</div></div>

  <!-- @component -->
  <div>5
    <!-- @component -->
    <div>5b</div>
  </div>

</div>


<!-- @component
 name: foo7
 capture: all
-->

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<!-- @component -->
<div>6</div>