[selectmenu] Accept "option" elements through multiple slots #565
Description
Referencing the awesome demos for this element available at https://microsoftedge.github.io/Demos/selectmenu/ I am thinking about how a developer might like to components the delivery of such a customization of the <selectmenu> element. This will likely be of high importance to design system developers who will need to ensure the newly possibly custom styling of this element is normalized across a broad field of usage.
For instance, working from the Dribble Filter example (for its simplicity, but the ideas below could easily apply to any of the demos listed), it would be great to be able to make a custom element to encapsulate the design delivery, while reducing the lift a consuming developer needs to recreate the visual and functional delivery via something like:
<x-selectmenu>
<option value="now" checked="">Now</option>
<option value="week">This Past Week</option>
<option value="month">This Past Month</option>
<option value="year">This Past Year</option>
<option value="all">All Time</option>
<template shadowroot="open">
<selectmenu id="timeframe-filter">
<div slot="button" behavior="button">
<button behavior="selected-value">This Past Year</button>
</div>
<slot></slot>
</selectmenu>
<style>
button {
padding: .5rem;
border-radius: .3rem;
width: 100%;
text-align: left;
box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
border: 0;
background: white;
color: #6e6d7a;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
}
button:active {
transform: translate(1px, 1px);
}
button:hover,
selectmenu:focus-within button {
color: black;
}
button:hover,
selectmenu:focus-within button:not(:active) {
box-shadow: 0 0 0 4px rgba(234, 76, 137, 0.1);
}
button::after {
content: '';
width: 1rem;
height: 1rem;
background: #e7e7e9;
clip-path: polygon(10% 20%, 90% 20%, 50% 80%);
transform-origin: center;
transition: transform .2s ease-in-out;
}
selectmenu:focus-within button::after {
transform: scaleY(-1);
}
[popup] {
border-radius: .3rem;
border: none;
box-shadow: 0 0 .3rem rgba(0, 0, 0, .25);
padding: 0;
margin-top: .5rem;
}
::slotted(option) {
padding: .5rem;
color: #6e6d7a;
cursor: pointer;
padding-right: 2rem;
display: flex;
gap: .5rem;
align-items: center;
}
::slotted(option:hover) {
background: #e7e7e9;
}
::slotted(option:checked) {
color: #ea4c89;
}
</style>
</template>
</x-selectmenu>This way a consuming developer really only need to worry with:
<x-selectmenu>
<option value="now" checked="">Now</option>
<option value="week">This Past Week</option>
<option value="month">This Past Month</option>
<option value="year">This Past Year</option>
<option value="all">All Time</option>
</x-selectmenu>Does it look like something we can expect the specification to cover?
In particular, the <option> elements are being passed through a <slot> into a deeper <slot> that lists the in the <selectmenu> as its options.
Neither of the current Chrome and Edge Canary releases seem to support this via this Code Pen, but hopefully this is just early days still and the move to open up the broader styling and usability of the styling on <select> style interfaces includes this capability.