<!DOCTYPE html>
<html>
<body>
  <div>A shadow element without an element</div>
  <div>before1 before0 host-child after0 after1</div>

  <div>A shadow element with an element</div>
  <div>before1 before0 host-child after0 after1</div>

  <div>A shadow element with a content element and an element</div>
  <div>before1 before0 host-child after0 after1</div>

  <div>A shadow element as a descendant of a content element</div>
  <div>before1 host-child after1</div>

  <div>A shadow element as a descendant of a shadow element</div>
  <div>before1 before0 host-child after0 after1</div>

  <div>A complex case</div>
  <div>before2 before1 before0 host-child after0 after1 after2</div>
</body>
</html>