Add support for invoketarget & invokeaction attributes

[shgysk8zer0]

Also requires support for InvokeEvent and default-handlers for <dialog>, <details>, & <* popover="...">.

Looks like this should be added to <button>s & <input>s, and will probably require MutationObserver to fully implement.

Also, invoketarget & invokeaction will need to be allowed in Sanitizer config.

This will effectively allow for <button type="button" invoketarget="dialog-id" invokeaction="showModal">, etc. Should be extremely useful in allowing interactivity via only HTML.

See https://open-ui.org/components/invokers.explainer/

[shgysk8zer0]

Looks like it is up to the target element to handle the invoke event dispatched, so this polyfill would only have to worry about getters and setters for the attributes and dispatching the invoke event on invoketarget element, with invokeaction defaulting to "auto".

Example:

HTML

<button type="button" invoketarget="dialog" accesskey="m">Show <u>M</u>odal</button>
<dialog id="dialog">
	<div>
		<b>Bacon Ipsum</b>
		<button type="button" invoketarget="dialog" accesskey="c"><u>C</u>lose</button>
	</div>
	<p>Bacon ipsum dolor amet kevin swine ball tip porchetta, prosciutto tenderloin andouille boudin bresaola pork loin. Ball tip salami brisket tri-tip pancetta meatloaf short loin, strip steak sausage sirloin. Cupim beef leberkas, shank spare ribs flank strip steak beef ribs jerky pork sirloin boudin. Tri-tip shankle chicken picanha beef ribs flank ham. Picanha flank kielbasa jerky chislic sausage shank capicola jowl beef ribs ribeye short ribs beef cupim short loin. Short loin fatback filet mignon leberkas, alcatra tri-tip pig beef ribs. Ribeye venison t-bone pastrami, shank kevin drumstick tongue tail sausage sirloin.</p>
</dialog>

JS

document.querySelectorAll('dialog').forEach(dialog => dialog.addEventListener('invoke', event => {
	console.log(event);
	switch(event.action) {
		case 'showModal':
			event.currentTarget.showModal();
			break;
			
		case 'close':
			event.currentTarget.close();
			break;
		
		case 'auto':
		default:
			if (event.currentTarget.open) {
				event.currentTarget.close();
			} else {
				event.currentTarget.showModal();
			}
	}
}))