diff --git a/images/asyncdefer.svg b/images/asyncdefer.svg index 456fe78b4dd..91cc21e1bf6 100644 --- a/images/asyncdefer.svg +++ b/images/asyncdefer.svg @@ -1,5 +1,13 @@ @@ -16,7 +27,6 @@ Table of contents First section - + - diff --git a/images/parsing-model-overview.svg b/images/parsing-model-overview.svg index 0c965d231d2..bb782a589fd 100644 --- a/images/parsing-model-overview.svg +++ b/images/parsing-model-overview.svg @@ -3,75 +3,107 @@ - - - - - + + + + + + + + - - + + - + Network - - + + - + Byte Stream Decoder - - + + - + Input Stream Preprocessor - - + + - + Tokenizer - - + + - + Tree Construction - - + + - - + + - + DOM - + - + Script Execution - - + + document.write() diff --git a/images/sample-datalist.svg b/images/sample-datalist.svg index 175a8b6b8cc..8aacace9a69 100644 --- a/images/sample-datalist.svg +++ b/images/sample-datalist.svg @@ -1,22 +1,34 @@ - - + + - ▼ + ▼ function diff --git a/images/sample-email-1.svg b/images/sample-email-1.svg index bf1d558452f..61d2d8cc7a0 100644 --- a/images/sample-email-1.svg +++ b/images/sample-email-1.svg @@ -1,20 +1,36 @@ - - + + - + spec.w| - ▼ + ▼ https://html.spec.whatwg.org/ @@ -37,6 +53,6 @@ DOM - - + + diff --git a/source b/source index 555edf65686..9fd69ba8158 100644 --- a/source +++ b/source @@ -51,7 +51,7 @@ WHATWG +

HTML

Living Standard — Last Updated [DATE: 01 Jan 1901]

@@ -19238,9 +19238,7 @@ interface HTMLHeadingElement : HTMLElement {

A rendered view of the outline might look like:

-

Top-level section with the - heading "HTML: Living Standard" and two - subsections; "Table of contents" and "First section".

+

Top-level section with the heading "HTML: Living Standard" and two subsections; "Table of contents" and "First section".

@@ -27037,7 +27035,7 @@ document.body.appendChild(wbr);

Assume that the module graph for the application is as follows:

- The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs. + The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs.

Here we see the application developer has used modulepreload to declare all of the modules in their module graph, @@ -48585,7 +48583,7 @@ interface HTMLInputElement : HTMLElement { data-x="">https://streams.spec.whatwg.org/ in the recent past, then the rendering might look like this:

-

A text box with an icon on the left followed by the text "spec.w" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scrollbar to the right of the drop down box, indicating further values are available.

+

A text box with an icon on the left followed by the text "spec.w" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scrollbar to the right of the drop down box, indicating further values are available.

The first four URLs in this sample consist of the four URLs in the author-specified list that match the text the user has entered, sorted in some implementation-defined manner @@ -51659,7 +51657,7 @@ ldh-str = < as defined in

+

The page could also link in the user's contacts database from the site:

@@ -51680,7 +51678,7 @@ ldh-str = < as defined in -

+

@@ -52096,7 +52094,7 @@ You cannot submit this form when the field is incorrect. data-x="concept-option-label">label and value would be shown:

-

A text box with a drop down button on the right hand side; with, below, a drop down box containing a list of the six values the left and the six labels on the right.

+

A text box with a drop down button on the right hand side; with, below, a drop down box containing a list of the six values the left and the six labels on the right.

Then, typing "arrow" or "=>" would filter the list to the entries with labels "arrow function" and "async arrow function". Typing "generator" or @@ -61862,7 +61860,7 @@ interface HTMLScriptElement : HTMLElement {

This is all summarized in the following schematic diagram:

-

With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type="module"> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type="module" async> is similar to <script async> with the extra dependency fetching.

+

With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type="module"> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type="module" async> is similar to <script async> with the extra dependency fetching.

The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation @@ -72782,7 +72780,7 @@ customElements.define("x-foo", class extends HTMLElement {

This is all summarized in the following schematic diagram:

-

A custom element reactions stack consists of a stack of element queues. Zooming in on a particular queue, we see that it contains a number of elements (in our example, <x-a>, then <x-b>, then <x-c>). Any particular element in the queue then has a custom element reaction queue. Zooming in on the custom element reaction queue, we see that it contains a variety of queued-up reactions (in our example, upgrade, then attribute changed, then another attribute changed, then connected).

+

A custom element reactions stack consists of a stack of element queues. Zooming in on a particular queue, we see that it contains a number of elements (in our example, <x-a>, then <x-b>, then <x-c>). Any particular element in the queue then has a custom element reaction queue. Zooming in on the custom element reaction queue, we see that it contains a variety of queued-up reactions (in our example, upgrade, then attribute changed, then another attribute changed, then connected).

To enqueue an element on the appropriate element queue, given an element element, run the following steps:

@@ -121804,7 +121802,7 @@ dictionary StorageEventInit : EventInit {

Overview of the parsing model

-

+

The input to the HTML parsing process consists of a stream of code points, which is passed through a tokenization stage followed by a tree