## `<replace-with-grandchildren>`

A "helper" `custom element` in the Bolt Design System to easily remove a Web Component's initial server-side / Twig-rendered HTML when booting up and replace itself with the custom element's children and remove duplicate html element; as the name implies, "Remove html tag".

A great use case of this is with the `<bolt-list>` component which might output some initial HTML similar to this (when serverside-rendered):

```html
<bolt-list
  tag="ul"
  display="block"
  spacing="xsmall"
  align="start"
  valign="center"
>
  <ul
    class="c-bolt-list c-bolt-list--display-block c-bolt-list--spacing-xsmall c-bolt-list--align-start c-bolt-list--valign-center"
  >
    <bolt-list-item>
      Item 1
    </bolt-list-item>
    <bolt-list-item>
      Item 2
    </bolt-list-item>
    <bolt-list-item>
      Item 3
    </bolt-list-item>
  </ul>
</bolt-list>
```

The thing is, the ul inside bolt-list have the same SCSS styles and those styles duplicate and create some unwanted visual issues. In fact, html duplicate content generated by Web Component and it creates issues with styling the component:

```html
<!-- This totally works and we don't have doubled SCSS classes -->
<bolt-list
  tag="ul"
  display="block"
  spacing="xsmall"
  align="start"
  valign="center"
>
  <bolt-list-item>
    Item 1
  </bolt-list-item>
  <bolt-list-item>
    Item 2
  </bolt-list-item>
  <bolt-list-item>
    Item 3
  </bolt-list-item>
</bolt-list>
```

That's where this helper element comes in: acting and removes unwanted HTML tag but not remove child's of this tag.