Add HTML comments to twig output to attempt to allow in-place editing

I was able to do the easy bits here - prop wrappers for when we're not inside an element or attribute, and wrappers for the component.

For the props-no-slots component in the xb_test_sdc module we get this

<!-- 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 -->

Getting HTML attribute support will require a full syntax tree that mixes twig nodes with HTML - which is what I'm working on in a separate PHP library. But I think this is a good step forward.

Just adding a comment for extra visibility in case my comment on the MR was missed.

Would you be able to change the HTML comments so that there is a difference between a comment wrapping a slot and a comment wrapping a prop?