Examples

Shock Button Usage <button is="shock-button">

<!-- Polyfill -->
<script src="/node_modules/promise-polyfill/dist/polyfill.min.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

<!-- Bootstrap component only, ensure you have built fallback for IE support too (.js)! -->
<script type="module" src="./your/path/my-switch.mjs"></script>
<script nomodule src="./your/path/my-switch.js"></script>

<!-- Or add your switch import to a bootstrap js file/app using ES6 import and use that instead of the component directly... -->
<script type="module" src="./your/path/index.mjs"></script>
<script nomodule src="./your/path/index.js"></script>

<!-- example basic fouc resolution -->
<style>
	[fouc] { opacity: 0; transition: opacity 200ms ease-in-out; }
	[fouc="loaded"] { opacity: 1; }
</style>

...

<div class="info">
	<div class="class">
		<div class="row" fouc>
			<div class="col-sm-4">
				<button is="shock-button">Basic Button with Shock</button>
			</div>
			<div class="col-sm-4">
				<button is="shock-button" class="btn btn-default">Bootstrap Button with Shock</button>
			</div>
			<div class="col-sm-4">
				<button is="shock-button" class="btn btn-primary">Bootstrap Primary Button with Shock</button>
			</div>
		</div>
	</div>
</div>

...

<!-- fouc for individual components -->
<script> setTimeout(() => document.querySelector('[fouc]').setAttribute('fouc', 'loaded'), 1000); </script>
						

ShockButton Class shock-button.mjs

import { CustomHTMLButtonElement, html } from '../../../node_modules/custom-web-component/index.js';

/**
 * @public @name ShockButton
 * @extends CustomHTMLButtonElement
 * @description Library web component to add shock effect to buttons
 */
class ShockButton extends CustomHTMLButtonElement {

	/**
     * @public @constructor @name constructor
	 * @description Triggered when component is instantiated (but not ready or in DOM, must call super() first)
	 */
	constructor() {
		super();

		this.value;
		this.clickedEvent;
		this.downEvent;
	}

    /**
     * @public connected()
     * Invoked when node is connected/added to the DOM
     */
	connected() {
		this.addEventListener('mousedown', this.downEvent = this._down.bind(this));
		this.addEventListener('touchstart', this.downEvent = this._down.bind(this));
		this.addEventListener('click', this.clickedEvent = this._clicked.bind(this));

		
	}
	
    /**
	 * @public disconnected()
	 * Invoked when node is disconnected/removed from the DOM
     */
	disconnected() {
		this.removeEventListener('mousedown', this.downEvent);
		this.removeEventListener('touchstart', this.downEvent);
		this.removeEventListener('click', this.clickedEvent);
	}

    /**
	 * @public _clicked()
	 * The button got clicked
     */
	_down(ev) {
		this.style.transition = 'opacity, transform 80ms ease-in-out';
		setTimeout(() => {
			this.style.opacity = 0.8;
			this.style.transform = 'scale(0.95)';
		}, 1);
	}

    /**
	 * @public _clicked()
	 * The button got clicked
     */
	_clicked(ev) {
		this.style.opacity = 1;
		this.style.transform = 'scale(1.1)';
		setTimeout(() => {
			this.style.transform = 'scale(1)';
			setTimeout(() => {
				this.style.removeProperty('transform');
				this.style.removeProperty('transition');
				this.style.removeProperty('opacity');
			}, 80);
		}, 80);
	}
}

// bootstrap the class as a new web component
customElements.define('shock-button', ShockButton, { extends: 'button' });