#3486236 - Add HTML comments wrapping components and variables where possible

Closes #3486236

Components now output HTML comments at the start and end of each component and around props and slots where we can

<!-- xb-start-9fff3623-d783-44c7-bb94-896d322f0d66 -->
  <div  data-component-id="xb_test_sdc:props-no-slots" style="font-family: Helvetica, Arial, sans-serif; width: 100%; height: 100vh; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 20px; box-sizing: border-box;">
    <h1 style="font-size: 3em; margin: 0.5em 0; color: #333;">
      <!-- xb-prop-start-heading -->
        se3hqtu5
      <!-- xb-prop-end-heading -->
    </h1>
  </div>
<!-- xb-end-9fff3623-d783-44c7-bb94-896d322f0d66 -->

When slots are present, these are wrapped with <!-- xb-slot-start-{slot name} --> and <!-- xb-slot-end-{slot name} --> e.g.

<!-- xb-start-uuid-in-root -->
  <div data-component-id="xb_test_sdc:props-slots" style="font-family: Helvetica, Arial, sans-serif; width: 100%; height: 100vh; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 20px; box-sizing: border-box;">
    <h1 style="font-size: 3em; margin: 0.5em 0; color: #333;">
      <!-- xb-prop-start-heading -->
        Hello, world!
      <!-- xb-prop-end-heading -->
    </h1>
    <div class="component--props-slots--body">
      <!-- xb-slot-start-the_body -->
        <p>Example value for <strong>the_body</strong> slot in <strong>prop-slots</strong>component.</p>
      <!-- xb-slot-end-the_body -->
    </div>
    <div class="component--props-slots--footer">
      <!-- xb-slot-start-the_footer -->
        Example value for &lt;strong&gt;the_footer&lt;/strong&gt;.
      <!-- xb-slot-end-the_footer -->
    </div>
    <div class="component--props-slots--colophon">
      <!-- xb-slot-start-the_colophon --><!-- xb-slot-end-the_colophon -->
    </div>
  </div>
<!-- xb-end-uuid-in-root -->

Places we can't output wrappers around props

• Inside {% trans %} tag - see https://www.drupal.org/project/drupal/issues/3486273 - core bug
• Inside partial HTML elements/attributes - e.g. <img src="{{ src }}" and <div {{ attributes }}> this will require a full AST mixing HTML and Twig nodes, I'm working on that in github.com/larowlan/twigcaster (private for now)