2027 Web Platform Feature Ranking

Ranked proposals (top = most important)

1. Customizable/stylable <select>

   Customize the button, selected option, picker, and options with CSS.
2. Shadow DOM referenceTarget

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

   Combines descendant elements into a single tab stop, with arrow-key navigation between them.
4. HTML headingoffset and headingreset attributes

   Offsets the heading level of descendant <h1>–<h6> elements. Includes the CSS :heading() pseudo-class.
5. Allow CSS transitioning/animating display and content-⁠visibility

   Useful for delaying display: none until an exit animation completes.
6. CSS interpolate-⁠size property and calc-⁠size() function

   Allows animating to height: auto, and using intrinsic sizes in calculations.
7. CSS anchor positioning across shadow roots

   Allows elements in shadow trees to reference anchor names defined in "higher" trees.
8. CSS anchor positioning with transforms and animations

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

   @container anchored(fallback: …) applies styles based on which position fallback an anchor-positioned element is using.
10. CSS var() in size container queries

    Such as @container (width >= var(-⁠-⁠min-⁠width)).
11. CSS :has-⁠slotted pseudo-class

    Matches <slot> elements that have slotted content, rather than showing fallback content.
12. CSS :host(:has(…))

    Selects a shadow host based on its light DOM descendants.
13. Targeted SVG improvements

    SVG filters, context-⁠fill/context-⁠stroke, <use> without a fragment, and path data APIs.
14. CSS linked parameters

    Allows passing custom properties into external SVG resources, such as colors.
15. DOM moveBefore()

    Relocates a node while preserving its state like focus, animation, or move an iframe without reloading its content.
16. CSS inherit() function

    Like var(), but uses the parent element's value of the custom property.
17. CSS AccentColor system color reflects accent-⁠color

    Provides a consistent way to style custom form controls to match native ones.
18. CSS gap decorations

    column-⁠rule and row-⁠rule display decorative lines between columns and rows of a flex, grid, or multi-column layout.
19. Viewport Segments API

    Adapt layouts to devices where the display is split, such as foldables.
20. Web app installation via <install> and navigator.install()

    Prompts the user to install a progressive web app.