Dev edition: improve the "Scripting" subsection

This adds a domintro for the developer-facing import() and import.meta
integrations, as well as cutting and including content more
appropriately for the module, event loop, runtime script errors,
unhandled promise rejections, and event handlers sections.

#4183 (comment)
discusses potential further improvements.

source

@@ -3101,6 +3101,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     spec=JSIMPORTMETA></p>
 
     <ul class="brief">
+     <li><dfn data-x-href="https://tc39.github.io/proposal-import-meta/#sec-meta-properties"><code>import.meta</code></dfn></li>
      <li>The <dfn data-x="js-HostGetImportMetaProperties" data-x-href="https://tc39.github.io/proposal-import-meta/#sec-hostgetimportmetaproperties">HostGetImportMetaProperties</dfn> abstract operation</li>
     </ul>
 
@@ -88378,6 +88379,8 @@ document.querySelector("button").addEventListener("click", bound);
    </li>
   </ol>
 
+  </div>
+
   <h5>Integration with the JavaScript module system</h5>
 
   <p>The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts
@@ -88391,12 +88394,41 @@ document.querySelector("button").addEventListener("click", bound);
   scripts</span> versus <span data-x="module script">module scripts</span>, since both of them use
   the <code>script</code> element.</p>
 
-  <p>A <dfn>module map</dfn> is a <span data-x="ordered map">map</span> of <span data-x="URL
-  record">URL records</span> to values that are either a <span>module script</span>, null (used to
-  represent failed fetches), or a placeholder value "<code data-x="">fetching</code>". <span
-  data-x="module map">Module maps</span> are used to ensure that imported JavaScript modules are
-  only fetched, parsed, and evaluated once per <code>Document</code> or <a
-  href="#workers">worker</a>.</p>
+  <dl class="domintro">
+   <dt><var>modulePromise</var> = <code data-x="import()">import(<var>specifier</var>)</code></dt>
+
+   <dd>
+    <p>Returns a promise for the module namespace object for the <span>module script</span>
+    identified by <var>specifier</var>. This allows dynamic importing of module scripts at runtime,
+    instead of statically using the <code data-x="">import</code> statement form. The specifier will
+    be <span data-x="resolve a module specifier">resolved</span> relative to the <span>active
+    script</span>'s <span data-x="concept-script-base-url">base URL</span>.</p>
+
+    <p>The returned promise will be rejected if an invalid specifier is given, or if a failure is
+    encountered while <span data-x="fetch a module script graph">fetching</span> or <span
+    data-x="run a module script">evaluating</span> the resulting module graph.</p>
+
+    <p>This syntax can be used inside both <span data-x="classic script">classic</span> and <span
+    data-x="module script">module scripts</span>. It thus provides a bridge into the module-script
+    world, from the classic-script world.</p>
+   </dd>
+
+   <dt><var>url</var> = <code data-x="import.meta">import . meta </code><code data-x=""> . url</code></dt>
+
+   <dd>
+    <p>Returns the <span data-x="active script">active module script</span>'s <span
+    data-x="concept-script-base-url">base URL</span>.</p>
+
+    <p>This syntax can only be used inside <span data-x="module script">module scripts</span>.</p>
+   </dd>
+  </dl>
+
+  <p><span w-nodev>A <dfn>module map</dfn> is a <span data-x="ordered map">map</span> of <span
+  data-x="URL record">URL records</span> to values that are either a <span>module script</span>,
+  null (used to represent failed fetches), or a placeholder value "<code
+  data-x="">fetching</code>". </span><span data-x="module map">Module maps</span> are used to ensure
+  that imported JavaScript modules are only fetched, parsed, and evaluated once per
+  <code>Document</code> or <a href="#workers">worker</a>.</p>
 
   <div class="example">
    <p>Since <span data-x="module map">module maps</span> are keyed by URL, the following code will
@@ -88428,6 +88460,8 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
    data-x="concept-SharedWorkerGlobalScope-constructor-url">constructor url</span>.</p>
   </div>
 
+  <div w-nodev>
+
   <p>To <dfn>resolve a module specifier</dfn> given a <span>URL</span> <var>base URL</var> and a
   <span>JavaScript string</span> <var>specifier</var>, perform the following steps. It will return
   either a <span>URL record</span> or failure.</p>
@@ -88452,14 +88486,18 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
    <var>base URL</var> as the base URL.</p></li>
   </ol>
 
+  </div>
+
   <div class="example" id="module-specifier-examples">
