From d2eff6d9d2baa6c90488571b91e5cf8ba16b0e9b Mon Sep 17 00:00:00 2001
From: Luca Casonato <hello@lcas.dev>
Date: Wed, 17 Jun 2026 16:18:29 +0200
Subject: [PATCH] Localized time formatting in `<time>`

---
 source | 682 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 680 insertions(+), 2 deletions(-)

diff --git a/source b/source
index a4343a19ac5..67f1d2c807a 100644
--- a/source
+++ b/source
@@ -3216,7 +3216,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     </ul>
 
     <p>User agents that support JavaScript must also implement <cite>ECMAScript
-    Internationalization API</cite>. <ref>JSINTL</ref></p>
+    Internationalization API</cite>. The following terms are defined there, and used in this
+    specification: <ref>JSINTL</ref></p>
+
+    <ul class="brief">
+     <li>The <dfn data-x="js-Intl.DateTimeFormat" data-x-href="https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor"><code>Intl.DateTimeFormat</code></dfn> constructor</li>
+     <li>The <dfn data-x="js-Intl.DateTimeFormat.prototype.formatToParts" data-x-href="https://tc39.es/ecma402/#sec-Intl.DateTimeFormat.prototype.formatToParts"><code>Intl.DateTimeFormat.prototype.formatToParts</code></dfn> method</li>
+     <li>The <dfn data-x="js-AvailableCalendars" data-x-href="https://tc39.es/ecma402/#sec-availablecalendars">AvailableCalendars</dfn> abstract operation</li>
+     <li>The <dfn data-x="js-DefaultTimeZone" data-x-href="https://tc39.es/ecma402/#sec-defaulttimezone">DefaultTimeZone</dfn> abstract operation</li>
+    </ul>
 
     <p>User agents that support JavaScript must also implement the <cite>Temporal</cite> proposal.
     The following terms are defined there, and used in this specification: <ref>JSTEMPORAL</ref></p>
@@ -3225,6 +3233,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x="js-HostSystemUTCEpochNanoseconds" data-x-href="https://tc39.es/proposal-temporal/#sec-hostsystemutcepochnanoseconds">HostSystemUTCEpochNanoseconds</dfn> abstract operation</li>
      <li>The <dfn data-x-href="https://tc39.es/proposal-temporal/#eqn-nsMaxInstant">nsMaxInstant</dfn> and
          <dfn data-x-href="https://tc39.es/proposal-temporal/#eqn-nsMinInstant">nsMinInstant</dfn> values</li>
+     <li>The <dfn data-x="js-Temporal.PlainDate" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal-plaindate-objects"><code>Temporal.PlainDate</code></dfn> interface</li>
+     <li>The <dfn data-x="js-Temporal.PlainTime" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal-plaintime-objects"><code>Temporal.PlainTime</code></dfn> interface</li>
+     <li>The <dfn data-x="js-Temporal.PlainDateTime" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal-plaindatetime-objects"><code>Temporal.PlainDateTime</code></dfn> interface</li>
+     <li>The <dfn data-x="js-Temporal.PlainYearMonth" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal-plainyearmonth-objects"><code>Temporal.PlainYearMonth</code></dfn> interface</li>
+     <li>The <dfn data-x="js-Temporal.PlainMonthDay" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal-plainmonthday-objects"><code>Temporal.PlainMonthDay</code></dfn> interface</li>
+     <li>The <dfn data-x="js-Temporal.Instant" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal-instant-objects"><code>Temporal.Instant</code></dfn> interface, and its <dfn data-x="js-Temporal.Instant-toZonedDateTimeISO" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal.instant.prototype.tozoneddatetimeiso">toZonedDateTimeISO</dfn> method</li>
+     <li>The <dfn data-x="js-Temporal.ZonedDateTime" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal-zoneddatetime-objects"><code>Temporal.ZonedDateTime</code></dfn> interface, and its <dfn data-x="js-Temporal.ZonedDateTime-withTimeZone" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal.zoneddatetime.prototype.withtimezone">withTimeZone</dfn> method and <dfn data-x="js-Temporal.ZonedDateTime-withCalendar" data-x-href="https://tc39.es/proposal-temporal/#sec-temporal.zoneddatetime.prototype.withcalendar">withCalendar</dfn> method</li>
     </ul>
    </dd>
 
