Hot New
🔥HTML🔥

Features!

Alex Riviere

Senior Front End Developer

Hygiena

Slides:

https://slides.com/fimion/stirtrek-2025/

HTML 5

  • WHATWG began Drafting in 2004

  • W3C Recommended Status October 2014

  • HTML Living Standard moved to WHATWG Control in 2019

ES6

Standardized by TC39 in 2015

This talk will cover:

  • <details>/<summary> Elements
  • <dialog> Element
  • the inert attribute
  • Popover Api
  • attributes and attr()
  • Declarative ShadowDom
  • <select> Elements

Details/Summary

(Aka Hide extra information)

Details/Summary

Details Element

Details/Summary

Summary Element

Details/Summary

open Attribute

Details/Summary

Accordion Example

Details/Summary

Accordion example with name attribute

Details/Summary

Baseline Status

Details/Summary

Style the new ::details-content (Author: Adam Argyle)

Details/Summary

Baseline Support

Details/Summary

More Information:

Dialog Element

(Aka Modals Modals Modals!)

Dialog Element

Basic Dialog

Dialog Element

Basic Dialog with JS

Dialog Element

Basic Dialog with showModal

Dialog Element

Basic Dialog with showModal and close form

Dialog Element

Baseline Support

Dialog Element

More Information:

the inert attribute

(Aka FREEZE!)

inert Attribute

inert demo

inert Attribute

Specific Behaviors

  • Prevents the click event from being fired when the user clicks on the element.
  • Prevents the focus event from being raised by preventing the element from gaining focus.
  • Prevents any contents of the element from being found/matched during any use of the browser's find-in-page feature.
  • Prevents users from selecting text within the element — akin to using the CSS property user-select to disable text selection.
  • Prevents users from editing any contents of the element that are otherwise editable.
  • Hides the element and its content from assistive technologies by excluding them from the accessibility tree.

inert Attribute

Notice!

Do NOT use inert unless you are sure.
 

Forms, Inputs, Buttons, Selects should use disabled rather than inert to make them not useable.

Ideally, you should never need to use inert.

inert Attribute

Baseline Support

inert Attribute

More Information:

Popover API

(Aka Menus not Selects)

Popover API

Basic Popover

Popover API

Manual Popover Options

Popover Api

Baseline Support

Popover API

Basic Popover

Popover Api

Popover with Anchor Positioning

Anchor Positioning

Baseline Support

Dialog Element

Basic Dialog with showModal and close form

Dialog Element

Basic Dialog with popover

Dialog Element

Basic Dialog with Invoker Command

Invoker Commands

Baseline Support

Popover API

More Information:

Attributes and attr()

(Aka Styles from your HTML)

attr()

Basic attr() usage

attr()

Advanced attr() usage

attr()

Allowed Types

  • <angle>
  • <color>
  • <custom-ident>
  • <image>
  • <integer>
  • <length>
  • <length-percentage>
  • <number>
  • <percentage>
  • <resolution>
  • <string>
  • <time>
  • <transform-function>

Advanced attr()

Baseline Support

attr()

More Information:

Declarative ShadowDOM

(Aka Server Side Rendered

Web Components)

Declarative ShadowDOM

Basic Custom Element Example

Declarative ShadowDOM

Delayed Custom Element Example

Declarative ShadowDOM

Delayed Custom Element Example with Declartive ShadowDOM

Declarative ShadowDOM

Custom Declartive ShadowDOM with default fallback

Declarative ShadowDOM

Please Don't Do This

Declarative ShadowDOM

Baseline Support

Declarative ShadowDOM

More Information:

Things Achieved by Humanity Since 1995

  • Sequencing of the Human Genome
  • 23 missions to mars
  • Taken a photo of a black hole
  • Proved the existence of the Higgs Boson
  • The entire life cycle of the iPod

Styleable Selects

(Aka FREAKING FINALLY)

Styleable Selects

A Basic Select with some style

Styleable Selects

appearance: base-select

Styleable Selects

::picker(select)

Styleable Selects

<selectedcontent>

Styleable Selects

Baseline Support

Styleable Selects

More Information:

Slides:

Deets:

Alex Riviere

CodePens:

https://codepen.io/collection/adOvgL

https://slides.com/fimion/stirtrek-2025