How should work? – JakeArchibald.com

We’re finally getting a way to fully style & customise elements! But there’s a detail I’d like everyone’s opinion on.

If you want to hear about it in depth, I talked about it on OTMT, and there’s a great post by Una Kravets. But here’s a whirlwind tour:

style>
  
  select,
  ::picker(select) {
    appearance: base-select;
  }
style>

select>
  
  button>
    …
    
    selectedoption>selectedoption>
  button>

  
  option>…option>
  option>…option>
  option>…option>
select>

And that’s as much background as you need for the rest of this post.

automatically displays the currently selected within the that opens the popover menu.

It’s entirely optional, so if you wanted to manually update the content of the

when the selected changes, you can, and you get a lot more control that way. But is much easier, and works without JavaScript.

When the selected changes, it clears the contents of the , takes a clone of the contents of the newly selected , and inserts it into the .

This is kinda new and weird behaviour. I recently wrote that I didn’t like elements that modify themselves, as I think the light DOM should have a single owner. But, I can’t think of a better way to do this, given:

• The content needs to render in two places at once – in the button and in the menu.
• The selected option needs to be able to be styled differently to the equivalent content in the .
• The solution must work without JavaScript.

But there are limitations

This is a clone in the el.cloneNode(true) sense. That means it’s a copy of the tree, including attributes, but not including properties, event listeners, or any other internal state. So, if the selected option contains a , the clone will be a blank canvas. An will reload using the src attribute. CSS animations will appear to start over, since they’re newly constructed elements. Custom elements will be constructed afresh, and may have different internal state to the cloned element.

As far as I can tell, in most cases this will be fine, as the kinds of elements you’d typically use in an are fully configurable via attributes.

This is the bit I want your opinion on. I’m going to present a series of options, and point out potential limitations/gotchas/issues with each. Not all of these issues are equal, and you may even feel some of them are features rather than bugs (I certainly do).

Editing the content of elements isn’t super common, but it’s possible, so we need to define what happens. It might happen when:

• Enhancing options with additional data. For example, you might discover asynchronously that an option is “almost sold out”, and want to display that information in the .
• Dynamically modifying styles in response to interaction. Most animation libraries modify element.style, which also updates the style attribute.
• Going from a ‘loading’ state to a ‘loaded’ state.

For example, imagine a React app like this:

function CustomSelect({ options }) {
  return (
    select>
      button>
        selectedoption>selectedoption>
      button>

      {options.map((option) => (
        option value={option.value}>
          {option.icon && img src={option.icon} alt={option.iconAlt} />}
          {option.text}
        option>
      ))}
    select>
  );
}

function App() {
  const [options, setOptions] = useState([
    {
      text: 'Loading…',
    },
  ]);

  useEffect(() => {
    
  }, []);

  return CustomSelect options={options} />;
}

Because the above example doesn’t give each a meaningful key, React will modify the first ‘loading’ to become the first real when the data loads. It’s better to use key in this situation, which would cause React to create a new element, but not everyone does this.

You might see a similar pattern to above when updating

depending on a choice made earlier in a form.

const selectedOption = select.selectedOptions[0];

selectedOption.append(selectedOption.firstChild);

const selectedOption = select.selectedOptions[0];

const selectedOptionMirror = select.querySelector('selectedoption');

selectedOption.textContent = 'New text';


console.log(selectedOption.textContent === selectedOptionMirror.textContent);