2027 Web Platform Feature Ranking

Patrick O'Brien

Ranked proposals (top = most important)

  1. CSS :host(:has(…))

    Selects a shadow host based on its light DOM descendants.

  2. CSS :has-⁠slotted pseudo-class

    Matches <slot> elements that have slotted content, rather than showing fallback content.

  3. CSS anchor positioning across shadow roots

    Allows elements in shadow trees to reference anchor names defined in "higher" trees.

  4. JavaScript Temporal

    A modern and extensive date/time API to replace Date.

  5. JavaScript CSS module imports

    import … with { type: "css" } to load CSS resources as constructable stylesheets.

  6. Shadow DOM referenceTarget

    Forwards IDrefs (such as for and aria-⁠labelledby) to an element inside a shadow root.

  7. Customizable/stylable <select>

    Customize the button, selected option, picker, and options with CSS.

  8. CSS anchored container queries

    @container anchored(fallback: …) applies styles based on which position fallback an anchor-positioned element is using.

  9. CSS if() function

    An inline conditional value that returns a value based on a set of conditions.

  10. CSS @function

    Defines custom functions that take arguments and return a CSS value.

  11. CSS anchor positioning with transforms and animations

    Anchor-positioned elements track transforms on their anchors, and changes to the calculated anchor() triggers transitions.

  12. Promises from programmatic scroll methods

    scroll(), scrollTo(), scrollBy(), and scrollIntoView() return promises that resolve when scrolling completes.

  13. Interest invokers

    The interestfor attribute triggers actions on a target element when the user shows interest, such as via hover, focus, or long-press.

  14. Sanitizer API, via document.parseHTML() and element.setHTML()

    Customizes the sanitization of HTML inserted into the DOM, to prevent cross-site scripting attacks.