-   <p>The following are valid module specifiers according to the above algorithm:</p>
+   <p>The following are valid module specifiers<span w-nodev> according to the above
+   algorithm</span>:</p>
 
    <ul class="brief">
     <li><code data-x="">https://example.com/apples.mjs</code></li>
 
     <li><code data-x="">http:example.com\pears.js</code> (becomes <code
-    data-x="">http://example.com/pears.js</code> as step 1 parses with no base URL)</li>
+    data-x="">http://example.com/pears.js</code><span w-nodev> as step 1 parses with no base
+    URL</span>)</li>
 
     <li><code data-x="">//example.com/bananas</code></li>
 
@@ -88503,6 +88541,8 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
    </ul>
   </div>
 
+  <div w-nodev>
+
   <h6><dfn>HostResolveImportedModule</dfn>(<var>referencingScriptOrModule</var>,
   <var>specifier</var>)</h6>
 
@@ -88829,6 +88869,10 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
 
   <h5 id="runtime-script-errors">Runtime script errors</h5>
 
+  <p w-nohtml>In various scenarios, the user agent can report an exception by firing an <code
+  data-x="event-error">error</code> event at the <code>Window</code>. If this event is not canceled,
+  then the error is considered not handled, and can be reported to the developer console.</p>
+
   <div w-nodev>
 
   <p>When the user agent is required to <dfn data-x="report the error">report an error</dfn> for a
@@ -88919,11 +88963,8 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
   data-x="concept-error-nothandled">not handled</i> after this, then the error may be reported to a
   developer console.</p>
 
-
   <h6>The <code>ErrorEvent</code> interface</h6>
 
-  </div>
-
   <pre><code class="idl" data-x="">[Constructor(DOMString type, optional <span>ErrorEventInit</span> eventInitDict), Exposed=(Window,Worker)]
 interface <dfn>ErrorEvent</dfn> : <span>Event</span> {
   readonly attribute DOMString <span data-x="dom-ErrorEvent-message">message</span>;
@@ -88959,13 +89000,17 @@ dictionary <dfn>ErrorEventInit</dfn> : <span>EventInit</span> {
   it was initialized to. Where appropriate, it is set to the object representing the error (e.g.,
   the exception object in the case of an uncaught DOM exception).</p>
 
+  </div>
+
   <h5>Unhandled promise rejections</h5>
 
   <p>In addition to synchronous <a href="#runtime-script-errors">runtime script errors</a>, scripts
   may experience asynchronous promise rejections, tracked via the <code
   data-x="event-unhandledrejection">unhandledrejection</code> and <code
   data-x="event-rejectionhandled">rejectionhandled</code> events.</p>
 
+  <div w-nodev>
+
   <p>When the user agent is to <dfn>notify about rejected promises</dfn> on a given
   <span>environment settings object</span> <var>settings object</var>, it must run these steps:</p>
 
@@ -89111,11 +89156,11 @@ dictionary <dfn>PromiseRejectionEventInit</dfn> : <span>EventInit</span> {
 
   </ol>
 
-  <div w-nodev>
+  </div>
 
   <h4>Event loops</h4> <!-- <dfn>event loop</dfn> -->
 
-  <h5>Definitions</h5>
+  <h5 w-nodev>Definitions</h5>
 
   <p>To coordinate events, user interaction, scripts, rendering, networking, and so forth, user
   agents must use <dfn data-x="event loop" data-lt="event loop" data-export="">event loops</dfn> as
@@ -89141,6 +89186,8 @@ dictionary <dfn>PromiseRejectionEventInit</dfn> : <span>EventInit</span> {
   <span>event loop</span>, and the <span data-x="run a worker">worker processing model</span>
   manages the <span>event loop</span>'s lifetime.</p>
 
+  <div w-nodev>
+
   <hr>
 
   <p>An <span>event loop</span> has one or more <dfn data-x="task queue">task queues</dfn>. A
@@ -89942,8 +89989,10 @@ dictionary <dfn>PromiseRejectionEventInit</dfn> : <span>EventInit</span> {
   specified. These act as non-capture <span data-x="event listener">event listeners</span> for the
   object on which they are specified. <ref spec=DOM></p>
 
+  <div w-nodev>
+
   <p>An <span data-x="event handlers">event handler</span> is a <span>struct</span> with two <span
-  data-x="struct item">items</span>:
+  data-x="struct item">items</span>:</p>
 
   <ul>
    <li><p>a <dfn data-x="event handler value">value</dfn>, which is either null<span
@@ -89960,6 +90009,8 @@ dictionary <dfn>PromiseRejectionEventInit</dfn> : <span>EventInit</span> {
    set to null.</span></p></li>
   </ul>
 
+  </div>
+
   <p>Event handlers are exposed in two ways.</p>
 
   <p>The first way, common to all event handlers, is as an <span data-x="event handler IDL