If you want to create a button from scratch, you must first create the universe

<sagan-buttonrole="button">A button from scratch</sagan-button>

<sagan-button role="button">💩</sagan-button>

<sagan-button role="button"aria-label="Data Sharing Options">
<spanrole="presentation"aria-hidden="true">💩</span>
</sagan-button>

<sagan-button
role="button"
aria-label="Data Sharing Options"
tabindex="0"
>
<span role="presentation" aria-hidden="true">💩</span>
</sagan-button>

<sagan-button
role="button"
aria-label="Data Sharing Options"
tabindex="0"
onomouseup="console.log('mouse')"
>
<span role="presentation" aria-hidden="true">💩</span>
</sagan-button>

<sagan-button
role="button"
aria-label="Data Sharing Options"
tabindex="0"
onmouseup="console.log('mouse')"
ontouchend="console.log('touch')"
onpointerup="console.log('pointer')"
>
<span role="presentation" aria-hidden="true">💩</span>
</sagan-button>

class SaganButton extends HTMLElement {
// A reference to the element internals,
// this allows us to do some thigns with the element we cannot do otherwise.
/**@type {ElementInternals} */
#internals;

constructor() {
super();

this.attachShadow({ mode: 'open' });
this.#internals = this.attachInternals();

// Add back the things we had before.
this.#internals.role = 'button';
this.#internals.ariaLabel = 'Data Sharing Options';
this.tabindex = 0;
}

/**
*@param {Event} evt
*/
handleEvent(evt) {
// We here filter by event type
switch (evt.type) {
// For all of those we want to do some action.
// So here we use a fallthrough here.
case 'mouseup':
case 'touchend':
case 'pointerup':
this.#doButtonAction(evt);
break;
}
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<slot></slot>
`;

// We add the event listeners
// when the element is added to the DOM.
this.addEventListener('mouseup', this);
this.addEventListener('touchend', this);
this.addEventListener('pointerup', this);
}

disconnectedCallback() {
// And remove the listeners
// when the element is removed from the DOM.
this.removeEventListener('mouseup', this);
this.removeEventListener('touchend', this);
this.removeEventListener('pointerup', this);
}

/**
*@param {Event} evt
*/
#doButtonAction(evt) {
// TODO: Implement the actual button action.
}
}

class SaganButton extends HTMLElement {
connectedCallback() {
// ...

this.addEventListener('keyup', this);
this.removeEventListener('keydown', this);
}

disconnectedCallback() {
// ...

this.removeEventListener('keyup', this);
this.removeEventListener('keydown', this);
}

/**
*@param {Event} evt
*/
handleEvent(evt) {
switch (evt.type) {
// ...

case 'keyup':
this.#handleSpaceActivation(evt);
break;
case 'keydown':
this.#handleEnterActivation(evt);
break;
}
}

/**
*@param {KeyboardEvent} evt
*/
#handleSpaceActivation(evt) {
// Don't do anything if the space bar is not pressed.
if (evt.key !== ' ') {
return;
}

if (document.activeElement !== this) {
return;
}

this.#doButtonAction(evt);
}

/**
*@param {KeyboardEvent} evt
*/
#handleEnterActivation(evt) {
if (evt.key !== 'Enter') {
return;
}

this.#doButtonAction(evt);
}
}

class SaganButton extends HTMLElement {
// Specify the attributes to observe.
static observedAttributes = [
'disabled'
];

// Add a setter...
/**
*@param {boolean} newValue
*/
set disabled(newValue) {
this.toggleAttribute('disabled', newValue);

// Note: `aria-disabled` is a string of "true" or "false", not a boolean.
this.#internals.ariaDisabled = newValue ? 'true' : 'false';

if (newValue) {
this.#internals.states.add('--disabled');
} else {
this.#internals.states.delete('--disabled');
}
}

// Then a getter...
get disabled() {
return this.hasAttribute('disabled');
}

// Watch for changes on the attribute.
/**
*@param {string} name
*@param {string | null} oldValue
*@param {string | null} newValue
*/
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) {
return;
}

switch (name) {
case 'disabled':
this.disabled = newValue !== null;
break;
}
}

// ...
}

sagan-button:state(--disabled) { /* Styles for disabled state */ }

class SaganButton extends HTMLElement {
// To make it interact with forms...
static formAssociated = true;

static observedAttributes = [
'type',
'form',
'formaction',
'formmethod',
'formenctype',
'formnovalidate',
'formtarget',
'name',
'value'
// ...
];

/**
*@param {string | null} newValue
*/
set type(newValue) {
// The default for button types is "submit",
// So we validate and default to it if the value does not match.
if (newValue && ['submit', 'reset', 'button'].includes(newValue?.toLowerCase())) {
this.setAttribute('type', newValue);
} else {
this.setAttribute('type', 'submit');
}
}

get type() {
return this.getAttribute('type') ?? 'submit';
}

/**
*@param {string | null} newValue
*/
set form(newValue) {
if (newValue === null) {
this.removeAttribute('form');
return;
}

// Here we need to check if the form is a valid element.
// If it is, we then set the attribute.
const form = document.getElementById(newValue);
if (form) {
this.setAttribute('form', newValue);
}
}

/**
*@returns {HTMLFormElement | null}
*/
get form() {
// Here we get the value from the attribute as the first option.
const formId = this.getAttribute('form');
if (formId) {
return document.getElementById(formId);
}

// Then fallback to whatever the browser has set.
return this.#internals.form;
}

/**
*@param {string | null} newValue
*/
set formAction(newValue) {
if (newValue === null) {
this.removeAttribute('formaction');
return;
}

this.setAttribute('formaction', newValue);
}

get formAction() {
return this.getAttribute('formaction');
}

/**
*@param {string | null} newValue
*/
set formMethod(newValue) {
// The default method is "get"
if (newValue && ['post', 'get', 'dialog'].includes(newValue.toLowerCase())) {
this.setAttribute('formmethod', newValue);
} else {
this.setAttribute('formmethod', 'get');
}
}

get formMethod() {
return this.getAttribute('formmethod') ?? 'get';
}

/**
*@param {string | null} newValue
*/
set formEnctype(newValue) {
// The default value is "form url encoded".
if (
newValue &&
[
'application/x-www-form-urlencoded',
'multipart/form-data',
'text/plain'
].includes(newValue.toLowerCase())
) {
this.setAttribute('formenctype', newValue);
} else {
this.setAttribute('formenctype', 'application/x-www-form-urlencoded');
}
}

get formEnctype() {
return this.getAttribute('formenctype') ?? 'application/x-www-form-urlencoded';
}

/**
*@param {boolean} newValue
*/
set formNoValidate(newValue) {
this.toggleAttribute('formnovalidate', newValue);
}

get formNoValidate() {
return this.hasAttribute('formnovalidate');
}

/**
*@param {string | null} newValue
*/
set formTarget(newValue) {
// The default value is "_self".
if (newValue && ['_self', '_blank', '_parent', '_top'].includes(newValue.toLowerCase())) {
this.setAttribute('formtarget', newValue);
} else {
this.setAttribute('formtarget', '_self');
}
}

get formTarget() {
return this.getAttribute('formtarget') ?? '_self';
}

/**
*@param {string | null} newValue
*/
set name(newValue) {
if (newValue === null) {
this.removeAttribute('name');
return;
}

this.setAttribute('name');
}

get name() {
return this.getAttribute('name');
}

/**
*@param {string | null} newValue
*/
set value(newValue) {
if (newValue === null) {
this.removeAttribute('value');
return;
}

this.setAttribute('value', newValue);

// We need to set the button's value.
this.#internals.setFormValue(newValue);
// And the validation state.
this.#internals.setValidity({});

// And the valid/invalid states.
this.#internals.states.add('--valid');
this.#internals.states.delete('--invalid');
}

get value() {
return this.getAttribute('value');
}

get willValidate() {
if (this.type === 'button' || this.type === 'reset') {
return false;
}

if (this.closest('datalist')) {
return false;
}

if (this.disabled) {
return false;
}

if (!this.#internals.validity.customError) {
return false;
}

return this.#internals.willValidate;
}

get validationMessage() {
return this.willValidate ? this.#internals.validationMessage : '';
}

get validity() {
return this.#internals.validity;
}

checkValidity() {
return this.#internals.checkValidity();
}

reportValidity() {
return this.#internals.reportValidity();
}

/**
*@param {string} message
*/
setCustomValidity(message) {
if (message) {
this.#internals.setValidity({ customError: true }, message);
this.#internals.states.add('--invalid');
this.#internals.states.delete('--valid');
} else {
this.#internals.setValidity({});
this.#internals.states.add('--valid');
this.#internals.states.delete('--invalid');
}
}

/**
*@param {string} name
*@param {string | null} oldValue
*@param {string | null} newValue
*/
attributeChangedCallback(name, oldValue, newValue) {
// ...

switch (name) {
// ...

case 'type':
this.type = newValue;
break;
case 'form':
this.form = newValue;
break;
case 'formaction':
this.formAction = newValue;
break;
case 'formmethod':
this.formMethod = newValue;
break;
case 'formenctype':
this.formEnctype = newValue;
break;
case 'formnovalidate':
this.formNoValidate = newValue !== null;
break;
case 'formtarget':
this.formTarget = newValue;
break;
case 'name':
this.name = newValue;
break;
case 'value':
this.value = newValue;
break;
}
}
}

class SaganButton extends HTMLElement {
// ...

#doButtonAction() {
// First check if the button is disabled,
// On that case nothing should happen.
if (this.disabled) {
return;
}

// Then check the button type.
if (this.type === 'button') {
return;
}

// Here we reset the form if the button is a reset one.
if (this.type === 'reset') {
this.form?.reset();
return;
}

// Finally, if it is a submit button,
// AND IF we wired everything correctly,
// The form will be handled by the browser.
this.form?.requestSubmit(this);
}

// ...
}

class SaganButton extends HTMLElement {
/**@type {Element['addEventListener']} */
#originalAddEventListener;

constructor() {
// ...

// Add event listeners for to set the active state.
this.addEventListener('pointerdown', this.#setActiveState);
this.addEventListener('touchstart', this.#setActiveState);
this.addEventListener('mousedown', this.#setActiveState);
this.addEventListener('keydown', this.#setActiveState);

// Keep a reference to the original method.
this.#originalAddEventListener = this.addEventListener;

// Wrap the original method.
this.addEventListener = this.#wrappedAddEventListener;
}

/**
*@template {keyof ElementEventMap} K
*@param {K} type
*@param {EventListenerOrEventListenerObject} listener
*@param {boolean | EventListenerOptions} [options]
*/
#wrappedAddEventListener(type, listener, options) {
const defaultEvents = ['click', 'pointerup', 'touchend', 'keyup', 'keydown'];

// If one of the default events,
// Remove the default event listener, and re-add it as the last one.
if (defaultEvents.includes(type)) {
this.removeEventListener(type, this);

this.#originalAddEventListener.call(this, type, listener, options);
this.addEventListener(type, this);
} else {
this.#originalAddEventListener.call(this, type, listener, options);
}
}

#setActiveState() {
if (this.disabled) {
return;
}

this.#internals.states.add('--active');
}

/**
*@param {Event} evt
*/
#doButtonAction(evt) {
// After the disabled check...

this.#internals.states.delete('--active');

if (evt.defaultPrevented) {
return;
}
// ...
}
}

class SaganButton extends HTMLElement {
static observedAttributes = [
// ...
'onmouseup'
];

// Keep a list of event listeners for attributes.
/**@type {Record<string, EventListener>} */
#attributeEventListeners = {};

/**
*@param {EventListener | null} newValue
*/
set onmouseup(newValue) {
if (!newValue) {
// Check if there is already a saved listener.
const savedListener = this.#attributeEventListeners['mouseup'];
if (savedListener) {
// Then remove it, and delete the reference.
this.removeEventListener('mouseup', savedListener);
delete this.#attributeEventListeners['mouseup'];
}
} else {
// Add a new listener and save the reference.
this.addEventListener('mouseup', newValue);
this.#attributeEventListeners['mouseup'] = newValue;
}
}

get onmouseup() {
return this.#attributeEventListeners['mouseup'] ?? null;
}

/**
*@param {string} name
*@param {string | null} oldValue
*@param {string | null} newValue
*/
attributeChangedCallback(name, oldValue, newValue) {
// ...

switch (name) {
// ...
case 'onmouseup':
this.onmouseup = this.#parseAttributeListener(newValue);
break;
}
}

/**
*@param {string | null} value
*/
#parseAttributeListener(value) {
// If no value is passed it returns null.
if (!value) {
return null;
}

try {
// NOTE: This is very bad practice!
// It creates an immediatly invoked function body out of the value given.
// When it is called, it will execute whatever is passed as the value.
return new Function('evt', `(${value})(evt);`);
} catch (err) {
// If there is an error with the function, returns null.
console.error(err);
return null;
}
}
}