@@ -24908,13 +24923,27 @@ interface <dfn interface>HTMLDataElement</dfn> : <span>HTMLElement</span> {
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-time-datetime">datetime</code></dd>
+   <dd><code data-x="attr-time-format">format</code></dd>
+   <dd><code data-x="attr-time-datefields">datefields</code></dd>
+   <dd><code data-x="attr-time-datelength">datelength</code></dd>
+   <dd><code data-x="attr-time-timeprecision">timeprecision</code></dd>
+   <dd><code data-x="attr-time-timezonestyle">timezonestyle</code></dd>
+   <dd><code data-x="attr-time-hour12">hour12</code></dd>
+   <dd><code data-x="attr-time-calendar">calendar</code></dd>
+   <dd><code data-x="attr-time-timezone">timezone</code></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
    <dd><a href="https://w3c.github.io/html-aria/#el-time">For authors</a>.</dd>
    <dd><a href="https://w3c.github.io/html-aam/#el-time">For implementers</a>.</dd>
    <dt><span data-x="concept-element-sanitization">Sanitization</span>:</dt>
    <dd><span data-x="sanitizer-category-default">Default</span> with attributes <code
-   data-x="attr-time-datetime">datetime</code>.</dd>
+   data-x="attr-time-datetime">datetime</code>, <code data-x="attr-time-format">format</code>, <code
+   data-x="attr-time-datefields">datefields</code>, <code
+   data-x="attr-time-datelength">datelength</code>, <code
+   data-x="attr-time-timeprecision">timeprecision</code>, <code
+   data-x="attr-time-timezonestyle">timezonestyle</code>, <code
+   data-x="attr-time-hour12">hour12</code>, <code data-x="attr-time-calendar">calendar</code>, <code
+   data-x="attr-time-timezone">timezone</code>.</dd>
    <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
    <dd w-nodev>
 <pre><code class="idl">[Exposed=Window]
@@ -24922,6 +24951,14 @@ interface <dfn interface>HTMLTimeElement</dfn> : <span>HTMLElement</span> {
   [<span>HTMLConstructor</span>] constructor();
 
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-dateTime">dateTime</dfn>;
+  [<span>CEReactions</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-format">format</dfn>;
+  [<span>CEReactions</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-dateFields">dateFields</dfn>;
+  [<span>CEReactions</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-dateLength">dateLength</dfn>;
+  [<span>CEReactions</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-timePrecision">timePrecision</dfn>;
+  [<span>CEReactions</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-timeZoneStyle">timeZoneStyle</dfn>;
+  [<span>CEReactions</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-hour12">hour12</dfn>;
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-calendar">calendar</dfn>;
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLTimeElement" data-x="dom-time-timeZone">timeZone</dfn>;
 };</code></pre>
    </dd>
    <dd w-dev>Uses <code>HTMLTimeElement</code>.</dd>
@@ -25154,6 +25191,605 @@ interface <dfn interface>HTMLTimeElement</dfn> : <span>HTMLElement</span> {
   efficient approach might be to create a single algorithm that parses all these data types in one
   pass; developing such an algorithm is left as an exercise to the reader.</p>
 
+  </div>
+
+
+  <h5>Formatting dates and times</h5>
+
+  <p>By default, a <code>time</code> element <span>represents</span> the <span>child text
+  content</span> of the element verbatim. Because the author writing the markup does not in general
+  know the time zone, locale, or calendar preferences of the user who will read it, this means that
+  an absolute moment in time cannot be presented in the reader's own preferences without scripting.
+  To allow such presentation declaratively, a <code>time</code> element can opt in to having the user
+  agent format its <span>machine-readable equivalent of the element's contents</span> for display,
+  using the reader's preferences together with formatting options provided by the author.</p>
+
+  <p>When formatting is enabled and possible, the formatted value is rendered in place of the
+  element's <span>child text content</span> using a <span>shadow tree</span>, as described in <a
+  href="#the-time-element-rendering">the rendering section</a>. The <span>child text content</span> continues
+  to serve as fallback content: it is what is shown by user agents that do not support this feature,
+  and what is shown when the <span>datetime value</span> cannot be formatted (for example, because it
+  is a <span data-x="concept-duration">duration</span> or because a requested locale or calendar is
+  unavailable).</p>
+
+  <div class="example">
+   <p>In this example, the author marks up an absolute moment in time, requesting that it be shown to
+   each reader as a localized date and time in the reader's own time zone, while providing a
+   human-readable fallback for user agents that do not support formatting:</p>
+
+   <pre><code class="html">&lt;time datetime="2026-06-17T08:13:41.099Z" format="datetime"&gt;
+  17 June 2026, 08:13 UTC
+&lt;/time&gt;</code></pre>
+  </div>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-format">format</code></dfn> attribute is
+  an <span>enumerated attribute</span> that enables formatting and controls which of the date and the
+  time are shown. It has the following keywords and states:</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="time/format"><code data-x="attr-time-format-date">date</code></dfn>
+     <td><dfn data-x="attr-time-format-date-state">Date</dfn>
+     <td>Format and show the date only.
+    <tr>
+     <td><dfn attr-value for="time/format"><code data-x="attr-time-format-time">time</code></dfn>
+     <td><dfn data-x="attr-time-format-time-state">Time</dfn>
+     <td>Format and show the time only.
+    <tr>
+     <td><dfn attr-value for="time/format"><code data-x="attr-time-format-datetime">datetime</code></dfn>
+     <td><dfn data-x="attr-time-format-datetime-state">Date and time</dfn>
+     <td>Format and show both the date and the time.
+  </table>
+
+  <div algorithm>
+  <p>The attribute's <i data-x="missing value default">missing value default</i> is the <dfn
+  data-x="attr-time-format-off-state">Off</dfn> state, in which the element's contents are not
+  formatted. The attribute has no <i data-x="invalid value default">invalid value default</i>, so an
+  invalid value maps to no state; like the <span data-x="attr-time-format-off-state">Off</span>
+  state, this disables formatting.</p>
+  </div>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-datefields">datefields</code></dfn>
+  attribute is an <span>enumerated attribute</span> that controls which fields of the date are shown
+  when the <code data-x="attr-time-format">format</code> attribute is in the <span
+  data-x="attr-time-format-date-state">Date</span> or <span data-x="attr-time-format-datetime-state">Date
+  and time</span> state. It has the following keywords and states, where the <i>fields</i> column
+  gives the set of date fields shown:</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Fields
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="time/datefields"><code data-x="attr-time-datefields-weekday">weekday</code></dfn>
+     <td><dfn data-x="attr-time-datefields-weekday-state">Weekday</dfn>
+     <td>weekday
+    <tr>
+     <td><dfn attr-value for="time/datefields"><code data-x="attr-time-datefields-day-weekday">day-weekday</code></dfn>
+     <td><dfn data-x="attr-time-datefields-day-weekday-state">Day and weekday</dfn>
+     <td>day, weekday
+    <tr>
+     <td><dfn attr-value for="time/datefields"><code data-x="attr-time-datefields-month-day">month-day</code></dfn>
+     <td><dfn data-x="attr-time-datefields-month-day-state">Month and day</dfn>
+     <td>month, day
+    <tr>
+     <td><dfn attr-value for="time/datefields"><code data-x="attr-time-datefields-month-day-weekday">month-day-weekday</code></dfn>
+     <td><dfn data-x="attr-time-datefields-month-day-weekday-state">Month, day, and weekday</dfn>
+     <td>month, day, weekday
+    <tr>
+     <td><dfn attr-value for="time/datefields"><code data-x="attr-time-datefields-year-month">year-month</code></dfn>
+     <td><dfn data-x="attr-time-datefields-year-month-state">Year and month</dfn>
+     <td>year, month
+    <tr>
+     <td><dfn attr-value for="time/datefields"><code data-x="attr-time-datefields-year-month-day">year-month-day</code></dfn>
+     <td><dfn data-x="attr-time-datefields-year-month-day-state">Year, month, and day</dfn>
+     <td>year, month, day
+    <tr>
+     <td><dfn attr-value for="time/datefields"><code data-x="attr-time-datefields-year-month-day-weekday">year-month-day-weekday</code></dfn>
+     <td><dfn data-x="attr-time-datefields-year-month-day-weekday-state">Year, month, day, and weekday</dfn>
+     <td>year, month, day, weekday
+  </table>
+
+  <div algorithm>
+  <p>The attribute's <i data-x="missing value default">missing value default</i> is the <span
+  data-x="attr-time-datefields-year-month-day-state">Year, month, and day</span> state. The attribute
+  has no <i data-x="invalid value default">invalid value default</i>, so an invalid value maps to no
+  state, which causes formatting to fail and the element's contents to be shown verbatim.</p>
+  </div>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-datelength">datelength</code></dfn>
+  attribute is an <span>enumerated attribute</span> that controls how the shown date fields are
+  formatted. It has the following keywords and states:</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="time/datelength"><code data-x="attr-time-datelength-long">long</code></dfn>
+     <td><dfn data-x="attr-time-datelength-long-state">Long</dfn>
+     <td>For example, a month is shown as its full name.
+    <tr>
+     <td><dfn attr-value for="time/datelength"><code data-x="attr-time-datelength-medium">medium</code></dfn>
+     <td><dfn data-x="attr-time-datelength-medium-state">Medium</dfn>
+     <td>For example, a month is shown as an abbreviation.
+    <tr>
+     <td><dfn attr-value for="time/datelength"><code data-x="attr-time-datelength-short">short</code></dfn>
+     <td><dfn data-x="attr-time-datelength-short-state">Short</dfn>
+     <td>For example, a month is shown as a number.
+  </table>
+
+  <div algorithm>
+  <p>The attribute's <i data-x="missing value default">missing value default</i> is the <span
+  data-x="attr-time-datelength-long-state">Long</span> state. The attribute has no <i
+  data-x="invalid value default">invalid value default</i>, so an invalid value maps to no state,
+  which causes formatting to fail and the element's contents to be shown verbatim.</p>
+  </div>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-timeprecision">timeprecision</code></dfn>
+  attribute is an <span>enumerated attribute</span> that controls the granularity to which the time
+  is shown when the <code data-x="attr-time-format">format</code> attribute is in the <span
+  data-x="attr-time-format-time-state">Time</span> or <span data-x="attr-time-format-datetime-state">Date
+  and time</span> state. It has the following keywords and states:</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="time/timeprecision"><code data-x="attr-time-timeprecision-hour">hour</code></dfn>
+     <td><dfn data-x="attr-time-timeprecision-hour-state">Hour</dfn>
+     <td>Show the hour.
+    <tr>
+     <td><dfn attr-value for="time/timeprecision"><code data-x="attr-time-timeprecision-minute">minute</code></dfn>
+     <td><dfn data-x="attr-time-timeprecision-minute-state">Minute</dfn>
+     <td>Show the hour and minute.
+    <tr>
+     <td><dfn attr-value for="time/timeprecision"><code data-x="attr-time-timeprecision-second">second</code></dfn>
+     <td><dfn data-x="attr-time-timeprecision-second-state">Second</dfn>
+     <td>Show the hour, minute, and second.
+  </table>
+
+  <div algorithm>
+  <p>The attribute's <i data-x="missing value default">missing value default</i> is the <span
+  data-x="attr-time-timeprecision-second-state">Second</span> state. The attribute has no <i
+  data-x="invalid value default">invalid value default</i>, so an invalid value maps to no state,
+  which causes formatting to fail and the element's contents to be shown verbatim.</p>
+  </div>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-timezonestyle">timezonestyle</code></dfn>
+  attribute is an <span>enumerated attribute</span> that controls whether, and how, a time zone is
+  shown. It has the following keywords and states:</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="time/timezonestyle"><code data-x="attr-time-timezonestyle-long">long</code></dfn>
+     <td><dfn data-x="attr-time-timezonestyle-long-state">Long</dfn>
+     <td>For example, "Pacific Standard Time".
+    <tr>
+     <td><dfn attr-value for="time/timezonestyle"><code data-x="attr-time-timezonestyle-short">short</code></dfn>
+     <td><dfn data-x="attr-time-timezonestyle-short-state">Short</dfn>
+     <td>For example, "PST".
+  </table>
+
+  <div algorithm>
+  <p>The attribute's <i data-x="missing value default">missing value default</i> and <i
+  data-x="empty value default">empty value default</i> are both the <dfn
+  data-x="attr-time-timezonestyle-none-state">None</dfn> state, in which no time zone is shown. (So
+  both omitting the attribute and specifying <code data-x="">timezonestyle=""</code> result in the
+  <span data-x="attr-time-timezonestyle-none-state">None</span> state.) The attribute has no <i
+  data-x="invalid value default">invalid value default</i>, so any other invalid value maps to no
+  state, which causes formatting to fail and the element's contents to be shown verbatim.</p>
+  </div>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-hour12">hour12</code></dfn> attribute is
+  an <span>enumerated attribute</span> that controls whether the time is shown using a 12-hour clock
+  or a 24-hour clock. It has the following keywords and states:</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="time/hour12"><code data-x="attr-time-hour12-12">12</code></dfn>
+     <td><dfn data-x="attr-time-hour12-12-state">12-hour</dfn>
+     <td>Use a 12-hour clock.
+    <tr>
+     <td><dfn attr-value for="time/hour12"><code data-x="attr-time-hour12-24">24</code></dfn>
+     <td><dfn data-x="attr-time-hour12-24-state">24-hour</dfn>
+     <td>Use a 24-hour clock.
+  </table>
+
+  <div algorithm>
+  <p>The attribute's <i data-x="missing value default">missing value default</i> is the <dfn
+  data-x="attr-time-hour12-auto-state">Auto</dfn> state, in which the clock used is the default for
+  the locale. The attribute has no <i data-x="invalid value default">invalid value default</i>, so an
+  invalid value maps to no state, which causes formatting to fail and the element's contents to be
+  shown verbatim.</p>
+  </div>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-calendar">calendar</code></dfn>
+  attribute, if present, gives the calendar in which the date is shown. Its value must be either a
+  <span data-x="js-AvailableCalendars">calendar identifier</span> supported by the user agent or the
+  string "<code data-x="">input</code>". The value "<code data-x="">input</code>", which is also the
+  default when the attribute is absent, indicates that the calendar of the parsed <code
+  data-x="attr-time-datetime">datetime</code> is used. If the attribute is present but its value is
+  neither "<code data-x="">input</code>" nor a calendar identifier supported by the user agent,
+  formatting fails and the element's contents are shown verbatim.</p>
+
+  <p>The <dfn element-attr for="time"><code data-x="attr-time-timezone">timezone</code></dfn>
+  attribute, if present, gives the time zone into which the parsed <code
+  data-x="attr-time-datetime">datetime</code> is converted for display. Its value must be either a
+  time zone identifier, the string "<code data-x="">input</code>", or the empty string. The string
+  "<code data-x="">input</code>" indicates that the time zone of the parsed <code
+  data-x="attr-time-datetime">datetime</code> is used, and is only supported when that parsed value is
+  a <span data-x="js-Temporal.ZonedDateTime"><code>Temporal.ZonedDateTime</code></span>. The empty string, which is also the default when the
+  attribute is absent, indicates that the host's <span>current time zone</span> is used.</p>
+
+  <p>The host's <dfn>current time zone</dfn> is the time zone identifier returned by the <span
+  data-x="js-DefaultTimeZone">DefaultTimeZone</span> abstract operation. <ref>JSINTL</ref></p>
+
+  <div w-nodev>
+
+  <hr>
+
+  <div algorithm>
+  <p>The <dfn>parsed datetime</dfn> of a <code>time</code> element <var>element</var> is the result
+  of running these steps:</p>
+
+  <ol>
+   <li><p>Let <var>value</var> be the <span>machine-readable equivalent of the element's
+   contents</span> for <var>element</var>.</p></li>
+
+   <li><p>If there is no such machine-readable equivalent, then return null.</p></li>
+
+   <li>
+    <p>Switch on the type of <var>value</var>:</p>
+
+    <dl class="switch">
+     <dt>A <span data-x="concept-month">month</span></dt>
+     <dd><p>Return the <span data-x="js-Temporal.PlainYearMonth"><code>Temporal.PlainYearMonth</code></span>
+     in the ISO 8601 calendar representing <var>value</var>'s year and month.</p></dd>
+
+     <dt>A <span data-x="concept-date">date</span></dt>
+     <dd><p>Return the <span data-x="js-Temporal.PlainDate"><code>Temporal.PlainDate</code></span> in
+     the ISO 8601 calendar representing <var>value</var>.</p></dd>
+
+     <dt>A <span data-x="concept-yearless-date">yearless date</span></dt>
+     <dd><p>Return the <span data-x="js-Temporal.PlainMonthDay"><code>Temporal.PlainMonthDay</code></span>
+     in the ISO 8601 calendar representing <var>value</var>'s month and day.</p></dd>
+
+     <dt>A <span data-x="concept-time">time</span></dt>
+     <dd><p>Return the <span data-x="js-Temporal.PlainTime"><code>Temporal.PlainTime</code></span>
+     representing <var>value</var>.</p></dd>
+
+     <dt>A <span data-x="concept-datetime-local">local date and time</span></dt>
+     <dd><p>Return the <span data-x="js-Temporal.PlainDateTime"><code>Temporal.PlainDateTime</code></span>
+     in the ISO 8601 calendar representing <var>value</var>.</p></dd>
+
+     <dt>A <span data-x="concept-datetime">global date and time</span></dt>
+     <dd><p>Return the <span data-x="js-Temporal.Instant"><code>Temporal.Instant</code></span>
+     representing <var>value</var>'s moment in time.</p></dd>
+
+     <dt>A <span data-x="js-Temporal.ZonedDateTime"><code>Temporal.ZonedDateTime</code></span></dt>
+     <dd><p>Return <var>value</var>.</p></dd>
+
+     <dt>Otherwise</dt>
+     <dd><p>Return null.</p></dd>
+    </dl>
+   </li>
+  </ol>
+  </div>
+
+  <p class="note">A <span data-x="concept-week">week</span>, a <span
+  data-x="concept-timezone">time-zone offset</span>, a year on its own, and a <span
+  data-x="concept-duration">duration</span> have no <span>parsed datetime</span>; the element's
+  contents are therefore shown verbatim for these. The <span data-x="js-Temporal.ZonedDateTime"><code>Temporal.ZonedDateTime</code></span> case
+  supports a future extension of the <span>machine-readable equivalent of the element's
+  contents</span> algorithm to recognize <cite>RFC 9557</cite> strings carrying a time zone or a
+  calendar annotation; no current <span>datetime value</span> syntax produces one.</p>
+
+  <div algorithm>
+  <p>The <dfn>formatted datetime parts</dfn> of a <code>time</code> element <var>element</var> are
+  obtained by running these steps. They return either a <span>list</span> of <span
+  data-x="js-Intl.DateTimeFormat.prototype.formatToParts">date-time format parts</span> (each being a
+  <span>tuple</span> of a type, which is a string, and a value, which is a string) or null:</p>
+
+  <ol>
+   <li><p>If <var>element</var>'s <code data-x="attr-time-format">format</code> attribute is not in
+   the <span data-x="attr-time-format-date-state">Date</span>, <span
+   data-x="attr-time-format-time-state">Time</span>, or <span
+   data-x="attr-time-format-datetime-state">Date and time</span> state, then return null. (This is the
+   case when the attribute is absent, in the <span data-x="attr-time-format-off-state">Off</span>
+   state, or has an invalid value, in which last case it is in no state.)</p></li>
+
+   <li><p>If any of <var>element</var>'s <code data-x="attr-time-datefields">datefields</code>, <code
+   data-x="attr-time-datelength">datelength</code>, <code
+   data-x="attr-time-timeprecision">timeprecision</code>, <code
+   data-x="attr-time-timezonestyle">timezonestyle</code>, or <code
+   data-x="attr-time-hour12">hour12</code> attributes is in no state, then return null. (These
+   attributes have a <i data-x="missing value default">missing value default</i> but no <i
+   data-x="invalid value default">invalid value default</i>, so they are in no state exactly when
+   they are present with an invalid value.)</p></li>
+
+   <li><p>Let <var>parsedValue</var> be <var>element</var>'s <span>parsed datetime</span>.</p></li>
+
+   <li><p>If <var>parsedValue</var> is null, then return null.</p></li>
+
+   <li><p>Let <var>locale</var> be the <span>language</span> of <var>element</var>. If
+   <var>locale</var> is the empty string or is <span data-x="concept-explicitly-unknown">explicitly
+   unknown</span>, then let <var>locale</var> be the user agent's default locale.</p></li>
+
+   <li><p>Let <var>calendar</var> be the value of <var>element</var>'s <code
+   data-x="attr-time-calendar">calendar</code> attribute, or "<code data-x="">input</code>" if the
+   attribute is absent. If <var>calendar</var> is not "<code data-x="">input</code>" and is not one
+   of the <span data-x="js-AvailableCalendars">calendar identifiers</span> returned by <span
+   data-x="js-AvailableCalendars">AvailableCalendars</span>(), then return null.</p></li>
+
+   <li><p>Let <var>timeZone</var> be the value of <var>element</var>'s <code
+   data-x="attr-time-timezone">timezone</code> attribute, or the empty string if the attribute is
+   absent.</p></li>
+
+   <li>
+    <p>Let <var>valueToFormat</var> be the result of <span data-x="resolve the time zone and calendar
+    of a parsed datetime">resolving the time zone and calendar of a parsed datetime</span> given
+    <var>parsedValue</var>, <var>timeZone</var>, <var>calendar</var>, and <var>element</var>.</p>
+   </li>
+
+   <li><p>If <var>valueToFormat</var> is null, then return null.</p></li>
+
+   <li><p>Let <var>options</var> be the result of <span data-x="compute the date-time formatting
+   options">computing the date-time formatting options</span> for <var>element</var>.</p></li>
+
+   <li><p>Let <var>formatter</var> be the result of constructing an <span
+   data-x="js-Intl.DateTimeFormat"><code>Intl.DateTimeFormat</code></span> object given
+   <var>locale</var> and <var>options</var>. If this throws an exception, then return null.</p></li>
+
+   <li><p>Let <var>parts</var> be the result of calling <span
+   data-x="js-Intl.DateTimeFormat.prototype.formatToParts">formatToParts</span> on
+   <var>formatter</var> with <var>valueToFormat</var>. If this throws an exception, then return
+   null.</p></li>
+
+   <li><p>Return <var>parts</var>.</p></li>
+  </ol>
+  </div>
+
+  <div algorithm>
+  <p>To <dfn>resolve the time zone and calendar of a parsed datetime</dfn>, given a
+  Temporal value <var>parsedValue</var>, a string <var>timeZone</var>, a string
+  <var>calendar</var>, and a <code>time</code> element <var>element</var>:</p>
+
+  <ol>
+   <li>
+    <p>If <var>parsedValue</var> is a <span data-x="js-Temporal.ZonedDateTime"><code>Temporal.ZonedDateTime</code></span>:</p>
+
+    <ol>
+     <li><p>If <var>timeZone</var> is not "<code data-x="">input</code>":</p>
+
+      <ol>
+       <li><p>If <var>timeZone</var> is the empty string, then set <var>timeZone</var> to the host's
+       <span>current time zone</span>.</p></li>
+
+       <li><p>If <var>timeZone</var> is not a valid time zone identifier supported by the user agent,
+       then return null.</p></li>
+
+       <li><p>Set <var>parsedValue</var> to the result of calling <span
+       data-x="js-Temporal.ZonedDateTime-withTimeZone">withTimeZone</span> on <var>parsedValue</var>
+       with <var>timeZone</var>.</p></li>
+      </ol>
+     </li>
+
+     <li><p>If <var>calendar</var> is not "<code data-x="">input</code>", then set
+     <var>parsedValue</var> to the result of calling <span
+     data-x="js-Temporal.ZonedDateTime-withCalendar">withCalendar</span> on <var>parsedValue</var>
+     with <var>calendar</var>.</p></li>
+
+     <li><p>Return <var>parsedValue</var>.</p></li>
+    </ol>
+   </li>
+
+   <li>
+    <p>If <var>parsedValue</var> is a <span data-x="js-Temporal.Instant"><code>Temporal.Instant</code></span>:</p>
+
+    <ol>
+     <li><p>If <var>timeZone</var> is "<code data-x="">input</code>", then return null.</p></li>
+
+     <li><p>If <var>timeZone</var> is the empty string, then set <var>timeZone</var> to the host's
+     <span>current time zone</span>.</p></li>
+
+     <li><p>If <var>timeZone</var> is not a valid time zone identifier supported by the user agent,
+     then return null.</p></li>
+
+     <li><p>Let <var>zoned</var> be the result of calling <span
+     data-x="js-Temporal.Instant-toZonedDateTimeISO">toZonedDateTimeISO</span> on
+     <var>parsedValue</var> with <var>timeZone</var>.</p></li>
+
+     <li><p>If <var>calendar</var> is not "<code data-x="">input</code>", then set <var>zoned</var>
+     to the result of calling <span data-x="js-Temporal.ZonedDateTime-withCalendar">withCalendar</span>
+     on <var>zoned</var> with <var>calendar</var>.</p></li>
+
+     <li><p>Return <var>zoned</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>If <var>element</var>'s <code data-x="attr-time-timezonestyle">timezonestyle</code>
+   attribute is not in the <span data-x="attr-time-timezonestyle-none-state">None</span> state, then
+   return null.</p></li>
+
+   <li><p>If <var>timeZone</var> is not the empty string, then return null.</p></li>
+
+   <li><p>If <var>parsedValue</var> is a <span data-x="js-Temporal.PlainTime"><code>Temporal.PlainTime</code></span> or <var>calendar</var> is
+   "<code data-x="">input</code>", then return <var>parsedValue</var>.</p></li>
+
+   <li><p>Return <var>parsedValue</var> with its calendar set to <var>calendar</var>. (A <span data-x="js-Temporal.PlainTime"><code>Temporal.PlainTime</code></span>
+   has no calendar, so it was already returned by the previous step.)</p></li>
+  </ol>
+  </div>
+
+  <p class="note">A <span data-x="concept-month">month</span>, <span data-x="concept-date">date</span>,
+  <span data-x="concept-yearless-date">yearless date</span>, <span data-x="concept-time">time</span>,
+  and <span data-x="concept-datetime-local">local date and time</span> carry no time-zone information,
+  so a <code data-x="attr-time-timezonestyle">timezonestyle</code> other than the empty string, a
+  <code data-x="attr-time-timezone">timezone</code> of "<code data-x="">input</code>", or a <code
+  data-x="attr-time-timezone">timezone</code> naming a specific zone, cannot be satisfied for them and
+  results in the element's contents being shown verbatim instead.</p>
+
+  <div algorithm>
+  <p>To <dfn>compute the date-time formatting options</dfn> for a <code>time</code> element
+  <var>element</var>, returning a set of options for the <span
+  data-x="js-Intl.DateTimeFormat"><code>Intl.DateTimeFormat</code></span> constructor:</p>
+
+  <ol>
+   <li><p>Let <var>options</var> be a new <span>ordered map</span>.</p></li>
+
+   <li><p>Let <var>length</var> be <var>element</var>'s <code
+   data-x="attr-time-datelength">datelength</code> attribute state.</p></li>
+
+   <li>
+    <p>If <var>element</var>'s <code data-x="attr-time-format">format</code> attribute is in the <span
+    data-x="attr-time-format-date-state">Date</span> state or the <span
+    data-x="attr-time-format-datetime-state">Date and time</span> state, then:</p>
+
+    <ol>
+     <li><p>Let <var>fields</var> be the set of date fields given by <var>element</var>'s <code
+     data-x="attr-time-datefields">datefields</code> attribute state.</p></li>
+
+     <li><p>If <var>fields</var> contains <span data-x="">year</span>, then set
+     <var>options</var>["<code data-x="">year</code>"] to "<code data-x="">numeric</code>".</p></li>
+
+     <li>
+      <p>If <var>fields</var> contains <span data-x="">month</span>, then set
+      <var>options</var>["<code data-x="">month</code>"] to:</p>
+
+      <dl class="switch">
+       <dt><var>length</var> is the <span data-x="attr-time-datelength-long-state">Long</span> state</dt>
+       <dd><p>"<code data-x="">long</code>"</p></dd>
+       <dt><var>length</var> is the <span data-x="attr-time-datelength-short-state">Short</span> state</dt>
+       <dd><p>"<code data-x="">numeric</code>"</p></dd>
+       <dt>Otherwise</dt>
+       <dd><p>"<code data-x="">short</code>"</p></dd>
+      </dl>
+     </li>
+
+     <li><p>If <var>fields</var> contains <span data-x="">day</span>, then set
+     <var>options</var>["<code data-x="">day</code>"] to "<code data-x="">numeric</code>".</p></li>
+
+     <li><p>If <var>fields</var> contains <span data-x="">weekday</span>, then set
+     <var>options</var>["<code data-x="">weekday</code>"] to "<code data-x="">long</code>" if
+     <var>length</var> is the <span data-x="attr-time-datelength-long-state">Long</span> state, and
+     "<code data-x="">short</code>" otherwise.</p></li>
+    </ol>
+   </li>
+
+   <li>
+    <p>If <var>element</var>'s <code data-x="attr-time-format">format</code> attribute is in the <span
+    data-x="attr-time-format-time-state">Time</span> state or the <span
+    data-x="attr-time-format-datetime-state">Date and time</span> state, then switch on
+    <var>element</var>'s <code data-x="attr-time-timeprecision">timeprecision</code> attribute
+    state:</p>
+
+    <dl class="switch">
+     <dt><span data-x="attr-time-timeprecision-hour-state">Hour</span></dt>
+     <dd><p>Set <var>options</var>["<code data-x="">hour</code>"] to "<code
+     data-x="">numeric</code>".</p></dd>
+
+     <dt><span data-x="attr-time-timeprecision-minute-state">Minute</span></dt>
+     <dd><p>Set <var>options</var>["<code data-x="">hour</code>"] and <var>options</var>["<code
+     data-x="">minute</code>"] to "<code data-x="">numeric</code>".</p></dd>
+
+     <dt><span data-x="attr-time-timeprecision-second-state">Second</span></dt>
+     <dd><p>Set <var>options</var>["<code data-x="">hour</code>"], <var>options</var>["<code
+     data-x="">minute</code>"], and <var>options</var>["<code data-x="">second</code>"] to "<code
+     data-x="">numeric</code>".</p></dd>
+    </dl>
+   </li>
+
+   <li>
+    <p>Switch on <var>element</var>'s <code data-x="attr-time-timezonestyle">timezonestyle</code>
+    attribute state:</p>
+
+    <dl class="switch">
+     <dt><span data-x="attr-time-timezonestyle-long-state">Long</span></dt>
+     <dd><p>Set <var>options</var>["<code data-x="">timeZoneName</code>"] to "<code
+     data-x="">long</code>".</p></dd>
+
+     <dt><span data-x="attr-time-timezonestyle-short-state">Short</span></dt>
+     <dd><p>Set <var>options</var>["<code data-x="">timeZoneName</code>"] to "<code
+     data-x="">short</code>".</p></dd>
+
+     <dt><span data-x="attr-time-timezonestyle-none-state">None</span></dt>
+     <dd><p>Do nothing.</p></dd>
+    </dl>
+   </li>
+
+   <li>
+    <p>Switch on <var>element</var>'s <code data-x="attr-time-hour12">hour12</code> attribute
+    state:</p>
+
+    <dl class="switch">
+     <dt><span data-x="attr-time-hour12-12-state">12-hour</span></dt>
+     <dd><p>Set <var>options</var>["<code data-x="">hour12</code>"] to true.</p></dd>
+
+     <dt><span data-x="attr-time-hour12-24-state">24-hour</span></dt>
+     <dd><p>Set <var>options</var>["<code data-x="">hour12</code>"] to false.</p></dd>
+
+     <dt><span data-x="attr-time-hour12-auto-state">Auto</span></dt>
+     <dd><p>Do nothing.</p></dd>
+    </dl>
+   </li>
+
+   <li><p>Return <var>options</var>.</p></li>
+  </ol>
+  </div>
+
+  <p class="note">The calendar and time zone used for formatting are carried by the Temporal
+  value returned by <span data-x="resolve the time zone and calendar of a parsed datetime">resolving
+  the time zone and calendar of a parsed datetime</span>, so they are not also placed in the
+  formatting options.</p>
+
+  <hr>
+
+  <p>The <code data-x="dom-time-format">format</code> IDL attribute must <span>reflect</span> the
+  <code data-x="attr-time-format">format</code> content attribute, <span>limited to only known
+  values</span>. The <code data-x="dom-time-dateFields">dateFields</code> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-time-datefields">datefields</code> content attribute,
+  <span>limited to only known values</span>. The <code data-x="dom-time-dateLength">dateLength</code>
+  IDL attribute must <span>reflect</span> the <code data-x="attr-time-datelength">datelength</code>
+  content attribute, <span>limited to only known values</span>. The <code
+  data-x="dom-time-timePrecision">timePrecision</code> IDL attribute must <span>reflect</span> the
+  <code data-x="attr-time-timeprecision">timeprecision</code> content attribute, <span>limited to only
+  known values</span>. The <code data-x="dom-time-timeZoneStyle">timeZoneStyle</code> IDL attribute
+  must <span>reflect</span> the <code data-x="attr-time-timezonestyle">timezonestyle</code> content
+  attribute, <span>limited to only known values</span>. The <code
+  data-x="dom-time-hour12">hour12</code> IDL attribute must <span>reflect</span> the <code
+  data-x="attr-time-hour12">hour12</code> content attribute, <span>limited to only known
+  values</span>.</p>
+
+
   </div>
 
   <div class="example">
@@ -153006,6 +153642,48 @@ select {
 
   <div w-nodev>
 
+  <h4 id="the-time-element-rendering">The <code>time</code> element</h4>
+
+  <p>A <code>time</code> element whose <span>formatted datetime parts</span> are not null is
+  <span>expected</span> to render with a <span>shadow tree</span> that <span>represents</span> those
+  parts, in place of the element's <span>child text content</span>.</p>
+
+  <div algorithm>
+  <p>The <span>shadow tree</span> is <span>expected</span> to contain, for each <var>part</var> of the
+  element's <span>formatted datetime parts</span>, in <span>tree order</span>, a <dfn>datetime part
+  box</dfn>, which is a <code>span</code> element whose <span>child text content</span> is
+  <var>part</var>'s value and which is appended to the <code>time</code> element's <span>shadow
+  root</span>. Each <span>datetime part box</span> is associated with <var>part</var>'s type.</p>
+  </div>
+
+  <p>The element's <span>formatted datetime parts</span> depend on the element's content attributes,
+  its <span>language</span>, the host's <span>current time zone</span>, and the user's locale
+  preferences. Whenever any of these change such that the parts would differ, the <span>shadow
+  tree</span> is <span>expected</span> to be updated to reflect the new parts.</p>
+
+  <p class="note">When the parts are null &mdash; because formatting is not enabled, or because the
+  element's <span>datetime value</span> cannot be formatted with the requested options &mdash; the
+  element instead renders its <span>child text content</span> as usual, which therefore acts as
+  fallback content.</p>
+
+  <p>Each <span>datetime part box</span> is <span>expected</span> to be rendered inline, as though it
+  were a <code>span</code> element in the <code>time</code> element's content. User agents are
+  <span>expected</span> to make each <span>datetime part box</span> selectable as part of the
+  document's text, and to include it in any <code>Range</code> that covers the <code>time</code>
+  element, as though it were ordinary text content of the element.</p>
+
+  <p class="note">A future CSS feature is anticipated to provide pseudo-elements that select
+  <span data-x="datetime part box">datetime part boxes</span> by their associated type (for example,
+  "<code data-x="">weekday</code>", "<code data-x="">month</code>", or "<code
+  data-x="">literal</code>"), allowing individual parts of the formatted date or time to be styled.
+  This mirrors the way the <code>select</code> element's <span>base appearance</span> exposes parts of
+  its <span>shadow tree</span> through pseudo-elements such as the <span>'::picker'</span>
+  pseudo-element.</p>
+
+  </div>
+
+  <div w-nodev>
+
   <h4>The <code>textarea</code> element</h4>
 
   <div algorithm>