<wakelock-toggle> element

This is a Custom Element that renders a toggle switch (i.e. a checkbox) for requesting to keep the device's screen from dimming and going to sleep.

Usage

Grab the wakelock-toggle.js file and include it in your HTML like this:

<script type="module" src="/path/to/wakelock-toggle.js"></script>

Then us the HTML element anywhere you want the switch to render in your webpage, e.g.:

<main>
	<h1>My Pancake Recipe</h1>

	<aside>
		<h2>Settings</h2>
		<wakelock-toggle label="Keep the screen from going to sleep"></wakelock-toggle>
	</aside>

	...

	<ol>
		<li>...</li>
		<li>...</li>
	</ol>
</main>

The label attribute is optional; the default value is "Keep the screen on".