Examples

Confirm Link Click Usage <a is="confirm-link-click">

<!-- 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/confirm-link-click.mjs"></script>
<script nomodule src="./your/path/confirm-link-click.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">
				<a is="confirm-link-click" href="https://pa.ulsmith.net">Paul Smith Website</a>
			</div>
			<div class="col-sm-4">
				<a is="confirm-link-click" href="https://impartials.net">Impartials Website</a>
			</div>
			<div class="col-sm-4">
				<a is="confirm-link-click" href="https://custom-web-component.net">Custom Web Component Website</a>
			</div>
		</div>
	</div>
</div>

...

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

ConfirmLinkClick Class confirm-link-click.mjs

import { CustomHTMLAnchorElement } from '../../../node_modules/custom-web-component/index.js';

/**
 * @public @name ConfirmLinkClick
 * @extends CustomHTMLAnchorElement
 * @description Library web component extending the span element with a word count from an input/textarea
 */
class ConfirmLinkClick extends CustomHTMLAnchorElement {

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

    /**
     * @public connected()
     * Invoked when node is connected/added to the DOM
     */
    connected() {
        this.addEventListener('click', this._clickEvent = this._confirmClick.bind(this));
    }
	
    /**
     * @public disconnected()
     * Invoked when node is disconnected/removed from the DOM
     */
    disconnected() {
        this.addRemoveListener('click', this._clickEvent);
    }

    /**
	 * @public _confirmClick()
	 * The link got clicked
	 * @param {Event} ev The event that kicked the method
     */
    _confirmClick(ev) {
        const result = confirm(`Are you sure you want to go to '${this.innerText}'? \n\n Link Location: ${this.href}`);
        if (!result) ev.preventDefault();
    }
}

// Define the new element
customElements.define('confirm-link-click', ConfirmLinkClick, { extends: 'a' });