JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  Native Select:
  <select>
    <option value=1 selected>One</option>
    <option value=2>Two</option>
    <option value=3>Three</option>
  </select>
</label>
<label>
  My Select:
  <my-select placeholder="Please select one">
    <my-select-option selected value=1>One</my-select-option>
    <my-select-option value=2>Two</my-select-option>
    <my-select-option value=3>Three</my-select-option>
  </my-select>
</label>

<div class="log">Log:</div>

SCSS

// Reset & Base
* {margin:0;padding:0;box-sizing:border-box}
html {background: white;font-family: sans-serif;font-size: 16px;}
label {display: block;margin: 1rem;}
.log {background: #eee; padding: 0.5rem}

// My Select
my-select {
	font-size: 0.85rem;
	display: inline-block;
	border: 1px solid darkgrey;
	background: white;
	padding: 0.125rem 0.3rem;
	-webkit-user-select: none;
	cursor: pointer;

	&[disabled] {
		cursor: default;
		color: lightgrey;
		border-color: currentColor;
	}

	&:after {
		content: "";
		height: 0;
		width: 0;
		border-left: 0.3rem solid transparent;
		border-right: 0.3rem solid transparent;
		border-top: 0.3rem solid currentColor;
		display: inline-block;
		margin-left: 0.3rem;
		vertical-align: middle;
	}

}

my-select-option {
	display: none !important;
}

JavaScript

// Custom Elements
var MySelectOptionProto = Object.create(HTMLElement.prototype);
document.registerElement('my-select-option', { prototype: MySelectOptionProto});

var MySelectProto = Object.create(HTMLElement.prototype);
MySelectProto.createdCallback = function() {
	if (!this.getAttribute('tabindex')) {
		this.setAttribute('tabindex', 0);
	}
	this.placeholder = document.createElement('span');
	this.placeholder.className = 'my-select-placeholder';
	this.appendChild(this.placeholder);
  
	var selected = this.querySelector('my-select-option[selected]');
	this.placeholder.textContent = selected ? selected.textContent : (this.getAttribute('placeholder') || '');
};
document.registerElement('my-select', { prototype: MySelectProto});

// Log clicks
$('select,my-select').on('click', function(evt) { 
	console.log(evt.log);
	$('.log').append($('<div>'+evt.currentTarget.tagName+'</div>'));
});