JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" disabled>Native button</button>

<br><br>

<my-button>Custom button</my-button>

CSS

button:disabled {
  outline: dotted 4px tomato;
}

/* This should work per https://drafts.csswg.org/css-shadow-parts-1/#part */
my-button::part(button):disabled {
  outline: dotted 4px tomato;
}

JavaScript

class MyButton extends HTMLElement {
  constructor() {
  	super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
    	<button part="button" type="button" disabled><slot></slot></button>
    `;
	}
}

customElements.define('my-button', MyButton);