<template id="tmpl">
  <style>
    :host {
      font-weight: 700;
      width: 100px;
      padding: 1em;
      margin: 2em 0;
      color: black;
      border: 1px solid red;
      display: block;
    }

    :host([sticky]) {
      border: 2px dashed blue;
      background-color: #e3e3e3;
      width: 100%;
      margin: 0;
      text-align: center;
      position: sticky;
      top: 0px;
    }
  </style>
  <slot></slot>
</template>

<script>
customElements.define('my-element', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'}).append(tmpl.content.cloneNode(true));
  }
});
</script>

<style>
  html,body {
    min-height: 1000px;
  }
</style>
<my-element sticky>
  Sticky!
</my-element>

  <my-element>
    normal.
  </my-element>

  <my-element>
    normal.
  </my-element>

  <my-element>
    normal.
  </my-element>