Steve Workman's Blog

My Interop 2027 Ranking

Posted on by Steve Workman About 2 min reading time

Inspired by Eric Meyer's blog post on Interop 2027, and Jake Archibald's awesome ranking tool, I made my personal ranking of what I'd like to see in Interop (the annual list of what browser vendors agree to work on together) for 2027.

My Top 3

  1. JavaScript Temporal. A modern and extensive date/time API to replace Date.
  2. Multiple import maps. Allows multiple import maps in a single document, and allows modules to load before unrelated import maps.
  3. Sanitizer API, via document.parseHTML() and element.setHTML(). Customizes the sanitization of HTML inserted into the DOM, to prevent cross-site scripting attacks.

Temporal is awesome. I've now actively used it in a project and it is deliciously simple to work with, especially for those "5 minutes ago" functions that always cost more JavaScript than it should. This is doubly true when you want to correctly localise the text.

Multiple Import Maps is a spec that is currently holding back the whole import maps project as a way to optimally manage dependencies. I've had a vision of how import maps solve issues of micro-front-end / web component dependencies for years, but its not possible to dynamically create them, they need to be injected, and only one of them! This solves a big issue and for me it allows other teams to work together and not duplicate all of their dependencies

Sanitizer API is another API that I constantly have to import to do things. I'd love to never have to use dompurify again, and all of the bundle size that that saves.

The Rest

  1. JavaScript CSS module imports. import … with { type: "css" } to load CSS resources as constructable stylesheets. Would be super helpful for web components.
  2. Shadow DOM referenceTarget. Forwards IDrefs (such as for and aria-labelledby) to an element inside a shadow root. Accessibility for web components has been a big issue for multiple years now - I hope to see this resolved too
  3. Improve interoperability of pointer events on touch devices - If Apple could implement the spec nicely that would be great
  4. Web app installation via <install> and navigator.install(). Prompts the user to install a progressive web app. - I would like this but have mixed feelings as I'm certain it would be abused by spam adverts.
  5. DOM moveBefore(). Relocates a node while preserving its state like focus, animation, or move an iframe without reloading its content.
  6. Pause media in hidden iframes. The media-playback-while-not-visible permission policy pauses audible media in iframes that are hidden. Effectively stopping all ads screaming in my ear.
  7. CSS var() in size container queries. Such as @container (width >= var(--min-width)). This would remove another need for CSS preprocessors, I'm all for it.

A few that would be cool

  1. CSS ::scroll-marker and ::scroll-marker-group pseudo-elements. Generates navigation markers for scroll containers, for things like carousels, tabs, and tables of contents.
  2. CSS @supports at-rule(). Checks if a CSS at-rule is supported.
  3. Responsive iframes. The frame-sizing CSS property sizes an <iframe> to its content, avoiding scrolling within the iframe.
  4. CSS :host(:has(…)). Selects a shadow host based on its light DOM descendants.
  5. Deprecate customized built-in elements (via the is attribute). Remove the feature from the spec and the browsers that implement it.

So, that's my list. Fingers crossed for 2027.