<!-- The template will only be rendered when cloned -->
<template>
  <link rel="stylesheet" href="style.css">
  <div class="z-component">
    <h1 class="z-component__title">
      <content></content>
    </h1>
  </div>
</template>

<!-- Create custom element with shadow dom -->
<script src="component.js"></script>

<!-- The template will only be rendered when cloned -->
<template>
  <link rel="stylesheet" href="style.css">
  <div class="z-component">
    <h1 class="z-component__title">
      <slot></slot>
    </h1>
  </div>
</template>

<!-- Create custom element with shadow dom -->
<script src="component.js"></script>

Use Shadow DOM v1 <slot>
Use Shadow DOM v1 <slot>
