如何创建包装器组件/指令？

Question

我想用一个简单的包装器覆盖一些标记。在这种情况下，想法是在一些标记中包含两个<input>元素，以便这个标记：

<div class="group-class">
  <div class="first-class">
    <input id="first">
  </div>
  <div class="second-class">
    <input id="second">
  </div>
</div>

将被标记为这样：

<my-wrapper>
  <input id="first">
  <input id="second">
</my-wrapper>

我最初想到的是一个组件，但这会创建一个shadowDOM，因此行为方式与<my-wrapper>不存在的方式不同。 <my-wrapper>标记应该用第一个示例的内容替换自己，以便呈现的DOM是相同的。我相信我看到了角度指令的一些replace选项，但我不确定如何做到这一点。