declerative-shadow-roots.html

<template tag="video-playback-control">
  <style>
    :host {
      display: block;
    }
    #playButton::slotted {
      color: red;
    }
  </style>
  <slot id="playButton" name="play-button"></slot>
</template>

<template tag="video-player">
  <style>
    :host {
      display: block;
    }
    .video {
      background-color: black;
    }
  </style>
  <div class="video">
    <slot></slot>
  </div>
  <video-playback-control>
    <button slot="play-button"></button>
  </video-playback-control>
</template>

<!--  usage -->
<video-player>
  <video>
    <source src="movie.mp4" type="video/mp4">
  </video>
</video-player>