svelte-scrim/src/Scrim.html

A vanilla JS scrim (backdrop) component made with Svelte.

<div
  class="svelte-scrim"
  style="
    opacity: {{ opacity }};
    background: {{ background }};
  "
></div>

<script>
const DEFAULTS = {
  opacity: 0.3,
  background: '#000000'
}
Object.freeze(DEFAULTS)

export default {
  tag: 'svelte-scrim',

  setup (Scrim) {
    Scrim.DEFAULTS = DEFAULTS
  },

  data () {
    return Object.assign({}, DEFAULTS)
  }
}
</script>

<style>

.svelte-scrim {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

</style>