Component that performs fullscreen in DOM Elements, but it is more up-to-date.

npm i better-svelte-fullscreen
// OR
yarn add better-svelte-fullscreen

Note: to use this library in sapper, install as devDependency. See the link.

Local demo:

git clone https://gitlab.com/uimaxbai/better-svelte-fullscreen/
cd svelte-fullscreen
yarn install && yarn start

An example of how to use the library:

<script>
  import Fullscreen from "better-svelte-fullscreen";
</script>

<style>
  div {
    background-color: red;
    width: 120px;
    height: 120px;
  }
</style>

<Fullscreen let:onRequest let:onExit>
  <div>
    <button on:click={() => onRequest()}>FullScreen</button>
    <button on:click={() => onExit()}>Screen</button>
  </div>
</Fullscreen>

Raw component props (before transform):

Raw component props (before transform):

You can see the list of supported browsers here

Better Svelte Fullscreen is open source software also licensed as MIT.