CINXE.COM

<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=/link-fixup.js defer=""></script><meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=https://resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=https://resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=https://resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=/styles.css crossorigin=""><script> function toggleStatus(div) { div.parentNode.classList.toggle('wrapped'); } function setLinkFragment(link) { link.hash = location.hash; } </script><body> <script defer="" crossorigin="" src=/html-dfn.js></script> <header id=head class="head with-buttons"> <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a> <hgroup><h1 class=allcaps>HTML</h1>Living Standard — Last Updated 17 February 2025</hgroup> </header> <nav><a href=document-lifecycle.html>← 7.5 Document lifecycle</a> — <a href=./>Table of Contents</a> — <a href=dynamic-markup-insertion.html>8.4 Dynamic markup insertion →</a></nav><ol class=toc><li id=toc-webappapis><a href=webappapis.html#webappapis>8 Web application APIs</a><ol><li><a href=webappapis.html#scripting>8.1 Scripting</a><ol><li><a href=webappapis.html#introduction-11>8.1.1 Introduction</a><li><a href=webappapis.html#agents-and-agent-clusters>8.1.2 Agents and agent clusters</a><ol><li><a href=webappapis.html#integration-with-the-javascript-agent-formalism>8.1.2.1 Integration with the JavaScript agent formalism</a><li><a href=webappapis.html#integration-with-the-javascript-agent-cluster-formalism>8.1.2.2 Integration with the JavaScript agent cluster formalism</a></ol><li><a href=webappapis.html#realms-and-their-counterparts>8.1.3 Realms and their counterparts</a><ol><li><a href=webappapis.html#environments>8.1.3.1 Environments</a><li><a href=webappapis.html#environment-settings-objects>8.1.3.2 Environment settings objects</a><li><a href=webappapis.html#realms-settings-objects-global-objects>8.1.3.3 Realms, settings objects, and global objects</a><ol><li><a href=webappapis.html#entry>8.1.3.3.1 Entry</a><li><a href=webappapis.html#incumbent>8.1.3.3.2 Incumbent</a><li><a href=webappapis.html#current>8.1.3.3.3 Current</a><li><a href=webappapis.html#relevant>8.1.3.3.4 Relevant</a></ol><li><a href=webappapis.html#enabling-and-disabling-scripting>8.1.3.4 Enabling and disabling scripting</a><li><a href=webappapis.html#secure-contexts>8.1.3.5 Secure contexts</a></ol><li><a href=webappapis.html#scripting-processing-model>8.1.4 Script processing model</a><ol><li><a href=webappapis.html#script-structs>8.1.4.1 Scripts</a><li><a href=webappapis.html#fetching-scripts>8.1.4.2 Fetching scripts</a><li><a href=webappapis.html#creating-scripts>8.1.4.3 Creating scripts</a><li><a href=webappapis.html#calling-scripts>8.1.4.4 Calling scripts</a><li><a href=webappapis.html#killing-scripts>8.1.4.5 Killing scripts</a><li><a href=webappapis.html#runtime-script-errors>8.1.4.6 Runtime script errors</a><li><a href=webappapis.html#unhandled-promise-rejections>8.1.4.7 Unhandled promise rejections</a><li><a href=webappapis.html#import-map-parse-results>8.1.4.8 Import map parse results</a></ol><li><a href=webappapis.html#module-specifier-resolution>8.1.5 Module specifier resolution</a><ol><li><a href=webappapis.html#the-resolution-algorithm>8.1.5.1 The resolution algorithm</a><li><a href=webappapis.html#import-maps>8.1.5.2 Import maps</a><li><a href=webappapis.html#import-map-processing-model>8.1.5.3 Import map processing model</a></ol><li><a href=webappapis.html#javascript-specification-host-hooks>8.1.6 JavaScript specification host hooks</a><ol><li><a href=webappapis.html#the-hostensurecanaddprivateelement-implementation>8.1.6.1 HostEnsureCanAddPrivateElement(<var>O</var>)</a><li><a href=webappapis.html#hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg)>8.1.6.2 HostEnsureCanCompileStrings(<var>realm</var>, <var>parameterStrings</var>, <var>bodyString</var>, <var>codeString</var>, <var>compilationType</var>, <var>parameterArgs</var>, <var>bodyArg</var>)</a><li><a href=webappapis.html#hostgetcodeforeval(argument)>8.1.6.3 HostGetCodeForEval(<var>argument</var>)</a><li><a href=webappapis.html#the-hostpromiserejectiontracker-implementation>8.1.6.4 HostPromiseRejectionTracker(<var>promise</var>, <var>operation</var>)</a><li><a href=webappapis.html#hostsystemutcepochnanoseconds>8.1.6.5 HostSystemUTCEpochNanoseconds(<var>global</var>)</a><li><a href=webappapis.html#integration-with-javascript-jobs>8.1.6.6 Job-related host hooks</a><ol><li><a href=webappapis.html#hostcalljobcallback>8.1.6.6.1 HostCallJobCallback(<var>callback</var>, <var>V</var>, <var>argumentsList</var>)</a><li><a href=webappapis.html#hostenqueuefinalizationregistrycleanupjob>8.1.6.6.2 HostEnqueueFinalizationRegistryCleanupJob(<var>finalizationRegistry</var>)</a><li><a href=webappapis.html#hostenqueuegenericjob>8.1.6.6.3 HostEnqueueGenericJob(<var>job</var>, <var>realm</var>)</a><li><a href=webappapis.html#hostenqueuepromisejob>8.1.6.6.4 HostEnqueuePromiseJob(<var>job</var>, <var>realm</var>)</a><li><a href=webappapis.html#hostenqueuetimeoutjob>8.1.6.6.5 HostEnqueueTimeoutJob(<var>job</var>, <var>realm</var>, <var>milliseconds</var>)</a><li><a href=webappapis.html#hostmakejobcallback>8.1.6.6.6 HostMakeJobCallback(<var>callable</var>)</a></ol><li><a href=webappapis.html#integration-with-the-javascript-module-system>8.1.6.7 Module-related host hooks</a><ol><li><a href=webappapis.html#hostgetimportmetaproperties>8.1.6.7.1 HostGetImportMetaProperties(<var>moduleRecord</var>)</a><li><a href=webappapis.html#hostgetsupportedimportattributes>8.1.6.7.2 HostGetSupportedImportAttributes()</a><li><a href=webappapis.html#hostloadimportedmodule>8.1.6.7.3 HostLoadImportedModule(<var>referrer</var>, <var>moduleRequest</var>, <var>loadState</var>, <var>payload</var>)</a></ol></ol><li><a href=webappapis.html#event-loops>8.1.7 Event loops</a><ol><li><a href=webappapis.html#definitions-3>8.1.7.1 Definitions</a><li><a href=webappapis.html#queuing-tasks>8.1.7.2 Queuing tasks</a><li><a href=webappapis.html#event-loop-processing-model>8.1.7.3 Processing model</a><li><a href=webappapis.html#generic-task-sources>8.1.7.4 Generic task sources</a><li><a href=webappapis.html#event-loop-for-spec-authors>8.1.7.5 Dealing with the event loop from other specifications</a></ol><li><a href=webappapis.html#events>8.1.8 Events</a><ol><li><a href=webappapis.html#event-handler-attributes>8.1.8.1 Event handlers</a><li><a href=webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects>8.1.8.2 Event handlers on elements, <code>Document</code> objects, and <code>Window</code> objects</a><ol><li><a href=webappapis.html#idl-definitions>8.1.8.2.1 IDL definitions</a></ol><li><a href=webappapis.html#event-firing>8.1.8.3 Event firing</a></ol></ol><li><a href=webappapis.html#windoworworkerglobalscope-mixin>8.2 The <code>WindowOrWorkerGlobalScope</code> mixin</a><li><a href=webappapis.html#atob>8.3 Base64 utility methods</a></ol></ol><h2 id=webappapis>8 Web application APIs<a href=#webappapis class=self-link></a></h2> <h3 id=scripting>8.1 Scripting<a href=#scripting class=self-link></a></h3> <h4 id=introduction-11>8.1.1 Introduction<a href=#introduction-11 class=self-link></a></h4> Various mechanisms can cause author-provided executable code to run in the context of a document. These mechanisms include, but are probably not limited to: <ul><li>Processing of <code id=introduction-11:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements.<li>Navigating to <a href=browsing-the-web.html#the-javascript:-url-special-case id=introduction-11:the-javascript:-url-special-case><code>javascript:</code> URLs</a>.<li>Event handlers, whether registered through the DOM using <code>addEventListener()</code>, by explicit <a href=#event-handler-content-attributes id=introduction-11:event-handler-content-attributes>event handler content attributes</a>, by <a href=#event-handler-idl-attributes id=introduction-11:event-handler-idl-attributes>event handler IDL attributes</a>, or otherwise.<li>Processing of technologies like SVG that have their own scripting features.</ul> <h4 id=agents-and-agent-clusters>8.1.2 Agents and agent clusters<a href=#agents-and-agent-clusters class=self-link></a></h4> <h5 id=integration-with-the-javascript-agent-formalism>8.1.2.1 Integration with the JavaScript agent formalism<a href=#integration-with-the-javascript-agent-formalism class=self-link></a></h5> JavaScript defines the concept of an <a id=integration-with-the-javascript-agent-formalism:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a>. This section gives the mapping of that language-level concept on to the web platform. <div class=note> Conceptually, the <a id=integration-with-the-javascript-agent-formalism:agent-2 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> concept is an architecture-independent, idealized "thread" in which JavaScript code runs. Such code can involve multiple globals/<a href=#concept-global-object-realm id=integration-with-the-javascript-agent-formalism:concept-global-object-realm>realms</a> that can synchronously access each other, and thus needs to run in a single execution thread. Two <code id=integration-with-the-javascript-agent-formalism:window><a href=nav-history-apis.html#window>Window</a></code> objects having the same <a id=integration-with-the-javascript-agent-formalism:agent-3 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> does not indicate they can directly access all objects created in each other's realms. They would have to be <a id=integration-with-the-javascript-agent-formalism:same-origin-domain href=browsers.html#same-origin-domain>same origin-domain</a>; see <a id=integration-with-the-javascript-agent-formalism:isplatformobjectsameorigin-(-o-) href=nav-history-apis.html#isplatformobjectsameorigin-(-o-)>IsPlatformObjectSameOrigin</a>. </div> The following types of agents exist on the web platform: <dl><dt><dfn id=similar-origin-window-agent data-export="">Similar-origin window agent</dfn><dd> Contains various <code id=integration-with-the-javascript-agent-formalism:window-2><a href=nav-history-apis.html#window>Window</a></code> objects which can potentially reach each other, either directly or by using <code id=integration-with-the-javascript-agent-formalism:dom-document-domain><a href=browsers.html#dom-document-domain>document.domain</a></code>. If the encompassing <a id=integration-with-the-javascript-agent-formalism:agent-cluster href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>'s <a href=#is-origin-keyed id=integration-with-the-javascript-agent-formalism:is-origin-keyed>is origin-keyed</a> is true, then all the <code id=integration-with-the-javascript-agent-formalism:window-3><a href=nav-history-apis.html#window>Window</a></code> objects will be <a id=integration-with-the-javascript-agent-formalism:same-origin href=browsers.html#same-origin>same origin</a>, can reach each other directly, and <code id=integration-with-the-javascript-agent-formalism:dom-document-domain-2><a href=browsers.html#dom-document-domain>document.domain</a></code> will no-op. Two <code id=integration-with-the-javascript-agent-formalism:window-4><a href=nav-history-apis.html#window>Window</a></code> objects that are <a id=integration-with-the-javascript-agent-formalism:same-origin-2 href=browsers.html#same-origin>same origin</a> can be in different <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-formalism:similar-origin-window-agent>similar-origin window agents</a>, for instance if they are each in their own <a id=integration-with-the-javascript-agent-formalism:browsing-context-group href=document-sequences.html#browsing-context-group>browsing context group</a>. <dt><dfn id=dedicated-worker-agent data-export="">Dedicated worker agent</dfn><dd>Contains a single <code id=integration-with-the-javascript-agent-formalism:dedicatedworkerglobalscope><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>.<dt><dfn id=shared-worker-agent data-export="">Shared worker agent</dfn><dd>Contains a single <code id=integration-with-the-javascript-agent-formalism:sharedworkerglobalscope><a href=workers.html#sharedworkerglobalscope>SharedWorkerGlobalScope</a></code>.<dt><dfn id=service-worker-agent data-export="">Service worker agent</dfn><dd>Contains a single <code id=integration-with-the-javascript-agent-formalism:serviceworkerglobalscope><a data-x-internal=serviceworkerglobalscope href=https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope>ServiceWorkerGlobalScope</a></code>.<dt><dfn id=worklet-agent data-export="">Worklet agent</dfn><dd> Contains a single <code id=integration-with-the-javascript-agent-formalism:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code> object. Although a given worklet can have multiple realms, each such realm needs its own agent, as each realm can be executing code independently and at the same time as the others. </dl> Only <a href=#shared-worker-agent id=integration-with-the-javascript-agent-formalism:shared-worker-agent>shared</a> and <a href=#dedicated-worker-agent id=integration-with-the-javascript-agent-formalism:dedicated-worker-agent>dedicated worker agents</a> allow the use of JavaScript <code id=integration-with-the-javascript-agent-formalism:atomics><a data-x-internal=atomics href=https://tc39.es/ecma262/#sec-atomics-object>Atomics</a></code> APIs to potentially <a href=https://tc39.es/ecma262/#sec-forward-progress id=integration-with-the-javascript-agent-formalism:forward-progress data-x-internal=forward-progress>block</a>. To <dfn id=create-an-agent>create an agent</dfn>, given a boolean <var>canBlock</var>: <ol><li>Let <var>signifier</var> be a new unique internal value.<li>Let <var>candidateExecution</var> be a new <a id=integration-with-the-javascript-agent-formalism:candidate-execution href=https://tc39.es/ecma262/#sec-candidate-executions data-x-internal=candidate-execution>candidate execution</a>.<li>Let <var>agent</var> be a new <a id=integration-with-the-javascript-agent-formalism:agent-4 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> whose [[CanBlock]] is <var>canBlock</var>, [[Signifier]] is <var>signifier</var>, [[CandidateExecution]] is <var>candidateExecution</var>, and [[IsLockFree1]], [[IsLockFree2]], and [[LittleEndian]] are set at the implementation's discretion.<li>Set <var>agent</var>'s <a href=#concept-agent-event-loop id=integration-with-the-javascript-agent-formalism:concept-agent-event-loop>event loop</a> to a new <a href=#event-loop id=integration-with-the-javascript-agent-formalism:event-loop>event loop</a>.<li>Return <var>agent</var>.</ol> For a <a id=integration-with-the-javascript-agent-formalism:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> <var>realm</var>, the <a id=integration-with-the-javascript-agent-formalism:agent-5 href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> whose [[Signifier]] is <var>realm</var>.[[AgentSignifier]] is <dfn data-dfn-for=realm id="realm's-agent" data-lt=agent data-export="">the realm's agent</dfn>. The <dfn id=relevant-agent data-export="">relevant agent</dfn> for a <a id=integration-with-the-javascript-agent-formalism:platform-object href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> <var>platformObject</var> is <var>platformObject</var>'s <a href=#concept-relevant-realm id=integration-with-the-javascript-agent-formalism:concept-relevant-realm>relevant realm</a>'s <a href="#realm's-agent" id="integration-with-the-javascript-agent-formalism:realm's-agent">agent</a>. The agent equivalent of the <a id=integration-with-the-javascript-agent-formalism:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a> is the <a id=integration-with-the-javascript-agent-formalism:surrounding-agent href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding agent</a>. <h5 id=integration-with-the-javascript-agent-cluster-formalism>8.1.2.2 Integration with the JavaScript agent cluster formalism<a href=#integration-with-the-javascript-agent-cluster-formalism class=self-link></a></h5> JavaScript also defines the concept of an <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>, which this standard maps to the web platform by placing agents appropriately when they are created using the <a href=#obtain-similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:obtain-similar-origin-window-agent>obtain a similar-origin window agent</a> or <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent>obtain a worker/worklet agent</a> algorithms. The <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-2 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> concept is crucial for defining the JavaScript memory model, and in particular among which <a href=https://tc39.es/ecma262/#sec-agents id=integration-with-the-javascript-agent-cluster-formalism:agent data-x-internal=agent>agents</a> the backing data of <code id=integration-with-the-javascript-agent-cluster-formalism:sharedarraybuffer><a data-x-internal=sharedarraybuffer href=https://tc39.es/ecma262/#sec-sharedarraybuffer-objects>SharedArrayBuffer</a></code> objects can be shared. Conceptually, the <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-3 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> concept is an architecture-independent, idealized "process boundary" that groups together multiple "threads" (<a href=https://tc39.es/ecma262/#sec-agents id=integration-with-the-javascript-agent-cluster-formalism:agent-2 data-x-internal=agent>agents</a>). The <a href=https://tc39.es/ecma262/#sec-agent-clusters id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-4 data-x-internal=agent-cluster>agent clusters</a> defined by the specification are generally more restrictive than the actual process boundaries implemented in user agents. By enforcing these idealized divisions at the specification level, we ensure that web developers see interoperable behavior with regard to shared memory, even in the face of varying and changing user agent process models. An <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-5 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> has an associated <dfn id=agent-cluster-cross-origin-isolation>cross-origin isolation mode</dfn>, which is a <a id=integration-with-the-javascript-agent-cluster-formalism:cross-origin-isolation-mode href=document-sequences.html#cross-origin-isolation-mode>cross-origin isolation mode</a>. It is initially "<code id=integration-with-the-javascript-agent-cluster-formalism:cross-origin-isolation-none><a href=document-sequences.html#cross-origin-isolation-none>none</a></code>". An <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-6 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a> has an associated <dfn id=is-origin-keyed>is origin-keyed</dfn> (a boolean), which is initially false. <hr> The following defines the allocation of the <a href=https://tc39.es/ecma262/#sec-agent-clusters id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-7 data-x-internal=agent-cluster>agent clusters</a> of <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:similar-origin-window-agent>similar-origin window agents</a>. An <dfn id=agent-cluster-key>agent cluster key</dfn> is a <a id=integration-with-the-javascript-agent-cluster-formalism:site href=browsers.html#site>site</a> or <a href=browsers.html#concept-origin-tuple id=integration-with-the-javascript-agent-cluster-formalism:concept-origin-tuple>tuple origin</a>. Without web developer action to achieve <a href=browsers.html#origin-keyed-agent-clusters>origin-keyed agent clusters</a>, it will be a <a id=integration-with-the-javascript-agent-cluster-formalism:site-2 href=browsers.html#site>site</a>. An equivalent formulation is that an <a href=#agent-cluster-key id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-key>agent cluster key</a> can be a <a id=integration-with-the-javascript-agent-cluster-formalism:scheme-and-host href=browsers.html#scheme-and-host>scheme-and-host</a> or an <a id=integration-with-the-javascript-agent-cluster-formalism:concept-origin href=browsers.html#concept-origin>origin</a>. To <dfn id=obtain-similar-origin-window-agent>obtain a similar-origin window agent</dfn>, given an <a id=integration-with-the-javascript-agent-cluster-formalism:concept-origin-2 href=browsers.html#concept-origin>origin</a> <var>origin</var>, a <a id=integration-with-the-javascript-agent-cluster-formalism:browsing-context-group href=document-sequences.html#browsing-context-group>browsing context group</a> <var>group</var>, and a boolean <var>requestsOAC</var>, run these steps: <ol><li>Let <var>site</var> be the result of <a href=browsers.html#obtain-a-site id=integration-with-the-javascript-agent-cluster-formalism:obtain-a-site>obtaining a site</a> with <var>origin</var>.<li>Let <var>key</var> be <var>site</var>.<li>If <var>group</var>'s <a href=document-sequences.html#bcg-cross-origin-isolation id=integration-with-the-javascript-agent-cluster-formalism:bcg-cross-origin-isolation>cross-origin isolation mode</a> is not "<code id=integration-with-the-javascript-agent-cluster-formalism:cross-origin-isolation-none-2><a href=document-sequences.html#cross-origin-isolation-none>none</a></code>", then set <var>key</var> to <var>origin</var>.<li>Otherwise, if <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:historical-agent-cluster-key-map href=document-sequences.html#historical-agent-cluster-key-map>historical agent cluster key map</a>[<var>origin</var>] <a href=https://infra.spec.whatwg.org/#map-exists id=integration-with-the-javascript-agent-cluster-formalism:map-exists data-x-internal=map-exists>exists</a>, then set <var>key</var> to <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:historical-agent-cluster-key-map-2 href=document-sequences.html#historical-agent-cluster-key-map>historical agent cluster key map</a>[<var>origin</var>].<li> Otherwise: <ol><li>If <var>requestsOAC</var> is true, then set <var>key</var> to <var>origin</var>.<li>Set <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:historical-agent-cluster-key-map-3 href=document-sequences.html#historical-agent-cluster-key-map>historical agent cluster key map</a>[<var>origin</var>] to <var>key</var>.</ol> <li> If <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-map href=document-sequences.html#agent-cluster-map>agent cluster map</a>[<var>key</var>] <a href=https://infra.spec.whatwg.org/#map-exists id=integration-with-the-javascript-agent-cluster-formalism:map-exists-2 data-x-internal=map-exists>does not exist</a>, then: <ol><li>Let <var>agentCluster</var> be a new <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-8 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>.<li>Set <var>agentCluster</var>'s <a href=#agent-cluster-cross-origin-isolation id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-cross-origin-isolation>cross-origin isolation mode</a> to <var>group</var>'s <a href=document-sequences.html#bcg-cross-origin-isolation id=integration-with-the-javascript-agent-cluster-formalism:bcg-cross-origin-isolation-2>cross-origin isolation mode</a>.<li>Set <var>agentCluster</var>'s <a href=#is-origin-keyed id=integration-with-the-javascript-agent-cluster-formalism:is-origin-keyed>is origin-keyed</a> to true if <var>key</var> equals <var>origin</var>; otherwise false.<li>Add the result of <a href=#create-an-agent id=integration-with-the-javascript-agent-cluster-formalism:create-an-agent>creating an agent</a>, given false, to <var>agentCluster</var>.<li>Set <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-map-2 href=document-sequences.html#agent-cluster-map>agent cluster map</a>[<var>key</var>] to <var>agentCluster</var>.</ol> <li>Return the single <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:similar-origin-window-agent-2>similar-origin window agent</a> contained in <var>group</var>'s <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-map-3 href=document-sequences.html#agent-cluster-map>agent cluster map</a>[<var>key</var>].</ol> This means that there is only one <a href=#similar-origin-window-agent id=integration-with-the-javascript-agent-cluster-formalism:similar-origin-window-agent-3>similar-origin window agent</a> per browsing context agent cluster. (However, <a href=#dedicated-worker-agent id=integration-with-the-javascript-agent-cluster-formalism:dedicated-worker-agent>dedicated worker</a> and <a href=#worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:worklet-agent>worklet agents</a> might be in the same cluster.) <hr> The following defines the allocation of the <a href=https://tc39.es/ecma262/#sec-agent-clusters id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-9 data-x-internal=agent-cluster>agent clusters</a> of all other types of agents. To <dfn id=obtaining-a-worker/worklet-agent>obtain a worker/worklet agent</dfn>, given an <a href=#environment-settings-object id=integration-with-the-javascript-agent-cluster-formalism:environment-settings-object>environment settings object</a> or null <var>outside settings</var>, a boolean <var>isTopLevel</var>, and a boolean <var>canBlock</var>, run these steps: <ol><li>Let <var>agentCluster</var> be null. <li> If <var>isTopLevel</var> is true, then: <ol><li>Set <var>agentCluster</var> to a new <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-10 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>.<li> Set <var>agentCluster</var>'s <a href=#is-origin-keyed id=integration-with-the-javascript-agent-cluster-formalism:is-origin-keyed-2>is origin-keyed</a> to true. These workers can be considered to be origin-keyed. However, this is not exposed through any APIs (in the way that <code id=integration-with-the-javascript-agent-cluster-formalism:dom-originagentcluster><a href=browsers.html#dom-originagentcluster>originAgentCluster</a></code> exposes the origin-keyedness for windows). </ol> <li> Otherwise: <ol><li><a id=integration-with-the-javascript-agent-cluster-formalism:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>outside settings</var> is not null.<li>Let <var>ownerAgent</var> be <var>outside settings</var>'s <a href="#environment-settings-object's-realm" id="integration-with-the-javascript-agent-cluster-formalism:environment-settings-object's-realm">realm</a>'s <a href="#realm's-agent" id="integration-with-the-javascript-agent-cluster-formalism:realm's-agent">agent</a>.<li>Set <var>agentCluster</var> to the agent cluster which contains <var>ownerAgent</var>.</ol> <li>Let <var>agent</var> be the result of <a href=#create-an-agent id=integration-with-the-javascript-agent-cluster-formalism:create-an-agent-2>creating an agent</a> given <var>canBlock</var>.<li>Add <var>agent</var> to <var>agentCluster</var>.<li>Return <var>agent</var>.</ol> To <dfn id=obtain-a-dedicated/shared-worker-agent>obtain a dedicated/shared worker agent</dfn>, given an <a href=#environment-settings-object id=integration-with-the-javascript-agent-cluster-formalism:environment-settings-object-2>environment settings object</a> <var>outside settings</var> and a boolean <var>isShared</var>, return the result of <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent-2>obtaining a worker/worklet agent</a> given <var>outside settings</var>, <var>isShared</var>, and true. To <dfn id=obtain-a-worklet-agent>obtain a worklet agent</dfn>, given an <a href=#environment-settings-object id=integration-with-the-javascript-agent-cluster-formalism:environment-settings-object-3>environment settings object</a> <var>outside settings</var>, return the result of <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent-3>obtaining a worker/worklet agent</a> given <var>outside settings</var>, false, and false. To <dfn id=obtain-a-service-worker-agent data-export="">obtain a service worker agent</dfn>, return the result of <a href=#obtaining-a-worker/worklet-agent id=integration-with-the-javascript-agent-cluster-formalism:obtaining-a-worker/worklet-agent-4>obtaining a worker/worklet agent</a> given null, true, and false. <hr> <div id=can-share-memory-with class=example> The following pairs of global objects are each within the same <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-11 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>, and thus can use <code id=integration-with-the-javascript-agent-cluster-formalism:sharedarraybuffer-2><a data-x-internal=sharedarraybuffer href=https://tc39.es/ecma262/#sec-sharedarraybuffer-objects>SharedArrayBuffer</a></code> instances to share memory with each other: <ul><li>A <code id=integration-with-the-javascript-agent-cluster-formalism:window><a href=nav-history-apis.html#window>Window</a></code> object and a dedicated worker that it created.<li>A worker (of any type) and a dedicated worker it created.<li>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-2><a href=nav-history-apis.html#window>Window</a></code> object <var>A</var> and the <code id=integration-with-the-javascript-agent-cluster-formalism:window-3><a href=nav-history-apis.html#window>Window</a></code> object of an <code id=integration-with-the-javascript-agent-cluster-formalism:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element that <var>A</var> created that could be <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin-domain href=browsers.html#same-origin-domain>same origin-domain</a> with <var>A</var>.<li>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-4><a href=nav-history-apis.html#window>Window</a></code> object and a <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin-domain-2 href=browsers.html#same-origin-domain>same origin-domain</a> <code id=integration-with-the-javascript-agent-cluster-formalism:window-5><a href=nav-history-apis.html#window>Window</a></code> object that opened it.<li>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-6><a href=nav-history-apis.html#window>Window</a></code> object and a worklet that it created.</ul> The following pairs of global objects are not within the same <a id=integration-with-the-javascript-agent-cluster-formalism:agent-cluster-12 href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>, and thus cannot share memory: <ul><li>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-7><a href=nav-history-apis.html#window>Window</a></code> object and a shared worker it created.<li>A worker (of any type) and a shared worker it created.<li>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-8><a href=nav-history-apis.html#window>Window</a></code> object and a service worker it created.<li>A <code id=integration-with-the-javascript-agent-cluster-formalism:window-9><a href=nav-history-apis.html#window>Window</a></code> object <var>A</var> and the <code id=integration-with-the-javascript-agent-cluster-formalism:window-10><a href=nav-history-apis.html#window>Window</a></code> object of an <code id=integration-with-the-javascript-agent-cluster-formalism:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element that <var>A</var> created that cannot be <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin-domain-3 href=browsers.html#same-origin-domain>same origin-domain</a> with <var>A</var>.<li>Any two <code id=integration-with-the-javascript-agent-cluster-formalism:window-11><a href=nav-history-apis.html#window>Window</a></code> objects with no opener or ancestor relationship. This holds even if the two <code id=integration-with-the-javascript-agent-cluster-formalism:window-12><a href=nav-history-apis.html#window>Window</a></code> objects are <a id=integration-with-the-javascript-agent-cluster-formalism:same-origin href=browsers.html#same-origin>same origin</a>.</ul> </div> <h4 id=realms-and-their-counterparts>8.1.3 Realms and their counterparts<a href=#realms-and-their-counterparts class=self-link></a></h4> The JavaScript specification introduces the <a id=realms-and-their-counterparts:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> concept, representing a global environment in which script is run. Each realm comes with an <a id=realms-and-their-counterparts:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=#global-object id=realms-and-their-counterparts:global-object>global object</a>; much of this specification is devoted to defining that global object and its properties. For web specifications, it is often useful to associate values or algorithms with a realm/global object pair. When the values are specific to a particular type of realm, they are associated directly with the global object in question, e.g., in the definition of the <code id=realms-and-their-counterparts:window><a href=nav-history-apis.html#window>Window</a></code> or <code id=realms-and-their-counterparts:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code> interfaces. When the values have utility across multiple realms, we use the <a href=#environment-settings-object id=realms-and-their-counterparts:environment-settings-object>environment settings object</a> concept. Finally, in some cases it is necessary to track associated values before a realm/global object/environment settings object even comes into existence (for example, during <a href=browsing-the-web.html#navigate id=realms-and-their-counterparts:navigate>navigation</a>). These values are tracked in the <a href=#environment id=realms-and-their-counterparts:environment>environment</a> concept. <h5 id=environments>8.1.3.1 Environments<a href=#environments class=self-link></a></h5> An <dfn id=environment data-export="">environment</dfn> is an object that identifies the settings of a current or potential execution environment (i.e., a <a href=browsing-the-web.html#navigation-params id=environments:navigation-params>navigation params</a>'s <a href=browsing-the-web.html#navigation-params-reserved-environment id=environments:navigation-params-reserved-environment>reserved environment</a> or a <a href=https://fetch.spec.whatwg.org/#concept-request id=environments:concept-request data-x-internal=concept-request>request</a>'s <a href=https://fetch.spec.whatwg.org/#concept-request-reserved-client id=environments:concept-request-reserved-client data-x-internal=concept-request-reserved-client>reserved client</a>). An <a href=#environment id=environments:environment>environment</a> has the following fields: <dl><dt>An <dfn data-dfn-for=environment id=concept-environment-id data-export="">id</dfn><dd>An opaque string that uniquely identifies this <a href=#environment id=environments:environment-2>environment</a>.<dt>A <dfn data-dfn-for=environment id=concept-environment-creation-url data-export="">creation URL</dfn><dd> A <a id=environments:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> that represents the location of the resource with which this <a href=#environment id=environments:environment-3>environment</a> is associated. In the case of a <code id=environments:window><a href=nav-history-apis.html#window>Window</a></code> <a href=#environment-settings-object id=environments:environment-settings-object>environment settings object</a>, this URL might be distinct from its <a href=#concept-settings-object-global id=environments:concept-settings-object-global>global object</a>'s <a href=nav-history-apis.html#concept-document-window id=environments:concept-document-window>associated <code>Document</code></a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="environments:the-document's-address" data-x-internal="the-document's-address">URL</a>, due to mechanisms such as <code id=environments:dom-history-pushstate><a href=nav-history-apis.html#dom-history-pushstate>history.pushState()</a></code> which modify the latter. <dt>A <dfn data-dfn-for=environment id=concept-environment-top-level-creation-url data-export="">top-level creation URL</dfn><dd>Null or a <a id=environments:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> that represents the <a href=#concept-environment-creation-url id=environments:concept-environment-creation-url>creation URL</a> of the "top-level" <a href=#environment id=environments:environment-4>environment</a>. It is null for workers and worklets.<dt>A <dfn data-dfn-for=environment id=concept-environment-top-level-origin data-export="">top-level origin</dfn><dd> A for now <a id=environments:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> value, null, or an <a id=environments:concept-origin href=browsers.html#concept-origin>origin</a>. For a "top-level" potential execution environment it is null (i.e., when there is no response yet); otherwise it is the "top-level" <a href=#environment id=environments:environment-5>environment</a>'s <a href=#concept-settings-object-origin id=environments:concept-settings-object-origin>origin</a>. For a dedicated worker or worklet it is the <a href=#concept-environment-top-level-origin id=environments:concept-environment-top-level-origin>top-level origin</a> of its creator. For a shared or service worker it is an <a id=environments:implementation-defined-2 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> value. This is distinct from the <a href=#concept-environment-top-level-creation-url id=environments:concept-environment-top-level-creation-url>top-level creation URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-origin id=environments:concept-url-origin data-x-internal=concept-url-origin>origin</a> when sandboxing, workers, and worklets are involved. <dt>A <dfn data-dfn-for=environment id=concept-environment-target-browsing-context data-export="">target browsing context</dfn><dd>Null or a target <a id=environments:browsing-context href=document-sequences.html#browsing-context>browsing context</a> for a <a href=https://fetch.spec.whatwg.org/#navigation-request id=environments:navigation-request data-x-internal=navigation-request>navigation request</a>.<dt>An <dfn data-dfn-for=environment id=concept-environment-active-service-worker data-export="">active service worker</dfn><dd>Null or a <a href=https://w3c.github.io/ServiceWorker/#dfn-service-worker id=environments:dfn-service-worker data-x-internal=dfn-service-worker>service worker</a> that <a href=https://w3c.github.io/ServiceWorker/#dfn-control id=environments:dfn-control data-x-internal=dfn-control>controls</a> the <a href=#environment id=environments:environment-6>environment</a>.<dt>An <dfn data-dfn-for=environment id=concept-environment-execution-ready-flag data-export="">execution ready flag</dfn><dd>A flag that indicates whether the environment setup is done. It is initially unset.</dl> Specifications may define <dfn id=environment-discarding-steps data-export="">environment discarding steps</dfn> for environments. The steps take an <a href=#environment id=environments:environment-7>environment</a> as input. The <a href=#environment-discarding-steps id=environments:environment-discarding-steps>environment discarding steps</a> are run for only a select few environments: the ones that will never become execution ready because, for example, they failed to load. <h5 id=environment-settings-objects>8.1.3.2 Environment settings objects<a href=#environment-settings-objects class=self-link></a></h5> An <dfn id=environment-settings-object data-export="">environment settings object</dfn> is an <a href=#environment id=environment-settings-objects:environment>environment</a> that additionally specifies algorithms for: <dl><dt>A <dfn data-dfn-for="environment settings object" id=realm-execution-context data-export="">realm execution context</dfn><dd> A <a id=environment-settings-objects:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> shared by all <a href=scripting.html#the-script-element id=environment-settings-objects:the-script-element>scripts</a> that use this settings object, i.e., all scripts in a given <a id=environment-settings-objects:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>. When we <a href=#run-a-classic-script id=environment-settings-objects:run-a-classic-script>run a classic script</a> or <a href=#run-a-module-script id=environment-settings-objects:run-a-module-script>run a module script</a>, this execution context becomes the top of the <a id=environment-settings-objects:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>, on top of which another execution context specific to the script in question is pushed. (This setup ensures <a id=environment-settings-objects:source-text-module-record href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module Record</a>'s <a href=https://tc39.es/ecma262/#sec-moduleevaluation id=environment-settings-objects:js-evaluate data-x-internal=js-evaluate>Evaluate</a> knows which realm to use.) <dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-module-map data-export="">module map</dfn><dd> A <a href=#module-map id=environment-settings-objects:module-map>module map</a> that is used when importing JavaScript modules. <dt>An <dfn data-dfn-for="environment settings object" id=api-base-url data-export="">API base URL</dfn><dd> A <a id=environment-settings-objects:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> used by APIs called by scripts that use this <a href=#environment-settings-object id=environment-settings-objects:environment-settings-object>environment settings object</a> to <a href=urls-and-fetching.html#parse-a-url id=environment-settings-objects:parse-a-url>parse URLs</a>. <dt>An <dfn data-dfn-for="environment settings object" id=concept-settings-object-origin data-export="">origin</dfn><dd> An <a id=environment-settings-objects:concept-origin href=browsers.html#concept-origin>origin</a> used in security checks. <dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-policy-container data-export="">policy container</dfn><dd> A <a id=environment-settings-objects:policy-container href=browsers.html#policy-container>policy container</a> containing policies used for security checks. <dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-cross-origin-isolated-capability data-export="">cross-origin isolated capability</dfn><dd>A boolean representing whether scripts that use this <a href=#environment-settings-object id=environment-settings-objects:environment-settings-object-2>environment settings object</a> are allowed to use APIs that require cross-origin isolation.<dt>A <dfn data-dfn-for="environment settings object" id=concept-settings-object-time-origin data-export="">time origin</dfn><dd>A number used as the baseline for performance-related timestamps. <a href=references.html#refsHRT>[HRT]</a></dl> An <a href=#environment-settings-object id=environment-settings-objects:environment-settings-object-3>environment settings object</a>'s <dfn data-dfn-for="environment settings object" id=responsible-event-loop data-export="">responsible event loop</dfn> is its <a href=#concept-settings-object-global id=environment-settings-objects:concept-settings-object-global>global object</a>'s <a href=#relevant-agent id=environment-settings-objects:relevant-agent>relevant agent</a>'s <a href=#concept-agent-event-loop id=environment-settings-objects:concept-agent-event-loop>event loop</a>. <h5 id=realms-settings-objects-global-objects>8.1.3.3 Realms, settings objects, and global objects<a href=#realms-settings-objects-global-objects class=self-link></a></h5> A <dfn id=global-object data-export="">global object</dfn> is a JavaScript object that is the [[GlobalObject]] field of a <a id=realms-settings-objects-global-objects:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>. In this specification, all <a href=https://tc39.es/ecma262/#sec-code-realms id=realms-settings-objects-global-objects:realm-2 data-x-internal=realm>realms</a> are <a href=#creating-a-new-javascript-realm id=realms-settings-objects-global-objects:creating-a-new-javascript-realm>created</a> with <a href=#global-object id=realms-settings-objects-global-objects:global-object>global objects</a> that are either <code id=realms-settings-objects-global-objects:window><a href=nav-history-apis.html#window>Window</a></code>, <code id=realms-settings-objects-global-objects:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code>, or <code id=realms-settings-objects-global-objects:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code> objects. A <a href=#global-object id=realms-settings-objects-global-objects:global-object-2>global object</a> has an <dfn data-dfn-for="global object" id=in-error-reporting-mode>in error reporting mode</dfn> boolean, which is initially false. A <a href=#global-object id=realms-settings-objects-global-objects:global-object-3>global object</a> has an <dfn id=outstanding-rejected-promises-weak-set>outstanding rejected promises weak set</dfn>, a <a id=realms-settings-objects-global-objects:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <code id=realms-settings-objects-global-objects:idl-promise><a data-x-internal=idl-promise href=https://webidl.spec.whatwg.org/#idl-promise>Promise</a></code> objects, initially empty. This set must not create strong references to any of its members, and implementations are free to limit its size in an <a id=realms-settings-objects-global-objects:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner, e.g., by removing old entries from it when new ones are added. A <a href=#global-object id=realms-settings-objects-global-objects:global-object-4>global object</a> has an <dfn id=about-to-be-notified-rejected-promises-list>about-to-be-notified rejected promises list</dfn>, a <a id=realms-settings-objects-global-objects:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <code id=realms-settings-objects-global-objects:idl-promise-2><a data-x-internal=idl-promise href=https://webidl.spec.whatwg.org/#idl-promise>Promise</a></code> objects, initially empty. A <a href=#global-object id=realms-settings-objects-global-objects:global-object-5>global object</a> has an <dfn id=concept-global-import-map>import map</dfn>, initially an <a href=#empty-import-map id=realms-settings-objects-global-objects:empty-import-map>empty import map</a>. For now, only <code id=realms-settings-objects-global-objects:window-2><a href=nav-history-apis.html#window>Window</a></code> <a href=#global-object id=realms-settings-objects-global-objects:global-object-6>global objects</a> have their <a href=#concept-global-import-map id=realms-settings-objects-global-objects:concept-global-import-map>import map</a> modified from the initial empty one. The <a href=#concept-global-import-map id=realms-settings-objects-global-objects:concept-global-import-map-2>import map</a> is only accessed for the resolution of a root <a href=#module-script id=realms-settings-objects-global-objects:module-script>module script</a>. A <a href=#global-object id=realms-settings-objects-global-objects:global-object-7>global object</a> has a <dfn id=resolved-module-set>resolved module set</dfn>, a <a id=realms-settings-objects-global-objects:set-2 href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <a href=#specifier-resolution-record id=realms-settings-objects-global-objects:specifier-resolution-record>specifier resolution records</a>, initially empty. The <a href=#resolved-module-set id=realms-settings-objects-global-objects:resolved-module-set>resolved module set</a> ensures that module specifier resolution returns the same result when called multiple times with the same (referrer, specifier) pair. It does that by ensuring that <a href=#import-map id=realms-settings-objects-global-objects:import-map>import map</a> rules that impact the specifier in its referrer's scope cannot be defined after its initial resolution. For now, only <code id=realms-settings-objects-global-objects:window-3><a href=nav-history-apis.html#window>Window</a></code> <a href=#global-object id=realms-settings-objects-global-objects:global-object-8>global objects</a> have their module set data structures modified from the initial empty one. <hr> There is always a 1-to-1-to-1 mapping between <a href=https://tc39.es/ecma262/#sec-code-realms id=realms-settings-objects-global-objects:realm-3 data-x-internal=realm>realms</a>, <a href=#global-object id=realms-settings-objects-global-objects:global-object-9>global objects</a>, and <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object>environment settings objects</a>: <ul><li>A <a id=realms-settings-objects-global-objects:realm-4 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> has a [[HostDefined]] field, which contains <dfn data-dfn-for=realm id=concept-realm-settings-object data-lt="settings object" data-export="">the realm's settings object</dfn>.<li>A <a id=realms-settings-objects-global-objects:realm-5 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> has a [[GlobalObject]] field, which contains <dfn data-dfn-for=realm id=concept-realm-global data-lt="global object" data-export="">the realm's global object</dfn>.<li>Each <a href=#global-object id=realms-settings-objects-global-objects:global-object-10>global object</a> in this specification is created during the <a href=#creating-a-new-javascript-realm id=realms-settings-objects-global-objects:creating-a-new-javascript-realm-2>creation</a> of a corresponding <a id=realms-settings-objects-global-objects:realm-6 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>, known as <dfn data-dfn-for="global object" id=concept-global-object-realm data-lt=realm data-export="">the global object's realm</dfn>.<li id=relevant-settings-object-for-a-global-object>Each <a href=#global-object id=realms-settings-objects-global-objects:global-object-11>global object</a> in this specification is created alongside a corresponding <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-2>environment settings object</a>, known as its <a href=#relevant-settings-object id=realms-settings-objects-global-objects:relevant-settings-object>relevant settings object</a>. <li>An <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-3>environment settings object</a>'s <a href=#realm-execution-context id=realms-settings-objects-global-objects:realm-execution-context>realm execution context</a>'s Realm component is <dfn data-dfn-for="environment settings object" id="environment-settings-object's-realm" data-lt=realm data-export="">the environment settings object's realm</dfn>.<li>An <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-4>environment settings object</a>'s <a href="#environment-settings-object's-realm" id="realms-settings-objects-global-objects:environment-settings-object's-realm">realm</a> then has a [[GlobalObject]] field, which contains <dfn data-dfn-for="environment settings object" id=concept-settings-object-global data-lt="global object" data-export="">the environment settings object's global object</dfn>.</ul> To <dfn id=creating-a-new-javascript-realm data-export="">create a new realm</dfn> in an <a id=realms-settings-objects-global-objects:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> <var>agent</var>, optionally with instructions to create a global object or a global this binding (or both), the following steps are taken: <ol><li>Perform <a href=https://tc39.es/ecma262/#sec-initializehostdefinedrealm id=realms-settings-objects-global-objects:js-initializehostdefinedrealm data-x-internal=js-initializehostdefinedrealm>InitializeHostDefinedRealm</a>() with the provided customizations for creating the global object and the global this binding.<li> Let <var>realm execution context</var> be the <a id=realms-settings-objects-global-objects:running-javascript-execution-context href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution context</a>. This is the <a id=realms-settings-objects-global-objects:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> created in the previous step. <li>Remove <var>realm execution context</var> from the <a id=realms-settings-objects-global-objects:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li>Let <var>realm</var> be <var>realm execution context</var>'s Realm component.<li> If <var>agent</var>'s <a id=realms-settings-objects-global-objects:agent-cluster href=https://tc39.es/ecma262/#sec-agent-clusters data-x-internal=agent-cluster>agent cluster</a>'s <a href=#agent-cluster-cross-origin-isolation id=realms-settings-objects-global-objects:agent-cluster-cross-origin-isolation>cross-origin isolation mode</a> is "<code id=realms-settings-objects-global-objects:cross-origin-isolation-none><a href=document-sequences.html#cross-origin-isolation-none>none</a></code>", then: <ol><li>Let <var>global</var> be <var>realm</var>'s <a href=#concept-realm-global id=realms-settings-objects-global-objects:concept-realm-global>global object</a>.<li>Let <var>status</var> be ! <var>global</var>.[[Delete]]("<code>SharedArrayBuffer</code>").<li><a id=realms-settings-objects-global-objects:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>status</var> is true.</ol> This is done for compatibility with web content and there is some hope that this can be removed in the future. Web developers can still get at the constructor through <code class=js>new WebAssembly.Memory({ shared:true, initial:0, maximum:0 }).buffer.constructor</code>. <li>Return <var>realm execution context</var>.</ol> <hr> When defining algorithm steps throughout this specification, it is often important to indicate what <a id=realms-settings-objects-global-objects:realm-7 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> is to be used—or, equivalently, what <a href=#global-object id=realms-settings-objects-global-objects:global-object-12>global object</a> or <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-5>environment settings object</a> is to be used. In general, there are at least four possibilities: <dl><dt><dfn id=concept-entry-everything>Entry</dfn><dd>This corresponds to the script that initiated the currently running script action: i.e., the function or script that the user agent called into when it called into author code.<dt><dfn id=concept-incumbent-everything>Incumbent</dfn><dd>This corresponds to the most-recently-entered author function or script on the stack, or the author function or script that originally scheduled the currently-running callback.<dt><dfn id=concept-current-everything>Current</dfn><dd>This corresponds to the currently-running function object, including built-in user-agent functions which might not be implemented as JavaScript. (It is derived from the <a id=realms-settings-objects-global-objects:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>.)<dt><dfn id=concept-relevant-everything>Relevant</dfn><dd>Every <a id=realms-settings-objects-global-objects:platform-object href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> has a <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm>relevant realm</a>, which is roughly the <a id=realms-settings-objects-global-objects:realm-8 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> in which it was created. When writing algorithms, the most prominent <a id=realms-settings-objects-global-objects:platform-object-2 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> whose <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-2>relevant realm</a> might be important is the this value of the currently-running function object. In some cases, there can be other important <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-3>relevant realms</a>, such as those of any arguments.</dl> Note how the <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything>entry</a>, <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything>incumbent</a>, and <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything>current</a> concepts are usable without qualification, whereas the <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything>relevant</a> concept must be applied to a particular <a id=realms-settings-objects-global-objects:platform-object-3 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a>. The <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything-2>incumbent</a> and <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything-2>entry</a> concepts should not be used by new specifications, as they are excessively complicated and unintuitive to work with. We are working to remove almost all existing uses from the platform: see <a href=https://github.com/whatwg/html/issues/1430>issue #1430</a> for <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything-3>incumbent</a>, and <a href=https://github.com/whatwg/html/issues/1431>issue #1431</a> for <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything-3>entry</a>. In general, web platform specifications should use the <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything-2>relevant</a> concept, applied to the object being operated on (usually the this value of the current method). This mismatches the JavaScript specification, where <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything-2>current</a> is generally used as the default (e.g., in determining the <a id=realms-settings-objects-global-objects:realm-9 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> whose <code>Array</code> constructor should be used to construct the result in <code>Array.prototype.map</code>). But this inconsistency is so embedded in the platform that we have to accept it going forward. <div class=example> Consider the following pages, with <code>a.html</code> being loaded in a browser window, <code>b.html</code> being loaded in an <code id=realms-settings-objects-global-objects:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> as shown, and <code>c.html</code> and <code>d.html</code> omitted (they can simply be empty documents): <pre><code class='html'><c- c></c-> <c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>"en"</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c->Entry page<c- p></</c-><c- f>title</c-><c- p>></c-> <c- p><</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>"b.html"</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- p><</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>"frames[0].hello()"</c-><c- p>></c->Hello<c- p></</c-><c- f>button</c-><c- p>></c-> <c- c></c-> <c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>"en"</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c->Incumbent page<c- p></</c-><c- f>title</c-><c- p>></c-> <c- p><</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>"c.html"</c-> <c- e>id</c-><c- o>=</c-><c- s>"c"</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- p><</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>"d.html"</c-> <c- e>id</c-><c- o>=</c-><c- s>"d"</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>const</c-> c <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>"#c"</c-><c- p>).</c->contentWindow<c- p>;</c-> <c- a>const</c-> d <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>"#d"</c-><c- p>).</c->contentWindow<c- p>;</c-> window<c- p>.</c->hello <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c-> c<c- p>.</c->print<c- p>.</c->call<c- p>(</c->d<c- p>);</c-> <c- p>};</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> Each page has its own <a id=realms-settings-objects-global-objects:browsing-context href=document-sequences.html#browsing-context>browsing context</a>, and thus its own <a id=realms-settings-objects-global-objects:realm-10 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>, <a href=#global-object id=realms-settings-objects-global-objects:global-object-13>global object</a>, and <a href=#environment-settings-object id=realms-settings-objects-global-objects:environment-settings-object-6>environment settings object</a>. When the <code id=realms-settings-objects-global-objects:dom-print><a href=timers-and-user-prompts.html#dom-print>print()</a></code> method is called in response to pressing the button in <code>a.html</code>, then: <ul><li>The <a href=#concept-entry-realm id=realms-settings-objects-global-objects:concept-entry-realm>entry realm</a> is that of <code>a.html</code>.<li>The <a href=#concept-incumbent-realm id=realms-settings-objects-global-objects:concept-incumbent-realm>incumbent realm</a> is that of <code>b.html</code>.<li>The <a id=realms-settings-objects-global-objects:current-realm-2 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a> is that of <code>c.html</code> (since it is the <code id=realms-settings-objects-global-objects:dom-print-2><a href=timers-and-user-prompts.html#dom-print>print()</a></code> method from <code>c.html</code> whose code is running).<li>The <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-4>relevant realm</a> of the object on which the <code id=realms-settings-objects-global-objects:dom-print-3><a href=timers-and-user-prompts.html#dom-print>print()</a></code> method is being called is that of <code>d.html</code>.</ul> </div> <div class=example> One reason why the <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything-3>relevant</a> concept is generally a better default choice than the <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything-3>current</a> concept is that it is more suitable for creating an object that is to be persisted and returned multiple times. For example, the <code id=realms-settings-objects-global-objects:dom-navigator-getbattery><a data-x-internal=dom-navigator-getbattery href=https://w3c.github.io/battery/#widl-Navigator-getBattery-Promise-BatteryManager>navigator.getBattery()</a></code> method creates promises in the <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-5>relevant realm</a> for the <code id=realms-settings-objects-global-objects:navigator><a href=system-state.html#navigator>Navigator</a></code> object on which it is invoked. This has the following impact: <a href=references.html#refsBATTERY>[BATTERY]</a> <pre><code class='html'><c- c></c-> <c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>"en"</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c->Relevant realm demo: outer page<c- p></</c-><c- f>title</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>function</c-> doTest<c- p>()</c-> <c- p>{</c-> <c- a>const</c-> promise <c- o>=</c-> navigator<c- p>.</c->getBattery<c- p>.</c->call<c- p>(</c->frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->navigator<c- p>);</c-> console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> Promise<c- p>);</c-> <c- c1>// logs false</c-> console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->Promise<c- p>);</c-> <c- c1>// logs true</c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->hello<c- p>();</c-> <c- p>}</c-> <c- p></</c-><c- f>script</c-><c- p>></c-> <c- p><</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>"inner.html"</c-> <c- e>onload</c-><c- o>=</c-><c- s>"doTest()"</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- c></c-> <c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>"en"</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c->Relevant realm demo: inner page<c- p></</c-><c- f>title</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>function</c-> hello<c- p>()</c-> <c- p>{</c-> <c- a>const</c-> promise <c- o>=</c-> navigator<c- p>.</c->getBattery<c- p>();</c-> console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> Promise<c- p>);</c-> <c- c1>// logs true</c-> console<c- p>.</c->log<c- p>(</c->promise <c- k>instanceof</c-> parent<c- p>.</c->Promise<c- p>);</c-> <c- c1>// logs false</c-> <c- p>}</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> If the algorithm for the <code id=realms-settings-objects-global-objects:dom-navigator-getbattery-2><a data-x-internal=dom-navigator-getbattery href=https://w3c.github.io/battery/#widl-Navigator-getBattery-Promise-BatteryManager>getBattery()</a></code> method had instead used the <a id=realms-settings-objects-global-objects:current-realm-3 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>, all the results would be reversed. That is, after the first call to <code id=realms-settings-objects-global-objects:dom-navigator-getbattery-3><a data-x-internal=dom-navigator-getbattery href=https://w3c.github.io/battery/#widl-Navigator-getBattery-Promise-BatteryManager>getBattery()</a></code> in <code>outer.html</code>, the <code id=realms-settings-objects-global-objects:navigator-2><a href=system-state.html#navigator>Navigator</a></code> object in <code>inner.html</code> would be permanently storing a <code>Promise</code> object created in <code>outer.html</code>'s <a id=realms-settings-objects-global-objects:realm-11 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>, and calls like that inside the <code>hello()</code> function would thus return a promise from the "wrong" realm. Since this is undesirable, the algorithm instead uses the <a href=#concept-relevant-realm id=realms-settings-objects-global-objects:concept-relevant-realm-6>relevant realm</a>, giving the sensible results indicated in the comments above. </div> <hr> The rest of this section deals with formally defining the <a href=#concept-entry-everything id=realms-settings-objects-global-objects:concept-entry-everything-4>entry</a>, <a href=#concept-incumbent-everything id=realms-settings-objects-global-objects:concept-incumbent-everything-4>incumbent</a>, <a href=#concept-current-everything id=realms-settings-objects-global-objects:concept-current-everything-4>current</a>, and <a href=#concept-relevant-everything id=realms-settings-objects-global-objects:concept-relevant-everything-4>relevant</a> concepts. <h6 id=entry>8.1.3.3.1 Entry<a href=#entry class=self-link></a></h6> The process of <a href=#calling-scripts>calling scripts</a> will push or pop <a href=#realm-execution-context id=entry:realm-execution-context>realm execution contexts</a> onto the <a id=entry:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>, interspersed with other <a href=https://tc39.es/ecma262/#sec-execution-contexts id=entry:javascript-execution-context data-x-internal=javascript-execution-context>execution contexts</a>. With this in hand, we define the <dfn id=entry-execution-context>entry execution context</dfn> to be the most recently pushed item in the <a id=entry:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> that is a <a href=#realm-execution-context id=entry:realm-execution-context-2>realm execution context</a>. The <dfn id=concept-entry-realm>entry realm</dfn> is the <a href=#entry-execution-context id=entry:entry-execution-context>entry execution context</a>'s Realm component. Then, the <dfn id=entry-settings-object>entry settings object</dfn> is the <a href=#concept-realm-settings-object id=entry:concept-realm-settings-object>environment settings object</a> of the <a href=#concept-entry-realm id=entry:concept-entry-realm>entry realm</a>. Similarly, the <dfn id=entry-global-object>entry global object</dfn> is the <a href=#concept-realm-global id=entry:concept-realm-global>global object</a> of the <a href=#concept-entry-realm id=entry:concept-entry-realm-2>entry realm</a>. <h6 id=incumbent>8.1.3.3.2 Incumbent<a href=#incumbent class=self-link></a></h6> All <a href=https://tc39.es/ecma262/#sec-execution-contexts id=incumbent:javascript-execution-context data-x-internal=javascript-execution-context>JavaScript execution contexts</a> must contain, as part of their code evaluation state, a <dfn id=skip-when-determining-incumbent-counter>skip-when-determining-incumbent counter</dfn> value, which is initially zero. In the process of <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback>preparing to run a callback</a> and <a href=#clean-up-after-running-a-callback id=incumbent:clean-up-after-running-a-callback>cleaning up after running a callback</a>, this value will be incremented and decremented. Every <a href=#event-loop id=incumbent:event-loop>event loop</a> has an associated <dfn id=backup-incumbent-settings-object-stack>backup incumbent settings object stack</dfn>, initially empty. Roughly speaking, it is used to determine the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object>incumbent settings object</a> when no author code is on the stack, but author code is responsible for the current algorithm having been run in some way. The process of <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-2>preparing to run a callback</a> and <a href=#clean-up-after-running-a-callback id=incumbent:clean-up-after-running-a-callback-2>cleaning up after running a callback</a> manipulate this stack. <a href=references.html#refsWEBIDL>[WEBIDL]</a> When Web IDL is used to <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=incumbent:es-invoking-callback-functions data-x-internal=es-invoking-callback-functions>invoke</a> author code, or when <a href=#hostenqueuepromisejob id=incumbent:hostenqueuepromisejob>HostEnqueuePromiseJob</a> invokes a promise job, they use the following algorithms to track relevant data for determining the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-2>incumbent settings object</a>: To <dfn id=prepare-to-run-a-callback data-export="">prepare to run a callback</dfn> with an <a href=#environment-settings-object id=incumbent:environment-settings-object>environment settings object</a> <var>settings</var>: <ol><li>Push <var>settings</var> onto the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack>backup incumbent settings object stack</a>.<li>Let <var>context</var> be the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context>topmost script-having execution context</a>.<li>If <var>context</var> is not null, increment <var>context</var>'s <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter>skip-when-determining-incumbent counter</a>.</ol> To <dfn id=clean-up-after-running-a-callback data-export="">clean up after running a callback</dfn> with an <a href=#environment-settings-object id=incumbent:environment-settings-object-2>environment settings object</a> <var>settings</var>: <ol><li> Let <var>context</var> be the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-2>topmost script-having execution context</a>. This will be the same as the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-3>topmost script-having execution context</a> inside the corresponding invocation of <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-3>prepare to run a callback</a>. <li>If <var>context</var> is not null, decrement <var>context</var>'s <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-2>skip-when-determining-incumbent counter</a>.<li><a id=incumbent:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: the topmost entry of the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-2>backup incumbent settings object stack</a> is <var>settings</var>.<li>Remove <var>settings</var> from the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-3>backup incumbent settings object stack</a>.</ol> Here, the <dfn id=topmost-script-having-execution-context>topmost script-having execution context</dfn> is the topmost entry of the <a id=incumbent:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> that has a non-null ScriptOrModule component, or null if there is no such entry in the <a id=incumbent:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>. With all this in place, the <dfn id=incumbent-settings-object data-export="">incumbent settings object</dfn> is determined as follows: <ol><li>Let <var>context</var> be the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-4>topmost script-having execution context</a>.<li> If <var>context</var> is null, or if <var>context</var>'s <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-3>skip-when-determining-incumbent counter</a> is greater than zero, then: <ol><li> <a id=incumbent:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-4>backup incumbent settings object stack</a> is not empty. This assert would fail if you try to obtain the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-3>incumbent settings object</a> from inside an algorithm that was triggered neither by <a href=#calling-scripts>calling scripts</a> nor by Web IDL <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=incumbent:es-invoking-callback-functions-2 data-x-internal=es-invoking-callback-functions>invoking</a> a callback. For example, it would trigger if you tried to obtain the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-4>incumbent settings object</a> inside an algorithm that ran periodically as part of the <a href=#event-loop id=incumbent:event-loop-2>event loop</a>, with no involvement of author code. In such cases the <a href=#concept-incumbent-everything id=incumbent:concept-incumbent-everything>incumbent</a> concept cannot be used. <li>Return the topmost entry of the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-5>backup incumbent settings object stack</a>.</ol> <li>Return <var>context</var>'s Realm component's <a href=#concept-realm-settings-object id=incumbent:concept-realm-settings-object>settings object</a>.</ol> Then, the <dfn id=concept-incumbent-realm data-export="">incumbent realm</dfn> is the <a href="#environment-settings-object's-realm" id="incumbent:environment-settings-object's-realm">realm</a> of the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-5>incumbent settings object</a>. Similarly, the <dfn id=concept-incumbent-global data-export="">incumbent global object</dfn> is the <a href=#concept-settings-object-global id=incumbent:concept-settings-object-global>global object</a> of the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-6>incumbent settings object</a>. <hr> The following series of examples is intended to make it clear how all of the different mechanisms contribute to the definition of the <a href=#incumbent>incumbent</a> concept: <div id=example-incumbent-1 class=example> Consider the following starter example: <pre><code class='html'><c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>iframe</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->postMessage<c- p>(</c-><c- u>"some data"</c-><c- p>,</c-> <c- u>"*"</c-><c- p>);</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> There are two interesting <a href=#environment-settings-object id=incumbent:environment-settings-object-3>environment settings objects</a> here: that of <code>window</code>, and that of <code>frames[0]</code>. Our concern is: what is the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-7>incumbent settings object</a> at the time that the algorithm for <code id=incumbent:dom-window-postmessage><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code> executes? It should be that of <code>window</code>, to capture the intuitive notion that the author script responsible for causing the algorithm to happen is executing in <code>window</code>, not <code>frames[0]</code>. This makes sense: the <a id=incumbent:window-post-message-steps href=web-messaging.html#window-post-message-steps>window post message steps</a> use the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-8>incumbent settings object</a> to determine the <code id=incumbent:dom-messageevent-source><a href=comms.html#dom-messageevent-source>source</a></code> property of the resulting <code id=incumbent:messageevent><a href=comms.html#messageevent>MessageEvent</a></code>, and in this case <code>window</code> is definitely the source of the message. Let us now explain how the steps given above give us our intuitively-desired result of <code>window</code>'s <a href=#relevant-settings-object id=incumbent:relevant-settings-object>relevant settings object</a>. When the <a id=incumbent:window-post-message-steps-2 href=web-messaging.html#window-post-message-steps>window post message steps</a> look up the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-9>incumbent settings object</a>, the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-5>topmost script-having execution context</a> will be that corresponding to the <code id=incumbent:the-script-element><a href=scripting.html#the-script-element>script</a></code> element: it was pushed onto the <a id=incumbent:javascript-execution-context-stack-3 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> as part of <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=incumbent:js-scriptevaluation data-x-internal=js-scriptevaluation>ScriptEvaluation</a> during the <a href=#run-a-classic-script id=incumbent:run-a-classic-script>run a classic script</a> algorithm. Since there are no Web IDL callback invocations involved, the context's <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-4>skip-when-determining-incumbent counter</a> is zero, so it is used to determine the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-10>incumbent settings object</a>; the result is the <a href=#environment-settings-object id=incumbent:environment-settings-object-4>environment settings object</a> of <code>window</code>. (Note how the <a href=#environment-settings-object id=incumbent:environment-settings-object-5>environment settings object</a> of <code>frames[0]</code> is the <a href=#relevant-settings-object id=incumbent:relevant-settings-object-2>relevant settings object</a> of <a id=incumbent:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> at the time the <code id=incumbent:dom-window-postmessage-2><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code> method is called, and thus is involved in determining the target of the message. Whereas the incumbent is used to determine the source.) </div> <div id=example-incumbent-2 class=example> Consider the following more complicated example: <pre><code class='html'><c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>iframe</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>const</c-> bound <c- o>=</c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->postMessage<c- p>.</c->bind<c- p>(</c->frames<c- p>[</c-><c- mf>0</c-><c- p>],</c-> <c- u>"some data"</c-><c- p>,</c-> <c- u>"*"</c-><c- p>);</c-> window<c- p>.</c->setTimeout<c- p>(</c->bound<c- p>);</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> This example is very similar to the previous one, but with an extra indirection through <code>Function.prototype.bind</code> as well as <code id=incumbent:dom-settimeout><a href=timers-and-user-prompts.html#dom-settimeout>setTimeout()</a></code>. But, the answer should be the same: invoking algorithms asynchronously should not change the <a href=#concept-incumbent-everything id=incumbent:concept-incumbent-everything-2>incumbent</a> concept. This time, the result involves more complicated mechanisms: When <code>bound</code> is <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=incumbent:concept-idl-convert data-x-internal=concept-idl-convert>converted</a> to a Web IDL callback type, the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-11>incumbent settings object</a> is that corresponding to <code>window</code> (in the same manner as in our starter example above). Web IDL stores this as the resulting callback value's <a id=incumbent:callback-context href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a>. When the <a href=#concept-task id=incumbent:concept-task>task</a> posted by <code id=incumbent:dom-settimeout-2><a href=timers-and-user-prompts.html#dom-settimeout>setTimeout()</a></code> executes, the algorithm for that task uses Web IDL to <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=incumbent:es-invoking-callback-functions-3 data-x-internal=es-invoking-callback-functions>invoke</a> the stored callback value. Web IDL in turn calls the above <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-4>prepare to run a callback</a> algorithm. This pushes the stored <a id=incumbent:callback-context-2 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a> onto the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-6>backup incumbent settings object stack</a>. At this time (inside the timer task) there is no author code on the stack, so the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-6>topmost script-having execution context</a> is null, and nothing gets its <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-5>skip-when-determining-incumbent counter</a> incremented. Invoking the callback then calls <code>bound</code>, which in turn calls the <code id=incumbent:dom-window-postmessage-3><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code> method of <code>frames[0]</code>. When the <code id=incumbent:dom-window-postmessage-4><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code> algorithm looks up the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-12>incumbent settings object</a>, there is still no author code on the stack, since the bound function just directly calls the built-in method. So the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-7>topmost script-having execution context</a> will be null: the <a id=incumbent:javascript-execution-context-2 href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> stack only contains an execution context corresponding to <code id=incumbent:dom-window-postmessage-5><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code>, with no <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=incumbent:js-scriptevaluation-2 data-x-internal=js-scriptevaluation>ScriptEvaluation</a> context or similar below it. This is where we fall back to the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-7>backup incumbent settings object stack</a>. As noted above, it will contain as its topmost entry the <a href=#relevant-settings-object id=incumbent:relevant-settings-object-3>relevant settings object</a> of <code>window</code>. So that is what is used as the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-13>incumbent settings object</a> while executing the <code id=incumbent:dom-window-postmessage-6><a href=web-messaging.html#dom-window-postmessage>postMessage()</a></code> algorithm. </div> <div id=example-incumbent-3 class=example> Consider this final, even more convoluted example: <pre><code class='html'><c- c></c-> <c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>button</c-><c- p>></c->click me<c- p></</c-><c- f>button</c-><c- p>></c-> <c- p><</c-><c- f>iframe</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>const</c-> bound <c- o>=</c-> frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->location<c- p>.</c->assign<c- p>.</c->bind<c- p>(</c->frames<c- p>[</c-><c- mf>0</c-><c- p>].</c->location<c- p>,</c-> <c- u>"https://example.com/"</c-><c- p>);</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>"button"</c-><c- p>).</c->addEventListener<c- p>(</c-><c- u>"click"</c-><c- p>,</c-> bound<c- p>);</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> <pre><code class='html'><c- c></c-> <c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>"a.html"</c-><c- p>></</c-><c- f>iframe</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>const</c-> iframe <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>"iframe"</c-><c- p>);</c-> iframe<c- p>.</c->onload <c- o>=</c-> <c- a>function</c-> onLoad<c- p>()</c-> <c- p>{</c-> iframe<c- p>.</c->contentWindow<c- p>.</c->document<c- p>.</c->querySelector<c- p>(</c-><c- u>"button"</c-><c- p>).</c->click<c- p>();</c-> <c- p>};</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> Again there are two interesting <a href=#environment-settings-object id=incumbent:environment-settings-object-6>environment settings objects</a> in play: that of <code>a.html</code>, and that of <code>b.html</code>. When the <code id=incumbent:dom-location-assign><a href=nav-history-apis.html#dom-location-assign>location.assign()</a></code> method triggers the <a id=incumbent:location-object-navigate href=nav-history-apis.html#location-object-navigate><code>Location</code>-object navigate</a> algorithm, what will be the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-14>incumbent settings object</a>? As before, it should intuitively be that of <code>a.html</code>: the <code id=incumbent:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> listener was originally scheduled by <code>a.html</code>, so even if something involving <code>b.html</code> causes the listener to fire, the <a href=#concept-incumbent-everything id=incumbent:concept-incumbent-everything-3>incumbent</a> responsible is that of <code>a.html</code>. The callback setup is similar to the previous example: when <code>bound</code> is <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=incumbent:concept-idl-convert-2 data-x-internal=concept-idl-convert>converted</a> to a Web IDL callback type, the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-15>incumbent settings object</a> is that corresponding to <code>a.html</code>, which is stored as the callback's <a id=incumbent:callback-context-3 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a>. When the <code id=incumbent:dom-click><a href=interaction.html#dom-click>click()</a></code> method is called inside <code>b.html</code>, it <a href=https://dom.spec.whatwg.org/#concept-event-dispatch id=incumbent:concept-event-dispatch data-x-internal=concept-event-dispatch>dispatches</a> a <code id=incumbent:event-click-2><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event on the button that is inside <code>a.html</code>. This time, when the <a href=#prepare-to-run-a-callback id=incumbent:prepare-to-run-a-callback-5>prepare to run a callback</a> algorithm executes as part of event dispatch, there is author code on the stack; the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-8>topmost script-having execution context</a> is that of the <code>onLoad</code> function, whose <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-6>skip-when-determining-incumbent counter</a> gets incremented. Additionally, <code>a.html</code>'s <a href=#environment-settings-object id=incumbent:environment-settings-object-7>environment settings object</a> (stored as the <code id=incumbent:eventhandler><a href=#eventhandler>EventHandler</a></code>'s <a id=incumbent:callback-context-4 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a>) is pushed onto the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-8>backup incumbent settings object stack</a>. Now, when the <a id=incumbent:location-object-navigate-2 href=nav-history-apis.html#location-object-navigate><code>Location</code>-object navigate</a> algorithm looks up the <a href=#incumbent-settings-object id=incumbent:incumbent-settings-object-16>incumbent settings object</a>, the <a href=#topmost-script-having-execution-context id=incumbent:topmost-script-having-execution-context-9>topmost script-having execution context</a> is still that of the <code>onLoad</code> function (due to the fact we are using a bound function as the callback). Its <a href=#skip-when-determining-incumbent-counter id=incumbent:skip-when-determining-incumbent-counter-7>skip-when-determining-incumbent counter</a> value is one, however, so we fall back to the <a href=#backup-incumbent-settings-object-stack id=incumbent:backup-incumbent-settings-object-stack-9>backup incumbent settings object stack</a>. This gives us the <a href=#environment-settings-object id=incumbent:environment-settings-object-8>environment settings object</a> of <code>a.html</code>, as expected. Note that this means that even though it is the <code id=incumbent:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> inside <code>a.html</code> that navigates, it is <code>a.html</code> itself that is used as the source <code id=incumbent:document><a href=dom.html#document>Document</a></code>, which determines among other things the <a href=https://fetch.spec.whatwg.org/#concept-request-client id=incumbent:concept-request-client data-x-internal=concept-request-client>request client</a>. This is <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=26603#c36">perhaps the only justifiable use of the incumbent concept on the web platform</a>; in all other cases the consequences of using it are simply confusing and we hope to one day switch them to use <a href=#concept-current-everything id=incumbent:concept-current-everything>current</a> or <a href=#concept-relevant-everything id=incumbent:concept-relevant-everything>relevant</a> as appropriate. </div> <h6 id=current>8.1.3.3.3 Current<a href=#current class=self-link></a></h6> The JavaScript specification defines the <a id=current:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>, also known as the "current Realm Record". <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> Then, the <dfn id=current-settings-object data-export="">current settings object</dfn> is the <a href=#concept-realm-settings-object id=current:concept-realm-settings-object>environment settings object</a> of the <a id=current:current-realm-2 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>. Similarly, the <dfn id=current-global-object data-export="">current global object</dfn> is the <a href=#concept-realm-global id=current:concept-realm-global>global object</a> of the <a id=current:current-realm-3 href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>. <h6 id=relevant>8.1.3.3.4 Relevant<a href=#relevant class=self-link></a></h6> The <dfn id=concept-relevant-realm data-export="">relevant realm</dfn> for a <a id=relevant:platform-object href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> is the value of <a href=https://webidl.spec.whatwg.org/#es-platform-objects id=relevant:realm-field-of-a-platform-object data-x-internal=realm-field-of-a-platform-object>its [[Realm]] field</a>. Then, the <dfn id=relevant-settings-object data-export="">relevant settings object</dfn> for a <a id=relevant:platform-object-2 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> <var>o</var> is the <a href=#concept-realm-settings-object id=relevant:concept-realm-settings-object>environment settings object</a> of the <a href=#concept-relevant-realm id=relevant:concept-relevant-realm>relevant realm</a> for <var>o</var>. Similarly, the <dfn id=concept-relevant-global data-export="">relevant global object</dfn> for a <a id=relevant:platform-object-3 href=https://webidl.spec.whatwg.org/#dfn-platform-object data-x-internal=platform-object>platform object</a> <var>o</var> is the <a href=#concept-realm-global id=relevant:concept-realm-global>global object</a> of the <a href=#concept-relevant-realm id=relevant:concept-relevant-realm-2>relevant realm</a> for <var>o</var>. <h5 id=enabling-and-disabling-scripting>8.1.3.4 Enabling and disabling scripting<a href=#enabling-and-disabling-scripting class=self-link></a></h5> <dfn id=concept-environment-script>Scripting is enabled</dfn> for an <a href=#environment-settings-object id=enabling-and-disabling-scripting:environment-settings-object>environment settings object</a> <var>settings</var> when all of the following conditions are true: <ul><li>The user agent supports scripting.<li> <a id=enabling-and-disabling-scripting:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" src=https://resources.whatwg.org/tracking-vector.svg height=64></a> The user has not disabled scripting for <var>settings</var> at this time. (User agents may provide users with the option to disable scripting globally, or in a finer-grained manner, e.g., on a per-origin basis, down to the level of individual <a href=#environment-settings-object id=enabling-and-disabling-scripting:environment-settings-object-2>environment settings objects</a>.)<li id=sandboxScriptBlocked>Either <var>settings</var>'s <a href=#concept-settings-object-global id=enabling-and-disabling-scripting:concept-settings-object-global>global object</a> is not a <code id=enabling-and-disabling-scripting:window><a href=nav-history-apis.html#window>Window</a></code> object, or <var>settings</var>'s <a href=#concept-settings-object-global id=enabling-and-disabling-scripting:concept-settings-object-global-2>global object</a>'s <a href=nav-history-apis.html#concept-document-window id=enabling-and-disabling-scripting:concept-document-window>associated <code>Document</code></a>'s <a id=enabling-and-disabling-scripting:active-sandboxing-flag-set href=browsers.html#active-sandboxing-flag-set>active sandboxing flag set</a> does not have its <a id=enabling-and-disabling-scripting:sandboxed-scripts-browsing-context-flag href=browsers.html#sandboxed-scripts-browsing-context-flag>sandboxed scripts browsing context flag</a> set.</ul> <dfn id=concept-environment-noscript>Scripting is disabled</dfn> for an <a href=#environment-settings-object id=enabling-and-disabling-scripting:environment-settings-object-3>environment settings object</a> when scripting is not <a href=#concept-environment-script id=enabling-and-disabling-scripting:concept-environment-script>enabled</a> for it, i.e., when any of the above conditions are false. <hr> <dfn id=concept-n-script>Scripting is enabled</dfn> for a node <var>node</var> if <var>node</var>'s <a id=enabling-and-disabling-scripting:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=document-sequences.html#concept-document-bc id=enabling-and-disabling-scripting:concept-document-bc>browsing context</a> is non-null, and <a href=#concept-environment-script id=enabling-and-disabling-scripting:concept-environment-script-2>scripting is enabled</a> for <var>node</var>'s <a href=#relevant-settings-object id=enabling-and-disabling-scripting:relevant-settings-object>relevant settings object</a>. <dfn id=concept-n-noscript>Scripting is disabled</dfn> for a node when scripting is not <a href=#concept-n-script id=enabling-and-disabling-scripting:concept-n-script>enabled</a>, i.e., when its <a id=enabling-and-disabling-scripting:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=document-sequences.html#concept-document-bc id=enabling-and-disabling-scripting:concept-document-bc-2>browsing context</a> is null or when <a href=#concept-environment-noscript id=enabling-and-disabling-scripting:concept-environment-noscript>scripting is disabled</a> for its <a href=#relevant-settings-object id=enabling-and-disabling-scripting:relevant-settings-object-2>relevant settings object</a>. <h5 id=secure-contexts>8.1.3.5 Secure contexts<a href=#secure-contexts class=self-link></a></h5> An <a href=#environment id=secure-contexts:environment>environment</a> <var>environment</var> is a <dfn id=secure-context data-lt="secure context|Is an environment settings object contextually secure?" data-export="">secure context</dfn> if the following algorithm returns true: <ol><li> If <var>environment</var> is an <a href=#environment-settings-object id=secure-contexts:environment-settings-object>environment settings object</a>, then: <ol><li>Let <var>global</var> be <var>environment</var>'s <a href=#concept-settings-object-global id=secure-contexts:concept-settings-object-global>global object</a>.<li> If <var>global</var> is a <code id=secure-contexts:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code>, then: <ol><li> If <var>global</var>'s <a id=secure-contexts:concept-WorkerGlobalScope-owner-set href=workers.html#concept-WorkerGlobalScope-owner-set>owner set</a>[0]'s <a href=#relevant-settings-object id=secure-contexts:relevant-settings-object>relevant settings object</a> is a <a href=#secure-context id=secure-contexts:secure-context>secure context</a>, then return true. We only need to check the 0th item since they will necessarily all be consistent. <li>Return false.</ol> <li> If <var>global</var> is a <code id=secure-contexts:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code>, then return true. Worklets can only be created in secure contexts. </ol> <li>If the result of <a id=secure-contexts:is-url-potentially-trustworthy href=https://w3c.github.io/webappsec-secure-contexts/#potentially-trustworthy-url data-x-internal=is-url-potentially-trustworthy>Is url potentially trustworthy?</a> given <var>environment</var>'s <a href=#concept-environment-top-level-creation-url id=secure-contexts:concept-environment-top-level-creation-url>top-level creation URL</a> is "<code>Potentially Trustworthy</code>", then return true.<li>Return false.</ol> An <a href=#environment id=secure-contexts:environment-2>environment</a> is a <dfn id=non-secure-context data-export="">non-secure context</dfn> if it is not a <a href=#secure-context id=secure-contexts:secure-context-2>secure context</a>. <h4 id=scripting-processing-model>8.1.4 Script processing model<a href=#scripting-processing-model class=self-link></a></h4> <h5 id=script-structs>8.1.4.1 Scripts<a href=#script-structs class=self-link></a></h5> A <dfn id=concept-script data-export="">script</dfn> is one of two possible <a href=https://infra.spec.whatwg.org/#struct id=script-structs:struct data-x-internal=struct>structs</a> (namely, a <a href=#classic-script id=script-structs:classic-script>classic script</a> or a <a href=#module-script id=script-structs:module-script>module script</a>). All scripts have: <dl><dt>A <dfn data-dfn-for=script id=settings-object data-export="">settings object</dfn><dd>An <a href=#environment-settings-object id=script-structs:environment-settings-object>environment settings object</a>, containing various settings that are shared with other <a href=#concept-script id=script-structs:concept-script>scripts</a> in the same context.<dt>A <dfn data-dfn-for=script id=concept-script-record data-export="">record</dfn><dd> One of the following: <ul><li>a <a id=script-structs:script-record href=https://tc39.es/ecma262/#sec-script-records data-x-internal=script-record>script record</a>, for <a href=#classic-script id=script-structs:classic-script-2>classic scripts</a>;<li>a <a id=script-structs:source-text-module-record href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module Record</a>, for <a href=#javascript-module-script id=script-structs:javascript-module-script>JavaScript module scripts</a>;<li>a <a id=script-structs:synthetic-module-record href=https://tc39.es/proposal-json-modules/#sec-synthetic-module-records data-x-internal=synthetic-module-record>Synthetic Module Record</a>, for <a href=#css-module-script id=script-structs:css-module-script>CSS module scripts</a> and <a href=#json-module-script id=script-structs:json-module-script>JSON module scripts</a>;<li>a <a id=script-structs:webassembly-module-record href=https://webassembly.github.io/esm-integration/js-api/index.html#webassembly-module-record data-x-internal=webassembly-module-record>WebAssembly Module Record</a>, for <a href=#webassembly-module-script id=script-structs:webassembly-module-script>WebAssembly module scripts</a>; or<li>null, representing a parsing failure.</ul> <dt>A <dfn data-dfn-for=script id=concept-script-parse-error>parse error</dfn><dd> A JavaScript value, which has meaning only if the <a href=#concept-script-record id=script-structs:concept-script-record>record</a> is null, indicating that the corresponding script source text could not be parsed. This value is used for internal tracking of immediate parse errors when <a href=#creating-scripts>creating scripts</a>, and is not to be used directly. Instead, consult the <a href=#concept-script-error-to-rethrow id=script-structs:concept-script-error-to-rethrow>error to rethrow</a> when determining "what went wrong" for this script. <dt>An <dfn data-dfn-for=script id=concept-script-error-to-rethrow data-export="">error to rethrow</dfn><dd> A JavaScript value representing an error that will prevent evaluation from succeeding. It will be re-thrown by any attempts to <a href=#calling-scripts>run</a> the script. This could be the script's <a href=#concept-script-parse-error id=script-structs:concept-script-parse-error>parse error</a>, but in the case of a <a href=#module-script id=script-structs:module-script-2>module script</a> it could instead be the <a href=#concept-script-parse-error id=script-structs:concept-script-parse-error-2>parse error</a> from one of its dependencies, or an error from <a href=#resolve-a-module-specifier id=script-structs:resolve-a-module-specifier>resolve a module specifier</a>. Since this exception value is provided by the JavaScript specification, we know that it is never null, so we use null to signal that no error has occurred. <dt><dfn data-dfn-for=script id=concept-script-script-fetch-options data-export="">Fetch options</dfn><dd>Null or a <a href=#script-fetch-options id=script-structs:script-fetch-options>script fetch options</a>, containing various options related to fetching this script or <a href=#module-script id=script-structs:module-script-3>module scripts</a> that it imports.<dt>A <dfn data-dfn-for=script id=concept-script-base-url data-export="">base URL</dfn><dd>Null or a base <a id=script-structs:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> used for <a href=#resolve-a-module-specifier id=script-structs:resolve-a-module-specifier-2>resolving module specifiers</a>. When non-null, this will either be the URL from which the script was obtained, for external scripts, or the <a id=script-structs:document-base-url href=urls-and-fetching.html#document-base-url>document base URL</a> of the containing document, for inline scripts.</dl> A <dfn id=classic-script data-export="">classic script</dfn> is a type of <a href=#concept-script id=script-structs:concept-script-2>script</a> that has the following additional <a href=https://infra.spec.whatwg.org/#struct-item id=script-structs:struct-item data-x-internal=struct-item>item</a>: <dl><dt>A <dfn id=muted-errors>muted errors</dfn> boolean<dd>A boolean which, if true, means that error information will not be provided for errors in this script. This is used to mute errors for cross-origin scripts, since that can leak private information.</dl> A <dfn id=module-script data-export="">module script</dfn> is another type of <a href=#concept-script id=script-structs:concept-script-3>script</a>. It has no additional <a href=https://infra.spec.whatwg.org/#struct-item id=script-structs:struct-item-2 data-x-internal=struct-item>items</a>. <a href=#module-script id=script-structs:module-script-4>Module scripts</a> can be classified into four types: <ul><li>A <a href=#module-script id=script-structs:module-script-5>module script</a> is a <dfn id=javascript-module-script data-export="">JavaScript module script</dfn> if its <a href=#concept-script-record id=script-structs:concept-script-record-2>record</a> is a <a id=script-structs:source-text-module-record-2 href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module Record</a>.<li> A <a href=#module-script id=script-structs:module-script-6>module script</a> is a <dfn id=css-module-script data-export="">CSS module script</dfn> if its <a href=#concept-script-record id=script-structs:concept-script-record-3>record</a> is a <a id=script-structs:synthetic-module-record-2 href=https://tc39.es/proposal-json-modules/#sec-synthetic-module-records data-x-internal=synthetic-module-record>Synthetic Module Record</a>, and it was created via the <a href=#creating-a-css-module-script id=script-structs:creating-a-css-module-script>create a CSS module script</a> algorithm. CSS module scripts represent a parsed CSS stylesheet. <li> A <a href=#module-script id=script-structs:module-script-7>module script</a> is a <dfn id=json-module-script data-export="">JSON module script</dfn> if its <a href=#concept-script-record id=script-structs:concept-script-record-4>record</a> is a <a id=script-structs:synthetic-module-record-3 href=https://tc39.es/proposal-json-modules/#sec-synthetic-module-records data-x-internal=synthetic-module-record>Synthetic Module Record</a>, and it was created via the <a href=#creating-a-json-module-script id=script-structs:creating-a-json-module-script>create a JSON module script</a> algorithm. JSON module scripts represent a parsed JSON document. <li> A <a href=#module-script id=script-structs:module-script-8>module script</a> is a <dfn id=webassembly-module-script data-export="">WebAssembly module script</dfn> if its <a href=#concept-script-record id=script-structs:concept-script-record-5>record</a> is a <a id=script-structs:webassembly-module-record-2 href=https://webassembly.github.io/esm-integration/js-api/index.html#webassembly-module-record data-x-internal=webassembly-module-record>WebAssembly Module Record</a>. </ul> As CSS stylesheets and JSON documents do not import dependent modules, and do not throw exceptions on evaluation, the <a href=#concept-script-script-fetch-options id=script-structs:concept-script-script-fetch-options>fetch options</a> and <a href=#concept-script-base-url id=script-structs:concept-script-base-url>base URL</a> of <a href=#css-module-script id=script-structs:css-module-script-2>CSS module scripts</a> and <a href=#json-module-script id=script-structs:json-module-script-2>JSON module scripts</a> and are always null. The <dfn id=active-script>active script</dfn> is determined by the following algorithm: <ol><li>Let <var>record</var> be <a id=script-structs:getactivescriptormodule href=https://tc39.es/ecma262/#sec-getactivescriptormodule data-x-internal=getactivescriptormodule>GetActiveScriptOrModule</a>().<li>If <var>record</var> is null, return null.<li>Return <var>record</var>.[[HostDefined]].</ol> The <a href=#active-script id=script-structs:active-script>active script</a> concept is so far only used by the <code id=script-structs:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> feature, to determine the <a href=#concept-script-base-url id=script-structs:concept-script-base-url-2>base URL</a> to use for resolving relative module specifiers. <h5 id=fetching-scripts>8.1.4.2 Fetching scripts<a href=#fetching-scripts class=self-link></a></h5> This section introduces a number of algorithms for fetching scripts, taking various necessary inputs and resulting in <a href=#classic-script id=fetching-scripts:classic-script>classic</a> or <a href=#module-script id=fetching-scripts:module-script>module scripts</a>. <hr> <dfn id=script-fetch-options>Script fetch options</dfn> is a <a id=fetching-scripts:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with the following <a href=https://infra.spec.whatwg.org/#struct-item id=fetching-scripts:struct-item data-x-internal=struct-item>items</a>: <dl><dt><dfn id=concept-script-fetch-options-nonce>cryptographic nonce</dfn><dd>The <a href=https://fetch.spec.whatwg.org/#concept-request-nonce-metadata id=fetching-scripts:concept-request-nonce-metadata data-x-internal=concept-request-nonce-metadata>cryptographic nonce metadata</a> used for the initial fetch and for fetching any imported modules<dt><dfn id=concept-script-fetch-options-integrity>integrity metadata</dfn><dd>The <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=fetching-scripts:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity metadata</a> used for the initial fetch<dt><dfn id=concept-script-fetch-options-parser>parser metadata</dfn><dd>The <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata data-x-internal=concept-request-parser-metadata>parser metadata</a> used for the initial fetch and for fetching any imported modules<dt><dfn id=concept-script-fetch-options-credentials>credentials mode</dfn><dd>The <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=fetching-scripts:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> used for the initial fetch (for <a href=#module-script id=fetching-scripts:module-script-2>module scripts</a>) and for fetching any imported modules (for both <a href=#module-script id=fetching-scripts:module-script-3>module scripts</a> and <a href=#classic-script id=fetching-scripts:classic-script-2>classic scripts</a>)<dt><dfn id=concept-script-fetch-options-referrer-policy>referrer policy</dfn><dd> The <a href=https://fetch.spec.whatwg.org/#concept-request-referrer-policy id=fetching-scripts:concept-request-referrer-policy data-x-internal=concept-request-referrer-policy>referrer policy</a> used for the initial fetch and for fetching any imported modules This policy can mutate after a <a href=#module-script id=fetching-scripts:module-script-4>module script</a>'s <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response data-x-internal=concept-response>response</a> is received, to be the <a id=fetching-scripts:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> <a href=https://w3c.github.io/webappsec-referrer-policy/#parse-referrer-policy-from-header id=fetching-scripts:parse-referrer-policy-header data-x-internal=parse-referrer-policy-header>parsed</a> from the <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-2 data-x-internal=concept-response>response</a>, and used when fetching any module dependencies. <dt><dfn id=concept-script-fetch-options-render-blocking>render-blocking</dfn><dd>The boolean value of <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=fetching-scripts:concept-request-render-blocking data-x-internal=concept-request-render-blocking>render-blocking</a> used for the initial fetch and for fetching any imported modules. Unless otherwise stated, its value is false.<dt><dfn id=concept-script-fetch-options-fetch-priority>fetch priority</dfn><dd>The <a href=https://fetch.spec.whatwg.org/#request-priority id=fetching-scripts:concept-request-priority data-x-internal=concept-request-priority>priority</a> used for the initial fetch</dl> Recall that via the <code id=fetching-scripts:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> feature, <a href=#classic-script id=fetching-scripts:classic-script-3>classic scripts</a> can import <a href=#module-script id=fetching-scripts:module-script-5>module scripts</a>. The <dfn id=default-script-fetch-options>default script fetch options</dfn> are a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options>script fetch options</a> whose <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce>cryptographic nonce</a> is the empty string, <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity>integrity metadata</a> is the empty string, <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser>parser metadata</a> is "<code>not-parser-inserted</code>", <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials>credentials mode</a> is "<code>same-origin</code>", <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy>referrer policy</a> is the empty string, and <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority>fetch priority</a> is "<code>auto</code>". Given a <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request data-x-internal=concept-request>request</a> <var>request</var> and a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-2>script fetch options</a> <var>options</var>, we define: <dl><dt><dfn id=set-up-the-classic-script-request>set up the classic script request</dfn><dd>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-nonce-metadata id=fetching-scripts:concept-request-nonce-metadata-2 data-x-internal=concept-request-nonce-metadata>cryptographic nonce metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce-2>cryptographic nonce</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=fetching-scripts:concept-request-integrity-metadata-2 data-x-internal=concept-request-integrity-metadata>integrity metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-2>integrity metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-2 data-x-internal=concept-request-parser-metadata>parser metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser-2>parser metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-referrer-policy id=fetching-scripts:concept-request-referrer-policy-2 data-x-internal=concept-request-referrer-policy>referrer policy</a> to <var>options</var>'s <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-2>referrer policy</a>, its <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=fetching-scripts:concept-request-render-blocking-2 data-x-internal=concept-request-render-blocking>render-blocking</a> to <var>options</var>'s <a href=#concept-script-fetch-options-render-blocking id=fetching-scripts:concept-script-fetch-options-render-blocking>render-blocking</a>, and its <a href=https://fetch.spec.whatwg.org/#request-priority id=fetching-scripts:concept-request-priority-2 data-x-internal=concept-request-priority>priority</a> to <var>options</var>'s <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-2>fetch priority</a>.<dt><dfn id=set-up-the-module-script-request>set up the module script request</dfn><dd>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-nonce-metadata id=fetching-scripts:concept-request-nonce-metadata-3 data-x-internal=concept-request-nonce-metadata>cryptographic nonce metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce-3>cryptographic nonce</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=fetching-scripts:concept-request-integrity-metadata-3 data-x-internal=concept-request-integrity-metadata>integrity metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-3>integrity metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-3 data-x-internal=concept-request-parser-metadata>parser metadata</a> to <var>options</var>'s <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser-3>parser metadata</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=fetching-scripts:concept-request-credentials-mode-2 data-x-internal=concept-request-credentials-mode>credentials mode</a> to <var>options</var>'s <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-2>credentials mode</a>, its <a href=https://fetch.spec.whatwg.org/#concept-request-referrer-policy id=fetching-scripts:concept-request-referrer-policy-3 data-x-internal=concept-request-referrer-policy>referrer policy</a> to <var>options</var>'s <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-3>referrer policy</a>, its <a href=https://fetch.spec.whatwg.org/#request-render-blocking id=fetching-scripts:concept-request-render-blocking-3 data-x-internal=concept-request-render-blocking>render-blocking</a> to <var>options</var>'s <a href=#concept-script-fetch-options-render-blocking id=fetching-scripts:concept-script-fetch-options-render-blocking-2>render-blocking</a>, and its <a href=https://fetch.spec.whatwg.org/#request-priority id=fetching-scripts:concept-request-priority-3 data-x-internal=concept-request-priority>priority</a> to <var>options</var>'s <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-3>fetch priority</a>.</dl> To <dfn id=get-the-descendant-script-fetch-options>get the descendant script fetch options</dfn> given a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-3>script fetch options</a> <var>originalOptions</var>, a <a id=fetching-scripts:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, and an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object>environment settings object</a> <var>settingsObject</var>: <ol><li>Let <var>newOptions</var> be a copy of <var>originalOptions</var>.<li>Let <var>integrity</var> be the result of <a href=#resolving-a-module-integrity-metadata id=fetching-scripts:resolving-a-module-integrity-metadata>resolving a module integrity metadata</a> with <var>url</var> and <var>settingsObject</var>.<li>Set <var>newOptions</var>'s <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-4>integrity metadata</a> to <var>integrity</var>.<li>Set <var>newOptions</var>'s <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-4>fetch priority</a> to "<code>auto</code>".<li>Return <var>newOptions</var>.</ol> To <dfn id=resolving-a-module-integrity-metadata>resolve a module integrity metadata</dfn>, given a <a id=fetching-scripts:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var> and an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-2>environment settings object</a> <var>settingsObject</var>: <ol><li>Let <var>map</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-global id=fetching-scripts:concept-settings-object-global>global object</a>'s <a href=#concept-global-import-map id=fetching-scripts:concept-global-import-map>import map</a>.<li>If <var>map</var>'s <a href=#concept-import-map-integrity id=fetching-scripts:concept-import-map-integrity>integrity</a>[<var>url</var>] does not <a href=https://infra.spec.whatwg.org/#map-exists id=fetching-scripts:map-exists data-x-internal=map-exists>exist</a>, then return the empty string.<li>Return <var>map</var>'s <a href=#concept-import-map-integrity id=fetching-scripts:concept-import-map-integrity-2>integrity</a>[<var>url</var>].</ol> <hr> Several of the below algorithms can be customized with a <dfn data-dfn-for="fetching scripts" id=fetching-scripts-perform-fetch data-export="">perform the fetch hook</dfn> algorithm, which takes a <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-2 data-x-internal=concept-request>request</a>, a boolean <var id=fetching-scripts:fetching-scripts-is-top-level><a href=#fetching-scripts-is-top-level>isTopLevel</a></var>, and a <dfn data-dfn-for="fetching scripts" id=fetching-scripts-processcustomfetchresponse data-export=""><var>processCustomFetchResponse</var></dfn> algorithm. It runs <var id=fetching-scripts:fetching-scripts-processcustomfetchresponse><a href=#fetching-scripts-processcustomfetchresponse>processCustomFetchResponse</a></var> with a <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-3 data-x-internal=concept-response>response</a> and either null (on failure) or a <a id=fetching-scripts:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> containing the response body. <dfn data-dfn-for="fetching scripts" id=fetching-scripts-is-top-level data-export=""><var>isTopLevel</var></dfn> will be true for all <a href=#classic-script id=fetching-scripts:classic-script-4>classic script</a> fetches, and for the initial fetch when <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree>fetching an external module script graph</a> or <a href=#fetch-a-module-worker-script-tree id=fetching-scripts:fetch-a-module-worker-script-tree>fetching a module worker script graph</a>, but false for the fetches resulting from <code>import</code> statements encountered throughout the graph or from <code>import()</code> expressions. By default, not supplying a <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch>perform the fetch hook</a> will cause the below algorithms to simply <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch data-x-internal=concept-fetch>fetch</a> the given <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-3 data-x-internal=concept-request>request</a>, with algorithm-specific customizations to the <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-4 data-x-internal=concept-request>request</a> and validations of the resulting <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-4 data-x-internal=concept-response>response</a>. To layer your own customizations on top of these algorithm-specific ones, supply a <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-2>perform the fetch hook</a> that modifies the given <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-5 data-x-internal=concept-request>request</a>, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-2 data-x-internal=concept-fetch>fetches</a> it, and then performs specific validations of the resulting <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-5 data-x-internal=concept-response>response</a> (completing with a <a id=fetching-scripts:network-error href=https://fetch.spec.whatwg.org/#concept-network-error data-x-internal=network-error>network error</a> if the validations fail). The hook can also be used to perform more subtle customizations, such as keeping a cache of <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-6 data-x-internal=concept-response>responses</a> and avoiding performing a <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-3 data-x-internal=concept-fetch>fetch</a> at all. <cite>Service Workers</cite> is an example of a specification that runs these algorithms with its own options for the hook. <a href=references.html#refsSW>[SW]</a> <hr> Now for the algorithms themselves. To <dfn id=fetch-a-classic-script data-export="">fetch a classic script</dfn> given a <a id=fetching-scripts:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-3>environment settings object</a> <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-4>script fetch options</a> <var>options</var>, a <a href=urls-and-fetching.html#cors-settings-attribute id=fetching-scripts:cors-settings-attribute>CORS settings attribute state</a> <var>corsSetting</var>, an <a id=fetching-scripts:encoding href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> <var>encoding</var>, and an algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#classic-script id=fetching-scripts:classic-script-5>classic script</a> (on success). <ol><li>Let <var>request</var> be the result of <a href=urls-and-fetching.html#create-a-potential-cors-request id=fetching-scripts:create-a-potential-cors-request>creating a potential-CORS request</a> given <var>url</var>, "<code>script</code>", and <var>corsSetting</var>.<li>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client data-x-internal=concept-request-client>client</a> to <var>settingsObject</var>. <li>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator type</a> to "<code>script</code>". <li><a href=#set-up-the-classic-script-request id=fetching-scripts:set-up-the-classic-script-request>Set up the classic script request</a> given <var>request</var> and <var>options</var>.<li> <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-4 data-x-internal=concept-fetch>Fetch</a> <var>request</var> with the following <a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a> steps given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-7 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a <a id=fetching-scripts:byte-sequence-2 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>: <var>response</var> can be either <a id=fetching-scripts:cors-same-origin href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a> or <a id=fetching-scripts:cors-cross-origin href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>. This only affects how error reporting happens. <ol><li>Set <var>response</var> to <var>response</var>'s <a id=fetching-scripts:unsafe-response href=urls-and-fetching.html#unsafe-response>unsafe response</a>.<li> If any of the following are true: <ul><li><var>bodyBytes</var> is null or failure; or<li><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status data-x-internal=concept-response-status>status</a> is not an <a id=fetching-scripts:ok-status href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>,</ul> then run <var>onComplete</var> given null, and abort these steps. For historical reasons, this algorithm does not include MIME type checking, unlike the other script-fetching algorithms in this section. <li>Let <var>potentialMIMETypeForEncoding</var> be the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type data-x-internal=extract-a-mime-type>extracting a MIME type</a> given <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list data-x-internal=concept-response-header-list>header list</a>.<li> Set <var>encoding</var> to the result of <a href=https://fetch.spec.whatwg.org/#legacy-extract-an-encoding id=fetching-scripts:legacy-extract-an-encoding data-x-internal=legacy-extract-an-encoding>legacy extracting an encoding</a> given <var>potentialMIMETypeForEncoding</var> and <var>encoding</var>. This intentionally ignores the <a id=fetching-scripts:mime-type-essence href=https://mimesniff.spec.whatwg.org/#mime-type-essence data-x-internal=mime-type-essence>MIME type essence</a>. <li> Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#decode id=fetching-scripts:decode data-x-internal=decode>decoding</a> <var>bodyBytes</var> to Unicode, using <var>encoding</var> as the fallback encoding. The <a id=fetching-scripts:decode-2 href=https://encoding.spec.whatwg.org/#decode data-x-internal=decode>decode</a> algorithm overrides <var>encoding</var> if the file contains a BOM. <li>Let <var>mutedErrors</var> be true if <var>response</var> was <a id=fetching-scripts:cors-cross-origin-2 href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>, and false otherwise.<li>Let <var>script</var> be the result of <a href=#creating-a-classic-script id=fetching-scripts:creating-a-classic-script>creating a classic script</a> given <var>sourceText</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url data-x-internal=concept-response-url>URL</a>, <var>options</var>, <var>mutedErrors</var>, and <var>url</var>.<li>Run <var>onComplete</var> given <var>script</var>.</ol> </ol> To <dfn id=fetch-a-classic-worker-script data-export="">fetch a classic worker script</dfn> given a <a id=fetching-scripts:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-4>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination data-x-internal=concept-request-destination>destination</a> <var>destination</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-5>environment settings object</a> <var>settingsObject</var>, an algorithm <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-3>perform the fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#classic-script id=fetching-scripts:classic-script-6>classic script</a> (on success). <ol><li>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-6 data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client-2 data-x-internal=concept-request-client>client</a> is <var>fetchClient</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-2 data-x-internal=concept-request-destination>destination</a> is <var>destination</var>, <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type-2 data-x-internal=concept-request-initiator-type>initiator type</a> is "<code>other</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=fetching-scripts:concept-request-mode data-x-internal=concept-request-mode>mode</a> is "<code>same-origin</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=fetching-scripts:concept-request-credentials-mode-3 data-x-internal=concept-request-credentials-mode>credentials mode</a> is "<code>same-origin</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-4 data-x-internal=concept-request-parser-metadata>parser metadata</a> is "<code>not parser-inserted</code>", and whose <a id=fetching-scripts:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a> is set.<li> If <var>performFetch</var> was given, run <var>performFetch</var> with <var>request</var>, true, and with <var>processResponseConsumeBody</var> as defined below. Otherwise, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-5 data-x-internal=concept-fetch>fetch</a> <var>request</var> with <a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a> set to <var>processResponseConsumeBody</var> as defined below. In both cases, let <var>processResponseConsumeBody</var> given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-8 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a <a id=fetching-scripts:byte-sequence-3 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var> be the following algorithm: <ol><li>Set <var>response</var> to <var>response</var>'s <a id=fetching-scripts:unsafe-response-2 href=urls-and-fetching.html#unsafe-response>unsafe response</a>.<li> If any of the following are true: <ul><li><var>bodyBytes</var> is null or failure; or<li><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status-2 data-x-internal=concept-response-status>status</a> is not an <a id=fetching-scripts:ok-status-2 href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>,</ul> then run <var>onComplete</var> given null, and abort these steps. <li> If all of the following are true: <ul><li><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-2 data-x-internal=concept-response-url>URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=fetching-scripts:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is an <a id=fetching-scripts:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S) scheme</a>; and<li>the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type-2 data-x-internal=extract-a-mime-type>extracting a MIME type</a> from <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list-2 data-x-internal=concept-response-header-list>header list</a> is not a <a id=fetching-scripts:javascript-mime-type href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a>, </ul> then run <var>onComplete</var> given null, and abort these steps. Other <a href=https://fetch.spec.whatwg.org/#fetch-scheme id=fetching-scripts:fetch-scheme data-x-internal=fetch-scheme>fetch schemes</a> are exempted from MIME type checking for historical web-compatibility reasons. We might be able to tighten this in the future; see <a href=https://github.com/whatwg/html/issues/3255>issue #3255</a>. <li>Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#utf-8-decode id=fetching-scripts:utf-8-decode data-x-internal=utf-8-decode>UTF-8 decoding</a> <var>bodyBytes</var>.<li>Let <var>script</var> be the result of <a href=#creating-a-classic-script id=fetching-scripts:creating-a-classic-script-2>creating a classic script</a> using <var>sourceText</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-3 data-x-internal=concept-response-url>URL</a>, and the <a href=#default-script-fetch-options id=fetching-scripts:default-script-fetch-options>default script fetch options</a>.<li>Run <var>onComplete</var> given <var>script</var>.</ol> </ol> To <dfn id=fetch-a-classic-worker-imported-script data-export="">fetch a classic worker-imported script</dfn> given a <a id=fetching-scripts:url-5 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-6>environment settings object</a> <var>settingsObject</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-4>perform the fetch hook</a> <var>performFetch</var>, run these steps. The algorithm will return a <a href=#classic-script id=fetching-scripts:classic-script-7>classic script</a> on success, or throw an exception on failure. <ol><li>Let <var>response</var> be null.<li>Let <var>bodyBytes</var> be null.<li>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-7 data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-2 data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client-3 data-x-internal=concept-request-client>client</a> is <var>settingsObject</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-3 data-x-internal=concept-request-destination>destination</a> is "<code>script</code>", <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type-3 data-x-internal=concept-request-initiator-type>initiator type</a> is "<code>other</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-parser-metadata id=fetching-scripts:concept-request-parser-metadata-5 data-x-internal=concept-request-parser-metadata>parser metadata</a> is "<code>not parser-inserted</code>", and whose <a id=fetching-scripts:use-url-credentials-flag-2 href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a> is set.<li> If <var>performFetch</var> was given, run <var>performFetch</var> with <var>request</var>, <var>isTopLevel</var>, and with <var>processResponseConsumeBody</var> as defined below. Otherwise, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-6 data-x-internal=concept-fetch>fetch</a> <var>request</var> with <a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a> set to <var>processResponseConsumeBody</var> as defined below. In both cases, let <var>processResponseConsumeBody</var> given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-9 data-x-internal=concept-response>response</a> <var>res</var> and null, failure, or a <a id=fetching-scripts:byte-sequence-4 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bb</var> be the following algorithm: <ol><li>Set <var>bodyBytes</var> to <var>bb</var>.<li>Set <var>response</var> to <var>res</var>.</ol> <li> <a href=#pause id=fetching-scripts:pause>Pause</a> until <var>response</var> is not null. Unlike other algorithms in this section, the fetching process is synchronous here. <li>Set <var>response</var> to <var>response</var>'s <a id=fetching-scripts:unsafe-response-3 href=urls-and-fetching.html#unsafe-response>unsafe response</a>.<li> If any of the following are true: <ul><li><var>bodyBytes</var> is null or failure;<li><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status-3 data-x-internal=concept-response-status>status</a> is not an <a id=fetching-scripts:ok-status-3 href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>; or<li>the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type-3 data-x-internal=extract-a-mime-type>extracting a MIME type</a> from <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list-3 data-x-internal=concept-response-header-list>header list</a> is not a <a id=fetching-scripts:javascript-mime-type-2 href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a>, </ul> then throw a <a id=fetching-scripts:networkerror href=https://webidl.spec.whatwg.org/#networkerror data-x-internal=networkerror>"<code>NetworkError</code>"</a> <code id=fetching-scripts:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>. <li>Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#utf-8-decode id=fetching-scripts:utf-8-decode-2 data-x-internal=utf-8-decode>UTF-8 decoding</a> <var>bodyBytes</var>.<li>Let <var>mutedErrors</var> be true if <var>response</var> was <a id=fetching-scripts:cors-cross-origin-3 href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>, and false otherwise.<li>Let <var>script</var> be the result of <a href=#creating-a-classic-script id=fetching-scripts:creating-a-classic-script-3>creating a classic script</a> given <var>sourceText</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-4 data-x-internal=concept-response-url>URL</a>, the <a href=#default-script-fetch-options id=fetching-scripts:default-script-fetch-options-2>default script fetch options</a>, and <var>mutedErrors</var>.<li>Return <var>script</var>.</ol> To <dfn id=fetch-a-module-script-tree data-export="">fetch an external module script graph</dfn> given a <a id=fetching-scripts:url-6 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-7>environment settings object</a> <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-5>script fetch options</a> <var>options</var>, and an algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-6>module script</a> (on success). <ol><li> <a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script>Fetch a single module script</a> given <var>url</var>, <var>settingsObject</var>, "<code>script</code>", <var>options</var>, <var>settingsObject</var>, "<code>client</code>", true, and with the following steps given <var>result</var>: <ol><li>If <var>result</var> is null, run <var>onComplete</var> given null, and abort these steps.<li><a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script>Fetch the descendants of and link</a> <var>result</var> given <var>settingsObject</var>, "<code>script</code>", and <var>onComplete</var>.</ol> </ol> To <dfn id=fetch-a-modulepreload-module-script-graph>fetch a modulepreload module script graph</dfn> given a <a id=fetching-scripts:url-7 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-4 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-8>environment settings object</a> <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-6>script fetch options</a> <var>options</var>, and an algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-7>module script</a> (on success). <ol><li> <a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script-2>Fetch a single module script</a> given <var>url</var>, <var>settingsObject</var>, <var>destination</var>, <var>options</var>, <var>settingsObject</var>, "<code>client</code>", true, and with the following steps given <var>result</var>: <ol><li>Run <var>onComplete</var> given <var>result</var>.<li><a id=fetching-scripts:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>settingsObject</var>'s <a href=#concept-settings-object-global id=fetching-scripts:concept-settings-object-global-2>global object</a> implements <code id=fetching-scripts:window><a href=nav-history-apis.html#window>Window</a></code>.<li> If <var>result</var> is not null, optionally <a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-2>fetch the descendants of and link</a> <var>result</var> given <var>settingsObject</var>, <var>destination</var>, and an empty algorithm. Generally, performing this step will be beneficial for performance, as it allows pre-loading the modules that will invariably be requested later, via algorithms such as <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree-2>fetch an external module script graph</a> that fetch the entire graph. However, user agents might wish to skip them in bandwidth-constrained situations, or situations where the relevant fetches are already in flight. </ol> </ol> To <dfn id=fetch-an-inline-module-script-graph>fetch an inline module script graph</dfn> given a <a id=fetching-scripts:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>sourceText</var>, a <a id=fetching-scripts:url-8 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-9>environment settings object</a> <var>settingsObject</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-7>script fetch options</a> <var>options</var>, and an algorithm <var>onComplete</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-8>module script</a> (on success). <ol><li>Let <var>script</var> be the result of <a href=#creating-a-javascript-module-script id=fetching-scripts:creating-a-javascript-module-script>creating a JavaScript module script</a> using <var>sourceText</var>, <var>settingsObject</var>, <var>baseURL</var>, and <var>options</var>.<li><a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-3>Fetch the descendants of and link</a> <var>script</var>, given <var>settingsObject</var>, "<code>script</code>", and <var>onComplete</var>.</ol> To <dfn id=fetch-a-module-worker-script-tree data-export="">fetch a module worker script graph</dfn> given a <a id=fetching-scripts:url-9 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-10>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-5 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-3>credentials mode</a> <var>credentialsMode</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-11>environment settings object</a> <var>settingsObject</var>, and an algorithm <var>onComplete</var>, <a href=#fetch-a-worklet/module-worker-script-graph id=fetching-scripts:fetch-a-worklet/module-worker-script-graph>fetch a worklet/module worker script graph</a> given <var>url</var>, <var>fetchClient</var>, <var>destination</var>, <var>credentialsMode</var>, <var>settingsObject</var>, and <var>onComplete</var>. To <dfn id=fetch-a-worklet-script-graph>fetch a worklet script graph</dfn> given a <a id=fetching-scripts:url-10 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-12>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-6 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-4>credentials mode</a> <var>credentialsMode</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-13>environment settings object</a> <var>settingsObject</var>, a <a href=worklets.html#concept-worklet-module-responses-map id=fetching-scripts:concept-worklet-module-responses-map>module responses map</a> <var>moduleResponsesMap</var>, and an algorithm <var>onComplete</var>, <a href=#fetch-a-worklet/module-worker-script-graph id=fetching-scripts:fetch-a-worklet/module-worker-script-graph-2>fetch a worklet/module worker script graph</a> given <var>url</var>, <var>fetchClient</var>, <var>destination</var>, <var>credentialsMode</var>, <var>settingsObject</var>, <var>onComplete</var>, and the following <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-5>perform the fetch hook</a> given <var>request</var> and <a href=#fetching-scripts-processcustomfetchresponse>processCustomFetchResponse</a>: <ol><li>Let <var>requestURL</var> be <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-3 data-x-internal=concept-request-url>URL</a>.<li>If <var>moduleResponsesMap</var>[<var>requestURL</var>] is "<code>fetching</code>", wait <a id=fetching-scripts:in-parallel href=infrastructure.html#in-parallel>in parallel</a> until that entry's value changes, then <a href=#queue-a-task id=fetching-scripts:queue-a-task>queue a task</a> on the <a href=#networking-task-source id=fetching-scripts:networking-task-source>networking task source</a> to proceed with running the following steps.<li> If <var>moduleResponsesMap</var>[<var>requestURL</var>] <a href=https://infra.spec.whatwg.org/#map-exists id=fetching-scripts:map-exists-2 data-x-internal=map-exists>exists</a>, then: <ol><li>Let <var>cached</var> be <var>moduleResponsesMap</var>[<var>requestURL</var>].<li>Run <var>processCustomFetchResponse</var> with <var>cached</var>[0] and <var>cached</var>[1].<li>Return.</ol> <li><a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set data-x-internal=map-set>Set</a> <var>moduleResponsesMap</var>[<var>requestURL</var>] to "<code>fetching</code>".<li> <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-7 data-x-internal=concept-fetch>Fetch</a> <var>request</var>, with <a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a> set to the following steps given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-10 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a <a id=fetching-scripts:byte-sequence-5 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>: <ol><li>Set <var>moduleResponsesMap</var>[<var>requestURL</var>] to (<var>response</var>, <var>bodyBytes</var>).<li>Run <var>processCustomFetchResponse</var> with <var>response</var> and <var>bodyBytes</var>.</ol> </ol> <hr> The following algorithms are meant for internal use by this specification only as part of <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree-3>fetching an external module script graph</a> or other similar concepts above, and should not be used directly by other specifications. This diagram illustrates how these algorithms relate to the ones above, as well as to each other: <svg viewBox="0 0 941 166" id=module-script-fetching-diagram aria-label="Fetch an external module script, fetch a modulepreload module script graph, fetch an inline module script graph, and fetch a module worker script graph all call fetch the descendants of and link a module script." role=img> <defs> <marker markerHeight=6 id=module-script-fetching-diagram-arrow orient=auto markerWidth=6 refX=5 refY=3> <path d="M0,0 V6 L5,3 Z" style="fill: var(--text, CanvasText)"></path> </marker> </defs> <g transform=translate(0.5,0.5) class=caller> <rect width=180 height=50></rect> <foreignObject width=180 height=50> <a href=#fetch-a-module-script-tree id=fetching-scripts:fetch-a-module-script-tree-4 xmlns=http://www.w3.org/1999/xhtml>fetch an external module script graph</a> </foreignObject> </g> <path d="M90.5,50.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path> <g transform=translate(190.5,0.5) class=caller> <rect width=180 height=50></rect> <foreignObject width=180 height=50> <a href=#fetch-a-modulepreload-module-script-graph id=fetching-scripts:fetch-a-modulepreload-module-script-graph xmlns=http://www.w3.org/1999/xhtml>fetch a modulepreload module script graph</a> </foreignObject> </g> <path d="M280.5,50.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path> <g transform=translate(380.5,0.5) class=caller> <rect width=180 height=50></rect> <foreignObject width=180 height=50> <a href=#fetch-an-inline-module-script-graph id=fetching-scripts:fetch-an-inline-module-script-graph xmlns=http://www.w3.org/1999/xhtml>fetch an inline module script graph</a> </foreignObject> </g> <path d="M470.5,50.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path> <g transform=translate(570.5,0.5) class=caller> <rect width=180 height=50></rect> <foreignObject width=180 height=50> <a href=#fetch-a-module-worker-script-tree id=fetching-scripts:fetch-a-module-worker-script-tree-2 xmlns=http://www.w3.org/1999/xhtml>fetch a module worker script graph</a> </foreignObject> </g> <path d="M660.5,50.5 L755.5,70.5" marker-end=url(#module-script-fetching-diagram-arrow)></path> <g transform=translate(760.5,0.5) class=caller> <rect width=180 height=50></rect> <foreignObject width=180 height=50> <a href=#fetch-a-worklet-script-graph id=fetching-scripts:fetch-a-worklet-script-graph xmlns=http://www.w3.org/1999/xhtml>fetch a worklet script graph</a> </foreignObject> </g> <path d="M850.5,50.5 L755.5,70.5" marker-end=url(#module-script-fetching-diagram-arrow)></path> <g transform=translate(665.5,70.5) class=caller> <rect width=180 height=50></rect> <foreignObject width=180 height=50> <a href=#fetch-a-worklet/module-worker-script-graph id=fetching-scripts:fetch-a-worklet/module-worker-script-graph-3 xmlns=http://www.w3.org/1999/xhtml>fetch a worklet/module worker script graph</a> </foreignObject> </g> <path d="M755.5,120.5 L470.5,140.5" marker-end=url(#module-script-fetching-diagram-arrow)></path> <g transform=translate(260.5,140.5) class=subalgorithm> <rect width=420 height=25></rect> <foreignObject width=420 height=25> <a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-4 xmlns=http://www.w3.org/1999/xhtml>fetch the descendants of and link a module script</a> </foreignObject> </g> </svg> To <dfn id=fetch-a-worklet/module-worker-script-graph>fetch a worklet/module worker script graph</dfn> given a <a id=fetching-scripts:url-11 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-14>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-7 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-5>credentials mode</a> <var>credentialsMode</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-15>environment settings object</a> <var>settingsObject</var>, an algorithm <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-6>perform the fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-9>module script</a> (on success). <ol><li>Let <var>options</var> be a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-8>script fetch options</a> whose <a href=#concept-script-fetch-options-nonce id=fetching-scripts:concept-script-fetch-options-nonce-4>cryptographic nonce</a> is the empty string, <a href=#concept-script-fetch-options-integrity id=fetching-scripts:concept-script-fetch-options-integrity-5>integrity metadata</a> is the empty string, <a href=#concept-script-fetch-options-parser id=fetching-scripts:concept-script-fetch-options-parser-4>parser metadata</a> is "<code>not-parser-inserted</code>", <a href=#concept-script-fetch-options-credentials id=fetching-scripts:concept-script-fetch-options-credentials-6>credentials mode</a> is <var>credentialsMode</var>, <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-4>referrer policy</a> is the empty string, and <a href=#concept-script-fetch-options-fetch-priority id=fetching-scripts:concept-script-fetch-options-fetch-priority-5>fetch priority</a> is "<code>auto</code>". <li> <a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script-3>Fetch a single module script</a> given <var>url</var>, <var>fetchClient</var>, <var>destination</var>, <var>options</var>, <var>settingsObject</var>, "<code>client</code>", true, and <var>onSingleFetchComplete</var> as defined below. If <var>performFetch</var> was given, pass it along as well. <var>onSingleFetchComplete</var> given <var>result</var> is the following algorithm: <ol><li>If <var>result</var> is null, run <var>onComplete</var> given null, and abort these steps.<li><a href=#fetch-the-descendants-of-and-link-a-module-script id=fetching-scripts:fetch-the-descendants-of-and-link-a-module-script-5>Fetch the descendants of and link</a> <var>result</var> given <var>fetchClient</var>, <var>destination</var>, and <var>onComplete</var>. If <var>performFetch</var> was given, pass it along as well.</ol> </ol> To <dfn id=fetch-the-descendants-of-and-link-a-module-script>fetch the descendants of and link</dfn> a <a href=#module-script id=fetching-scripts:module-script-10>module script</a> <var>moduleScript</var>, given an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-16>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-8 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, an algorithm <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-7>perform the fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-11>module script</a> (on success). <ol><li>Let <var>record</var> be <var>moduleScript</var>'s <a href=#concept-script-record id=fetching-scripts:concept-script-record>record</a>.<li> If <var>record</var> is null, then: <ol><li>Set <var>moduleScript</var>'s <a href=#concept-script-error-to-rethrow id=fetching-scripts:concept-script-error-to-rethrow>error to rethrow</a> to <var>moduleScript</var>'s <a id=fetching-scripts:parse-errors href=parsing.html#parse-errors>parse error</a>.<li>Run <var>onComplete</var> given <var>moduleScript</var>.<li>Return.</ol> <li>Let <var>state</var> be <a id=fetching-scripts:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> { [[ParseError]]: null, [[Destination]]: <var>destination</var>, [[PerformFetch]]: null, [[FetchClient]]: <var>fetchClient</var> }.<li>If <var>performFetch</var> was given, set <var>state</var>.[[PerformFetch]] to <var>performFetch</var>.<li> Let <var>loadingPromise</var> be <var>record</var>.<a href=https://tc39.es/ecma262/#sec-LoadRequestedModules id=fetching-scripts:js-loadrequestedmodules data-x-internal=js-loadrequestedmodules>LoadRequestedModules</a>(<var>state</var>). This step will recursively load all the module transitive dependencies. <li> <a id=fetching-scripts:upon-fulfillment href=https://webidl.spec.whatwg.org/#upon-fulfillment data-x-internal=upon-fulfillment>Upon fulfillment</a> of <var>loadingPromise</var>, run the following steps: <ol><li> Perform <var>record</var>.<a href=https://tc39.es/ecma262/#sec-moduledeclarationlinking id=fetching-scripts:js-link data-x-internal=js-link>Link</a>(). This step will recursively call <a href=https://tc39.es/ecma262/#sec-moduledeclarationlinking id=fetching-scripts:js-link-2 data-x-internal=js-link>Link</a> on all of the module's unlinked dependencies. If this throws an exception, catch it, and set <var>moduleScript</var>'s <a href=#concept-script-error-to-rethrow id=fetching-scripts:concept-script-error-to-rethrow-2>error to rethrow</a> to that exception. <li>Run <var>onComplete</var> given <var>moduleScript</var>.</ol> <li> <a id=fetching-scripts:upon-rejection href=https://webidl.spec.whatwg.org/#upon-rejection data-x-internal=upon-rejection>Upon rejection</a> of <var>loadingPromise</var>, run the following steps: <ol><li>If <var>state</var>.[[ParseError]] is not null, set <var>moduleScript</var>'s <a href=#concept-script-error-to-rethrow id=fetching-scripts:concept-script-error-to-rethrow-3>error to rethrow</a> to <var>state</var>.[[ParseError]] and run <var>onComplete</var> given <var>moduleScript</var>.<li> Otherwise, run <var>onComplete</var> given null. <var>state</var>.[[ParseError]] is null when <var>loadingPromise</var> is rejected due to a loading error. </ol> </ol> To <dfn id=fetch-a-single-module-script>fetch a single module script</dfn>, given a <a id=fetching-scripts:url-12 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-17>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-9 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-9>script fetch options</a> <var>options</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-18>environment settings object</a> <var>settingsObject</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-referrer id=fetching-scripts:concept-request-referrer data-x-internal=concept-request-referrer>referrer</a> <var>referrer</var>, an optional <a id=fetching-scripts:modulerequest-record href=https://tc39.es/proposal-import-attributes/#sec-modulerequest-record data-x-internal=modulerequest-record>ModuleRequest Record</a> <var>moduleRequest</var>, a boolean <var id=fetching-scripts:fetching-scripts-is-top-level-2><a href=#fetching-scripts-is-top-level>isTopLevel</a></var>, an algorithm <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-8>perform the fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-12>module script</a> (on success). <ol><li>Let <var>moduleType</var> be "<code>javascript-or-wasm</code>".<li>If <var>moduleRequest</var> was given, then set <var>moduleType</var> to the result of running the <a href=#module-type-from-module-request id=fetching-scripts:module-type-from-module-request>module type from module request</a> steps given <var>moduleRequest</var>.<li><a id=fetching-scripts:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: the result of running the <a href=#module-type-allowed id=fetching-scripts:module-type-allowed>module type allowed</a> steps given <var>moduleType</var> and <var>settingsObject</var> is true. Otherwise, we would not have reached this point because a failure would have been raised when inspecting <var>moduleRequest</var>.[[Attributes]] in <a href=#validate-requested-module-specifiers> HostLoadImportedModule</a> or <a href=#fetch-a-single-imported-module-script id=fetching-scripts:fetch-a-single-imported-module-script>fetch a single imported module script</a>.<li>Let <var>moduleMap</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-module-map id=fetching-scripts:concept-settings-object-module-map>module map</a>.<li>If <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)] is "<code>fetching</code>", wait <a id=fetching-scripts:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a> until that entry's value changes, then <a href=#queue-a-task id=fetching-scripts:queue-a-task-2>queue a task</a> on the <a href=#networking-task-source id=fetching-scripts:networking-task-source-2>networking task source</a> to proceed with running the following steps.<li>If <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)] <a href=https://infra.spec.whatwg.org/#map-exists id=fetching-scripts:map-exists-3 data-x-internal=map-exists>exists</a>, run <var>onComplete</var> given <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)], and return.<li><a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set-2 data-x-internal=map-set>Set</a> <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)] to "<code>fetching</code>".<li>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=fetching-scripts:concept-request-8 data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-4 data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=fetching-scripts:concept-request-mode-2 data-x-internal=concept-request-mode>mode</a> is "<code>cors</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-referrer id=fetching-scripts:concept-request-referrer-2 data-x-internal=concept-request-referrer>referrer</a> is <var>referrer</var>, and <a href=https://fetch.spec.whatwg.org/#concept-request-client id=fetching-scripts:concept-request-client-4 data-x-internal=concept-request-client>client</a> is <var>fetchClient</var>.<li>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-10 data-x-internal=concept-request-destination>destination</a> to the result of running the <a href=#fetch-destination-from-module-type id=fetching-scripts:fetch-destination-from-module-type>fetch destination from module type</a> steps given <var>destination</var> and <var>moduleType</var>.<li>If <var>destination</var> is "<code>worker</code>", "<code>sharedworker</code>", or "<code>serviceworker</code>", and <var>isTopLevel</var> is true, then set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=fetching-scripts:concept-request-mode-3 data-x-internal=concept-request-mode>mode</a> to "<code>same-origin</code>".<li>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=fetching-scripts:concept-request-initiator-type-4 data-x-internal=concept-request-initiator-type>initiator type</a> to "<code>script</code>". <li><a href=#set-up-the-module-script-request id=fetching-scripts:set-up-the-module-script-request>Set up the module script request</a> given <var>request</var> and <var>options</var>.<li> If <var>performFetch</var> was given, run <var>performFetch</var> with <var>request</var>, <var>isTopLevel</var>, and with <var>processResponseConsumeBody</var> as defined below. Otherwise, <a href=https://fetch.spec.whatwg.org/#concept-fetch id=fetching-scripts:concept-fetch-8 data-x-internal=concept-fetch>fetch</a> <var>request</var> with <a data-x-internal=processresponseconsumebody href=https://fetch.spec.whatwg.org/#process-response-end-of-body>processResponseConsumeBody</a> set to <var>processResponseConsumeBody</var> as defined below. In both cases, let <var>processResponseConsumeBody</var> given <a href=https://fetch.spec.whatwg.org/#concept-response id=fetching-scripts:concept-response-11 data-x-internal=concept-response>response</a> <var>response</var> and null, failure, or a <a id=fetching-scripts:byte-sequence-6 href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var> be the following algorithm: <var>response</var> is always <a id=fetching-scripts:cors-same-origin-2 href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a>. <ol><li> If any of the following are true: <ul><li><var>bodyBytes</var> is null or failure; or<li><var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=fetching-scripts:concept-response-status-4 data-x-internal=concept-response-status>status</a> is not an <a id=fetching-scripts:ok-status-4 href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>,</ul> then <a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set-3 data-x-internal=map-set>set</a> <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)] to null, run <var>onComplete</var> given null, and abort these steps. <li>Let <var>mimeType</var> be the result of <a href=https://fetch.spec.whatwg.org/#concept-header-extract-mime-type id=fetching-scripts:extract-a-mime-type-4 data-x-internal=extract-a-mime-type>extracting a MIME type</a> from <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-header-list id=fetching-scripts:concept-response-header-list-4 data-x-internal=concept-response-header-list>header list</a>.<li>Let <var>moduleScript</var> be null.<li>Let <var>referrerPolicy</var> be the result of <a href=https://w3c.github.io/webappsec-referrer-policy/#parse-referrer-policy-from-header id=fetching-scripts:parse-referrer-policy-header-2 data-x-internal=parse-referrer-policy-header>parsing the `<code>Referrer-Policy</code>` header</a> given <var>response</var>. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a><li>If <var>referrerPolicy</var> is not the empty string, set <var>options</var>'s <a href=#concept-script-fetch-options-referrer-policy id=fetching-scripts:concept-script-fetch-options-referrer-policy-5>referrer policy</a> to <var>referrerPolicy</var>.<li>If <var>mimeType</var>'s <a href=https://mimesniff.spec.whatwg.org/#mime-type-essence id=fetching-scripts:mime-type-essence-2 data-x-internal=mime-type-essence>essence</a> is "<code id=fetching-scripts:application/wasm><a href=indices.html#application/wasm>application/wasm</a></code>" and <var>moduleType</var> is "<code>javascript-or-wasm</code>", then set <var>moduleScript</var> to the result of <a href=#creating-a-webassembly-module-script id=fetching-scripts:creating-a-webassembly-module-script>creating a WebAssembly module script</a> given <var>bodyBytes</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-5 data-x-internal=concept-response-url>URL</a>, and <var>options</var>.<li> Otherwise: <ol><li>Let <var>sourceText</var> be the result of <a href=https://encoding.spec.whatwg.org/#utf-8-decode id=fetching-scripts:utf-8-decode-3 data-x-internal=utf-8-decode>UTF-8 decoding</a> <var>bodyBytes</var>.<li>If <var>mimeType</var> is a <a id=fetching-scripts:javascript-mime-type-3 href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a> and <var>moduleType</var> is "<code>javascript-or-wasm</code>", then set <var>moduleScript</var> to the result of <a href=#creating-a-javascript-module-script id=fetching-scripts:creating-a-javascript-module-script-2>creating a JavaScript module script</a> given <var>sourceText</var>, <var>settingsObject</var>, <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-6 data-x-internal=concept-response-url>URL</a>, and <var>options</var>.<li>If the <a id=fetching-scripts:mime-type-essence-3 href=https://mimesniff.spec.whatwg.org/#mime-type-essence data-x-internal=mime-type-essence>MIME type essence</a> of <var>mimeType</var> is "<code id=fetching-scripts:text/css><a href=indices.html#text/css>text/css</a></code>" and <var>moduleType</var> is "<code>css</code>", then set <var>moduleScript</var> to the result of <a href=#creating-a-css-module-script id=fetching-scripts:creating-a-css-module-script>creating a CSS module script</a> given <var>sourceText</var> and <var>settingsObject</var>.<li>If <var>mimeType</var> is a <a id=fetching-scripts:json-mime-type href=https://mimesniff.spec.whatwg.org/#json-mime-type data-x-internal=json-mime-type>JSON MIME type</a> and <var>moduleType</var> is "<code>json</code>", then set <var>moduleScript</var> to the result of <a href=#creating-a-json-module-script id=fetching-scripts:creating-a-json-module-script>creating a JSON module script</a> given <var>sourceText</var> and <var>settingsObject</var>.</ol> <li> <a href=https://infra.spec.whatwg.org/#map-set id=fetching-scripts:map-set-4 data-x-internal=map-set>Set</a> <var>moduleMap</var>[(<var>url</var>, <var>moduleType</var>)] to <var>moduleScript</var>, and run <var>onComplete</var> given <var>moduleScript</var>. It is intentional that the <a href=#module-map id=fetching-scripts:module-map>module map</a> is keyed by the <a href=https://fetch.spec.whatwg.org/#concept-request-url id=fetching-scripts:concept-request-url-5 data-x-internal=concept-request-url>request URL</a>, whereas the <a href=#concept-script-base-url id=fetching-scripts:concept-script-base-url>base URL</a> for the <a href=#module-script id=fetching-scripts:module-script-13>module script</a> is set to the <a href=https://fetch.spec.whatwg.org/#concept-response-url id=fetching-scripts:concept-response-url-7 data-x-internal=concept-response-url>response URL</a>. The former is used to deduplicate fetches, while the latter is used for URL resolution. </ol> </ol> To <dfn id=fetch-a-single-imported-module-script>fetch a single imported module script</dfn>, given a <a id=fetching-scripts:url-13 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, an <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-19>environment settings object</a> <var>fetchClient</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=fetching-scripts:concept-request-destination-11 data-x-internal=concept-request-destination>destination</a> <var>destination</var>, a <a href=#script-fetch-options id=fetching-scripts:script-fetch-options-10>script fetch options</a> <var>options</var>, <a href=#environment-settings-object id=fetching-scripts:environment-settings-object-20>environment settings object</a> <var>settingsObject</var>, a <a href=https://fetch.spec.whatwg.org/#concept-request-referrer id=fetching-scripts:concept-request-referrer-3 data-x-internal=concept-request-referrer>referrer</a> <var>referrer</var>, a <a id=fetching-scripts:modulerequest-record-2 href=https://tc39.es/proposal-import-attributes/#sec-modulerequest-record data-x-internal=modulerequest-record>ModuleRequest Record</a> <var>moduleRequest</var>, an algorithm <var>onComplete</var>, and an optional <a href=#fetching-scripts-perform-fetch id=fetching-scripts:fetching-scripts-perform-fetch-9>perform the fetch hook</a> <var>performFetch</var>, run these steps. <var>onComplete</var> must be an algorithm accepting null (on failure) or a <a href=#module-script id=fetching-scripts:module-script-14>module script</a> (on success). <ol><li><a id=fetching-scripts:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>moduleRequest</var>.[[Attributes]] does not contain any <a id=fetching-scripts:record-2 href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> <var>entry</var> such that <var>entry</var>.[[Key]] is not "<code>type</code>", because we only asked for "<code>type</code>" attributes in <a href=#hostgetsupportedimportattributes id=fetching-scripts:hostgetsupportedimportattributes>HostGetSupportedImportAttributes</a>.<li>Let <var>moduleType</var> be the result of running the <a href=#module-type-from-module-request id=fetching-scripts:module-type-from-module-request-2>module type from module request</a> steps given <var>moduleRequest</var>.<li>If the result of running the <a href=#module-type-allowed id=fetching-scripts:module-type-allowed-2>module type allowed</a> steps given <var>moduleType</var> and <var>settingsObject</var> is false, then run <var>onComplete</var> given null, and return.<li><a href=#fetch-a-single-module-script id=fetching-scripts:fetch-a-single-module-script-4>Fetch a single module script</a> given <var>url</var>, <var>fetchClient</var>, <var>destination</var>, <var>options</var>, <var>settingsObject</var>, <var>referrer</var>, <var>moduleRequest</var>, false, and <var>onComplete</var>. If <var>performFetch</var> was given, pass it along as well.</ol> <h5 id=creating-scripts>8.1.4.3 Creating scripts<a href=#creating-scripts class=self-link></a></h5> To <dfn id=creating-a-classic-script>create a classic script</dfn>, given a <a id=creating-scripts:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>source</var>, an <a href=#environment-settings-object id=creating-scripts:environment-settings-object>environment settings object</a> <var>settings</var>, a <a id=creating-scripts:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, a <a href=#script-fetch-options id=creating-scripts:script-fetch-options>script fetch options</a> <var>options</var>, an optional boolean <var>mutedErrors</var> (default false), and an optional <a id=creating-scripts:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null <var>sourceURLForWindowScripts</var> (default null): <ol><li> If <var>mutedErrors</var> is true, then set <var>baseURL</var> to <code id=creating-scripts:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code>. When <var>mutedErrors</var> is true, <var>baseURL</var> is the script's <a id=creating-scripts:cors-cross-origin href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a> <a href=https://fetch.spec.whatwg.org/#concept-response id=creating-scripts:concept-response data-x-internal=concept-response>response</a>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=creating-scripts:concept-response-url data-x-internal=concept-response-url>url</a>, which shouldn't be exposed to JavaScript. Therefore, <var>baseURL</var> is sanitized here. <li>If <a href=#concept-environment-noscript id=creating-scripts:concept-environment-noscript>scripting is disabled</a> for <var>settings</var>, then set <var>source</var> to the empty string.<li>Let <var>script</var> be a new <a href=#classic-script id=creating-scripts:classic-script>classic script</a> that this algorithm will subsequently initialize.<li>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object>settings object</a> to <var>settings</var>.<li>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url>base URL</a> to <var>baseURL</var>.<li>Set <var>script</var>'s <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options>fetch options</a> to <var>options</var>.<li>Set <var>script</var>'s <a href=#muted-errors id=creating-scripts:muted-errors>muted errors</a> to <var>mutedErrors</var>.<li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error>parse error</a> and <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow>error to rethrow</a> to null.<li><a id=creating-scripts:record-classic-script-creation-time href=https://w3c.github.io/long-animation-frames/#record-classic-script-creation-time data-x-internal=record-classic-script-creation-time>Record classic script creation time</a> given <var>script</var> and <var>sourceURLForWindowScripts</var>.<li> Let <var>result</var> be <a href=https://tc39.es/ecma262/#sec-parse-script id=creating-scripts:js-parsescript data-x-internal=js-parsescript>ParseScript</a>(<var>source</var>, <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm">realm</a>, <var>script</var>). Passing <var>script</var> as the last parameter here ensures <var>result</var>.[[HostDefined]] will be <var>script</var>. <li> If <var>result</var> is a <a id=creating-scripts:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of errors, then: <ol><li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-2>parse error</a> and its <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-2>error to rethrow</a> to <var>result</var>[0].<li>Return <var>script</var>.</ol> <li>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record>record</a> to <var>result</var>.<li>Return <var>script</var>.</ol> To <dfn id=creating-a-javascript-module-script>create a JavaScript module script</dfn>, given a <a id=creating-scripts:string-2 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>source</var>, an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-2>environment settings object</a> <var>settings</var>, a <a id=creating-scripts:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, and a <a href=#script-fetch-options id=creating-scripts:script-fetch-options-2>script fetch options</a> <var>options</var>: <ol><li>If <a href=#concept-environment-noscript id=creating-scripts:concept-environment-noscript-2>scripting is disabled</a> for <var>settings</var>, then set <var>source</var> to the empty string.<li>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script>module script</a> that this algorithm will subsequently initialize.<li>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-2>settings object</a> to <var>settings</var>.<li>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-2>base URL</a> to <var>baseURL</var>.<li>Set <var>script</var>'s <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-2>fetch options</a> to <var>options</var>.<li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-3>parse error</a> and <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-3>error to rethrow</a> to null.<li> Let <var>result</var> be <a href=https://tc39.es/ecma262/#sec-parsemodule id=creating-scripts:js-parsemodule data-x-internal=js-parsemodule>ParseModule</a>(<var>source</var>, <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm-2">realm</a>, <var>script</var>). Passing <var>script</var> as the last parameter here ensures <var>result</var>.[[HostDefined]] will be <var>script</var>. <li> If <var>result</var> is a <a id=creating-scripts:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of errors, then: <ol><li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-4>parse error</a> to <var>result</var>[0].<li>Return <var>script</var>.</ol> <li>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-2>record</a> to <var>result</var>.<li>Return <var>script</var>.</ol> To <dfn id=creating-a-webassembly-module-script>create a WebAssembly module script</dfn>, given a <a id=creating-scripts:byte-sequence href=https://infra.spec.whatwg.org/#byte-sequence data-x-internal=byte-sequence>byte sequence</a> <var>bodyBytes</var>, an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-3>environment settings object</a> <var>settings</var>, a <a id=creating-scripts:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>, and a <a href=#script-fetch-options id=creating-scripts:script-fetch-options-3>script fetch options</a> <var>options</var>: <ol><li> If <a href=#concept-environment-noscript id=creating-scripts:concept-environment-noscript-3>scripting is disabled</a> for <var>settings</var>, then set <var>bodyBytes</var> to the byte sequence 0x00 0x61 0x73 0x6d 0x01 0x00 0x00 0x00. This byte sequence corresponds to an empty WebAssembly module with only the magic bytes and version number provided. <li>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script-2>module script</a> that this algorithm will subsequently initialize.<li>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-3>settings object</a> to <var>settings</var>.<li>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-3>base URL</a> to <var>baseURL</var>.<li>Set <var>script</var>'s <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-3>fetch options</a> to <var>options</var>.<li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-5>parse error</a> and <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-4>error to rethrow</a> to null.<li> Let <var>result</var> be the result of <a href=https://webassembly.github.io/esm-integration/js-api/index.html#parse-a-webassembly-module id=creating-scripts:parse-a-webassembly-module data-x-internal=parse-a-webassembly-module>parsing a WebAssembly module</a> given <var>bodyBytes</var>, <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm-3">realm</a>, and <var>script</var>. Passing <var>script</var> as the last parameter here ensures <var>result</var>.[[HostDefined]] will be <var>script</var>. <li> If the previous step threw an error <var>error</var>, then: <ol><li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-6>parse error</a> to <var>error</var>.<li>Return <var>script</var>.</ol> <li>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-3>record</a> to <var>result</var>.<li>Return <var>script</var>.</ol> <cite>WebAssembly JavaScript Interface: ESM Integration</cite> specifies the hooks for the WebAssembly integration with ECMA-262 module loading. This includes support both for direct dependency imports, as well as for source phase imports, which support virtualization and multi-instantiation. <a href=references.html#refsWASMESM>[WASMESM]</a> To <dfn id=creating-a-css-module-script>create a CSS module script</dfn>, given a string <var>source</var> and an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-4>environment settings object</a> <var>settings</var>: <ol><li>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script-3>module script</a> that this algorithm will subsequently initialize.<li>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-4>settings object</a> to <var>settings</var>.<li>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-4>base URL</a> and <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-4>fetch options</a> to null.<li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-7>parse error</a> and <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-5>error to rethrow</a> to null.<li>Let <var>sheet</var> be the result of running the steps to <a id=creating-scripts:create-a-constructed-cssstylesheet href=https://drafts.csswg.org/cssom/#create-a-constructed-cssstylesheet data-x-internal=create-a-constructed-cssstylesheet>create a constructed <code>CSSStyleSheet</code></a> with an empty dictionary as the argument.<li> Run the steps to <a id=creating-scripts:synchronously-replace-the-rules-of-a-cssstylesheet href=https://drafts.csswg.org/cssom/#synchronously-replace-the-rules-of-a-cssstylesheet data-x-internal=synchronously-replace-the-rules-of-a-cssstylesheet>synchronously replace the rules of a <code>CSSStyleSheet</code></a> on <var>sheet</var> given <var>source</var>. If this throws an exception, catch it, and set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-8>parse error</a> to that exception, and return <var>script</var>. The steps to <a id=creating-scripts:synchronously-replace-the-rules-of-a-cssstylesheet-2 href=https://drafts.csswg.org/cssom/#synchronously-replace-the-rules-of-a-cssstylesheet data-x-internal=synchronously-replace-the-rules-of-a-cssstylesheet>synchronously replace the rules of a <code>CSSStyleSheet</code></a> will throw if <var>source</var> contains any <code>@import</code> rules. This is by-design for now because there is not yet an agreement on how to handle these for CSS module scripts; therefore they are blocked altogether until a consensus is reached. <li>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-4>record</a> to the result of <a id=creating-scripts:createdefaultexportsyntheticmodule href=https://tc39.es/proposal-json-modules/#sec-create-default-export-synthetic-module data-x-internal=createdefaultexportsyntheticmodule>CreateDefaultExportSyntheticModule</a>(<var>sheet</var>).<li>Return <var>script</var>.</ol> To <dfn id=creating-a-json-module-script>create a JSON module script</dfn>, given a string <var>source</var> and an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-5>environment settings object</a> <var>settings</var>: <ol><li>Let <var>script</var> be a new <a href=#module-script id=creating-scripts:module-script-4>module script</a> that this algorithm will subsequently initialize.<li>Set <var>script</var>'s <a href=#settings-object id=creating-scripts:settings-object-5>settings object</a> to <var>settings</var>.<li>Set <var>script</var>'s <a href=#concept-script-base-url id=creating-scripts:concept-script-base-url-5>base URL</a> and <a href=#concept-script-script-fetch-options id=creating-scripts:concept-script-script-fetch-options-5>fetch options</a> to null.<li>Set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-9>parse error</a> and <a href=#concept-script-error-to-rethrow id=creating-scripts:concept-script-error-to-rethrow-6>error to rethrow</a> to null.<li> Let <var>result</var> be <a id=creating-scripts:parsejsonmodule href=https://tc39.es/proposal-json-modules/#sec-parse-json-module data-x-internal=parsejsonmodule>ParseJSONModule</a>(<var>source</var>). If this throws an exception, catch it, and set <var>script</var>'s <a href=#concept-script-parse-error id=creating-scripts:concept-script-parse-error-10>parse error</a> to that exception, and return <var>script</var>. <li>Set <var>script</var>'s <a href=#concept-script-record id=creating-scripts:concept-script-record-5>record</a> to <var>result</var>.<li>Return <var>script</var>.</ol> The <dfn id=module-type-from-module-request>module type from module request</dfn> steps, given a <a id=creating-scripts:modulerequest-record href=https://tc39.es/proposal-import-attributes/#sec-modulerequest-record data-x-internal=modulerequest-record>ModuleRequest Record</a> <var>moduleRequest</var>, are as follows: <ol><li>Let <var>moduleType</var> be "<code>javascript-or-wasm</code>".<li> If <var>moduleRequest</var>.[[Attributes]] has a <a id=creating-scripts:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> <var>entry</var> such that <var>entry</var>.[[Key]] is "<code>type</code>", then: <ol><li> If <var>entry</var>.[[Value]] is "<code>javascript-or-wasm</code>", then set <var>moduleType</var> to null. This specification uses the "<code>javascript-or-wasm</code>" module type internally for <a href=#javascript-module-script id=creating-scripts:javascript-module-script>JavaScript module scripts</a> or <a href=#webassembly-module-script id=creating-scripts:webassembly-module-script>WebAssembly module scripts</a>, so this step is needed to prevent modules from being imported using a "<code>javascript-or-wasm</code>" type attribute (a null <var>moduleType</var> will cause the <a href=#module-type-allowed id=creating-scripts:module-type-allowed>module type allowed</a> check to fail). <li>Otherwise, set <var>moduleType</var> to <var>entry</var>.[[Value]].</ol> <li>Return <var>moduleType</var>.</ol> The <dfn id=module-type-allowed>module type allowed</dfn> steps, given a <a id=creating-scripts:string-3 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>moduleType</var> and an <a href=#environment-settings-object id=creating-scripts:environment-settings-object-6>environment settings object</a> <var>settings</var>, are as follows: <ol><li>If <var>moduleType</var> is not "<code>javascript-or-wasm</code>", "<code>css</code>", or "<code>json</code>", then return false.<li>If <var>moduleType</var> is "<code>css</code>" and the <code id=creating-scripts:cssstylesheet><a data-x-internal=cssstylesheet href=https://drafts.csswg.org/cssom/#the-cssstylesheet-interface>CSSStyleSheet</a></code> interface is not <a href=https://webidl.spec.whatwg.org/#dfn-exposed id=creating-scripts:idl-exposed data-x-internal=idl-exposed>exposed</a> in <var>settings</var>'s <a href="#environment-settings-object's-realm" id="creating-scripts:environment-settings-object's-realm-4">realm</a>, then return false.<li>Return true.</ol> The <dfn id=fetch-destination-from-module-type>fetch destination from module type</dfn> steps, given a <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=creating-scripts:concept-request-destination data-x-internal=concept-request-destination>destination</a> <var>defaultDestination</var> and a <a id=creating-scripts:string-4 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>moduleType</var>, are as follows: <ol><li>If <var>moduleType</var> is "<code>json</code>", then return "<code>json</code>".<li>If <var>moduleType</var> is "<code>css</code>", then return "<code>style</code>".<li>Return <var>defaultDestination</var>.</ol> <h5 id=calling-scripts>8.1.4.4 Calling scripts<a href=#calling-scripts class=self-link></a></h5> To <dfn id=run-a-classic-script data-export="">run a classic script</dfn> given a <a href=#classic-script id=calling-scripts:classic-script>classic script</a> <var>script</var> and an optional boolean <var>rethrow errors</var> (default false): <ol><li>Let <var>settings</var> be the <a href=#settings-object id=calling-scripts:settings-object>settings object</a> of <var>script</var>.<li><a href=#check-if-we-can-run-script id=calling-scripts:check-if-we-can-run-script>Check if we can run script</a> with <var>settings</var>. If this returns "do not run" then return <a id=calling-scripts:normalcompletion href=https://tc39.es/ecma262/#sec-normalcompletion data-x-internal=normalcompletion>NormalCompletion</a>(empty).<li><a id=calling-scripts:record-classic-script-execution-start-time href=https://w3c.github.io/long-animation-frames/#record-classic-script-execution-start-time data-x-internal=record-classic-script-execution-start-time>Record classic script execution start time</a> given <var>script</var>.<li><a href=#prepare-to-run-script id=calling-scripts:prepare-to-run-script>Prepare to run script</a> given <var>settings</var>.<li>Let <var>evaluationStatus</var> be null.<li>If <var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow>error to rethrow</a> is not null, then set <var>evaluationStatus</var> to Completion { [[Type]]: throw, [[Value]]: <var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow-2>error to rethrow</a>, [[Target]]: empty }.<li> Otherwise, set <var>evaluationStatus</var> to <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=calling-scripts:js-scriptevaluation data-x-internal=js-scriptevaluation>ScriptEvaluation</a>(<var>script</var>'s <a href=#concept-script-record id=calling-scripts:concept-script-record>record</a>). If <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=calling-scripts:js-scriptevaluation-2 data-x-internal=js-scriptevaluation>ScriptEvaluation</a> does not complete because the user agent has <a href=#abort-a-running-script id=calling-scripts:abort-a-running-script>aborted the running script</a>, leave <var>evaluationStatus</var> as null. <li> If <var>evaluationStatus</var> is an <a href=https://tc39.es/ecma262/#sec-completion-record-specification-type id=calling-scripts:completion-record data-x-internal=completion-record>abrupt completion</a>, then: <ol><li> If <var>rethrow errors</var> is true and <var>script</var>'s <a href=#muted-errors id=calling-scripts:muted-errors>muted errors</a> is false, then: <ol><li><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script>Clean up after running script</a> with <var>settings</var>.<li>Rethrow <var>evaluationStatus</var>.[[Value]].</ol> <li> If <var>rethrow errors</var> is true and <var>script</var>'s <a href=#muted-errors id=calling-scripts:muted-errors-2>muted errors</a> is true, then: <ol><li><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-2>Clean up after running script</a> with <var>settings</var>.<li>Throw a <a id=calling-scripts:networkerror href=https://webidl.spec.whatwg.org/#networkerror data-x-internal=networkerror>"<code>NetworkError</code>"</a> <code id=calling-scripts:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</ol> <li> Otherwise, <var>rethrow errors</var> is false. Perform the following steps: <ol><li><a href=#report-an-exception id=calling-scripts:report-an-exception>Report an exception</a> given by <var>evaluationStatus</var>.[[Value]] for <var>script</var>'s <a href=#settings-object id=calling-scripts:settings-object-2>settings object</a>'s <a href=#concept-settings-object-global id=calling-scripts:concept-settings-object-global>global object</a>.<li><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-3>Clean up after running script</a> with <var>settings</var>.<li>Return <var>evaluationStatus</var>.</ol> </ol> <li><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-4>Clean up after running script</a> with <var>settings</var>.<li>If <var>evaluationStatus</var> is a normal completion, then return <var>evaluationStatus</var>.<li>If we've reached this point, <var>evaluationStatus</var> was left as null because the script was <a href=#abort-a-running-script id=calling-scripts:abort-a-running-script-2>aborted prematurely</a> during evaluation. Return Completion { [[Type]]: throw, [[Value]]: a new <a id=calling-scripts:quotaexceedederror href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a> <code id=calling-scripts:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>, [[Target]]: empty }. </ol> To <dfn id=run-a-module-script data-export="">run a module script</dfn> given a <a href=#module-script id=calling-scripts:module-script>module script</a> <var>script</var> and an optional boolean <var>preventErrorReporting</var> (default false): <ol><li>Let <var>settings</var> be the <a href=#settings-object id=calling-scripts:settings-object-3>settings object</a> of <var>script</var>.<li><a href=#check-if-we-can-run-script id=calling-scripts:check-if-we-can-run-script-2>Check if we can run script</a> with <var>settings</var>. If this returns "do not run", then return <a id=calling-scripts:a-promise-resolved-with href=https://webidl.spec.whatwg.org/#a-promise-resolved-with data-x-internal=a-promise-resolved-with>a promise resolved with</a> undefined.<li><a id=calling-scripts:record-module-script-execution-start-time href=https://w3c.github.io/long-animation-frames/#record-module-script-execution-start-time data-x-internal=record-module-script-execution-start-time>Record module script execution start time</a> given <var>script</var>.<li><a href=#prepare-to-run-script id=calling-scripts:prepare-to-run-script-2>Prepare to run script</a> given <var>settings</var>.<li>Let <var>evaluationPromise</var> be null.<li>If <var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow-3>error to rethrow</a> is not null, then set <var>evaluationPromise</var> to <a id=calling-scripts:a-promise-rejected-with href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> <var>script</var>'s <a href=#concept-script-error-to-rethrow id=calling-scripts:concept-script-error-to-rethrow-4>error to rethrow</a>.<li> Otherwise: <ol><li>Let <var>record</var> be <var>script</var>'s <a href=#concept-script-record id=calling-scripts:concept-script-record-2>record</a>. <li> Set <var>evaluationPromise</var> to <var>record</var>.<a href=https://tc39.es/ecma262/#sec-moduleevaluation id=calling-scripts:js-evaluate data-x-internal=js-evaluate>Evaluate</a>(). This step will recursively evaluate all of the module's dependencies. If <a href=https://tc39.es/ecma262/#sec-moduleevaluation id=calling-scripts:js-evaluate-2 data-x-internal=js-evaluate>Evaluate</a> fails to complete as a result of the user agent <a href=#abort-a-running-script id=calling-scripts:abort-a-running-script-3>aborting the running script</a>, then set <var>evaluationPromise</var> to <a id=calling-scripts:a-promise-rejected-with-2 href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> a new <a id=calling-scripts:quotaexceedederror-2 href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a> <code id=calling-scripts:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>. </ol> <li>If <var>preventErrorReporting</var> is false, then <a id=calling-scripts:upon-rejection href=https://webidl.spec.whatwg.org/#upon-rejection data-x-internal=upon-rejection>upon rejection</a> of <var>evaluationPromise</var> with <var>reason</var>, <a href=#report-an-exception id=calling-scripts:report-an-exception-2>report an exception</a> given by <var>reason</var> for <var>script</var>'s <a href=#settings-object id=calling-scripts:settings-object-4>settings object</a>'s <a href=#concept-settings-object-global id=calling-scripts:concept-settings-object-global-2>global object</a>.<li><a href=#clean-up-after-running-script id=calling-scripts:clean-up-after-running-script-5>Clean up after running script</a> with <var>settings</var>.<li>Return <var>evaluationPromise</var>.</ol> The steps to <dfn id=check-if-we-can-run-script>check if we can run script</dfn> with an <a href=#environment-settings-object id=calling-scripts:environment-settings-object>environment settings object</a> <var>settings</var> are as follows. They return either "run" or "do not run". <ol><li>If the <a href=#concept-settings-object-global id=calling-scripts:concept-settings-object-global-3>global object</a> specified by <var>settings</var> is a <code id=calling-scripts:window><a href=nav-history-apis.html#window>Window</a></code> object whose <code id=calling-scripts:document><a href=dom.html#document>Document</a></code> object is not <a id=calling-scripts:fully-active href=document-sequences.html#fully-active>fully active</a>, then return "do not run". <li>If <a href=#concept-environment-noscript id=calling-scripts:concept-environment-noscript>scripting is disabled</a> for <var>settings</var>, then return "do not run". <li>Return "run".</ol> The steps to <dfn id=prepare-to-run-script data-export="">prepare to run script</dfn> with an <a href=#environment-settings-object id=calling-scripts:environment-settings-object-2>environment settings object</a> <var>settings</var> are as follows: <ol><li>Push <var>settings</var>'s <a href=#realm-execution-context id=calling-scripts:realm-execution-context>realm execution context</a> onto the <a id=calling-scripts:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>; it is now the <a id=calling-scripts:running-javascript-execution-context href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution context</a>.<li>Add <var>settings</var> to the <a id=calling-scripts:surrounding-agent href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding agent</a>'s <a href=#concept-agent-event-loop id=calling-scripts:concept-agent-event-loop>event loop</a>'s <a href=#currently-running-task id=calling-scripts:currently-running-task>currently running task</a>'s <a href=#script-evaluation-environment-settings-object-set id=calling-scripts:script-evaluation-environment-settings-object-set>script evaluation environment settings object set</a>.</ol> The steps to <dfn id=clean-up-after-running-script data-export="">clean up after running script</dfn> with an <a href=#environment-settings-object id=calling-scripts:environment-settings-object-3>environment settings object</a> <var>settings</var> are as follows: <ol><li><a id=calling-scripts:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>settings</var>'s <a href=#realm-execution-context id=calling-scripts:realm-execution-context-2>realm execution context</a> is the <a id=calling-scripts:running-javascript-execution-context-2 href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution context</a>.<li>Remove <var>settings</var>'s <a href=#realm-execution-context id=calling-scripts:realm-execution-context-3>realm execution context</a> from the <a id=calling-scripts:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li>If the <a id=calling-scripts:javascript-execution-context-stack-3 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> is now empty, <a href=#perform-a-microtask-checkpoint id=calling-scripts:perform-a-microtask-checkpoint>perform a microtask checkpoint</a>. (If this runs scripts, these algorithms will be invoked reentrantly.)</ol> These algorithms are not invoked by one script directly calling another, but they can be invoked reentrantly in an indirect manner, e.g. if a script dispatches an event which has event listeners registered. The <dfn id=running-script>running script</dfn> is the <a href=#concept-script id=calling-scripts:concept-script>script</a> in the [[HostDefined]] field in the ScriptOrModule component of the <a id=calling-scripts:running-javascript-execution-context-3 href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution context</a>. <h5 id=killing-scripts>8.1.4.5 Killing scripts<a href=#killing-scripts class=self-link></a></h5> Although the JavaScript specification does not account for this possibility, it's sometimes necessary to <dfn id=abort-a-running-script data-lt="abort a running script|abort the running script" data-export="">abort a running script</dfn>. This causes any <a href=https://tc39.es/ecma262/#sec-runtime-semantics-scriptevaluation id=killing-scripts:js-scriptevaluation data-x-internal=js-scriptevaluation>ScriptEvaluation</a> or <a id=killing-scripts:source-text-module-record href=https://tc39.es/ecma262/#sec-source-text-module-records data-x-internal=source-text-module-record>Source Text Module Record</a> <a href=https://tc39.es/ecma262/#sec-moduleevaluation id=killing-scripts:js-evaluate data-x-internal=js-evaluate>Evaluate</a> invocations to cease immediately, emptying the <a id=killing-scripts:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> without triggering any of the normal mechanisms like <code>finally</code> blocks. <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> User agents may impose resource limitations on scripts, for example CPU quotas, memory limits, total execution time limits, or bandwidth limitations. When a script exceeds a limit, the user agent may either throw a <a id=killing-scripts:quotaexceedederror href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a> <code id=killing-scripts:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>, <a href=#abort-a-running-script id=killing-scripts:abort-a-running-script>abort the script</a> without an exception, prompt the user, or throttle script execution. <div class=example> For example, the following script never terminates. A user agent could, after waiting for a few seconds, prompt the user to either terminate the script or let it continue. <pre><code class='html'><c- p><</c-><c- f>script</c-><c- p>></c-> <c- k>while</c-> <c- p>(</c-><c- kc>true</c-><c- p>)</c-> <c- p>{</c-> <c- d>/* loop */</c-> <c- p>}</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> </div> User agents are encouraged to allow users to disable scripting whenever the user is prompted either by a script (e.g. using the <code id=killing-scripts:dom-alert><a href=timers-and-user-prompts.html#dom-alert>window.alert()</a></code> API) or because of a script's actions (e.g. because it has exceeded a time limit). If scripting is disabled while a script is executing, the script should be terminated immediately. User agents may allow users to specifically disable scripts just for the purposes of closing a <a id=killing-scripts:browsing-context href=document-sequences.html#browsing-context>browsing context</a>. For example, the prompt mentioned in the example above could also offer the user with a mechanism to just close the page entirely, without running any <code id=killing-scripts:event-unload><a href=indices.html#event-unload>unload</a></code> event handlers. <h5 id=runtime-script-errors>8.1.4.6 Runtime script errors<a href=#runtime-script-errors class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/reportError title="The reportError() global method may be used to report errors to the console or global event handlers, emulating an uncaught JavaScript exception.">reportError</a>Support in all current engines.<div class=support>Firefox93+Safari15.4+Chrome95+<hr>Opera?Edge95+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> <dl class=domintro><dt><code>self.<a href=#dom-reporterror id=dom-reporterror-dev>reportError</a>(<var>e</var>)</code><dd>Dispatches an <code id=runtime-script-errors:event-error><a href=indices.html#event-error>error</a></code> event at the global object for the given value <var>e</var>, in the same fashion as an unhandled exception.</dl> To <dfn id=extract-error>extract error information</dfn> from a JavaScript value <var>exception</var>: <ol><li>Let <var>attributes</var> be an empty <a href=https://infra.spec.whatwg.org/#ordered-map id=runtime-script-errors:ordered-map data-x-internal=ordered-map>map</a> keyed by IDL attributes.<li>Set <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-error><a href=#dom-errorevent-error>error</a></code>] to <var>exception</var>.<li> Set <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-message><a href=#dom-errorevent-message>message</a></code>], <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-filename><a href=#dom-errorevent-filename>filename</a></code>], <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-lineno><a href=#dom-errorevent-lineno>lineno</a></code>], and <var>attributes</var>[<code id=runtime-script-errors:dom-errorevent-colno><a href=#dom-errorevent-colno>colno</a></code>] to <a id=runtime-script-errors:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> values derived from <var>exception</var>. Browsers implement behavior not specified here or in the JavaScript specification to gather values which are helpful, including in unusual cases (e.g., <code>eval</code>). In the future, this might be specified in greater detail. <li>Return <var>attributes</var>.</ol> To <dfn id=report-an-exception data-export="">report an exception</dfn> <var>exception</var> which is a JavaScript value, for a particular <a href=#global-object id=runtime-script-errors:global-object>global object</a> <var>global</var> and optional boolean <dfn id=report-exception-omiterror><var>omitError</var></dfn> (default false): <ol><li>Let <var>notHandled</var> be true.<li>Let <var>errorInfo</var> be the result of <a href=#extract-error id=runtime-script-errors:extract-error>extracting error information</a> from <var>exception</var>.<li> Let <var>script</var> be a <a href=#concept-script id=runtime-script-errors:concept-script>script</a> found in an <a id=runtime-script-errors:implementation-defined-2 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> way, or null. This should usually be the <a href=#running-script id=runtime-script-errors:running-script>running script</a> (most notably during <a href=#run-a-classic-script id=runtime-script-errors:run-a-classic-script>run a classic script</a>). Implementations have not yet settled on interoperable behavior for which script is used to determine whether errors are muted in less common cases. <li>If <var>script</var> is a <a href=#classic-script id=runtime-script-errors:classic-script>classic script</a> and <var>script</var>'s <a href=#muted-errors id=runtime-script-errors:muted-errors>muted errors</a> is true, then set <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-error-2><a href=#dom-errorevent-error>error</a></code>] to null, <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-message-2><a href=#dom-errorevent-message>message</a></code>] to "<code>Script error.</code>", <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-filename-2><a href=#dom-errorevent-filename>filename</a></code>] to the empty string, <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-lineno-2><a href=#dom-errorevent-lineno>lineno</a></code>] to 0, and <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-colno-2><a href=#dom-errorevent-colno>colno</a></code>] to 0.<li>If <var>omitError</var> is true, then set <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-error-3><a href=#dom-errorevent-error>error</a></code>] to null.<li> If <var>global</var> is not <a href=#in-error-reporting-mode id=runtime-script-errors:in-error-reporting-mode>in error reporting mode</a>, then: <ol><li>Set <var>global</var>'s <a href=#in-error-reporting-mode id=runtime-script-errors:in-error-reporting-mode-2>in error reporting mode</a> to true.<li> If <var>global</var> implements <code id=runtime-script-errors:eventtarget><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code>, then set <var>notHandled</var> to the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=runtime-script-errors:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=runtime-script-errors:event-error-2><a href=indices.html#event-error>error</a></code> at <var>global</var>, using <code id=runtime-script-errors:errorevent><a href=#errorevent>ErrorEvent</a></code>, with the <code id=runtime-script-errors:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true, and additional attributes initialized according to <var>errorInfo</var>. Returning true in an event handler cancels the event per <a href=#the-event-handler-processing-algorithm id=runtime-script-errors:the-event-handler-processing-algorithm>the event handler processing algorithm</a>. <li>Set <var>global</var>'s <a href=#in-error-reporting-mode id=runtime-script-errors:in-error-reporting-mode-3>in error reporting mode</a> to false.</ol> <li> If <var>notHandled</var> is true, then: <ol><li>Set <var>errorInfo</var>[<code id=runtime-script-errors:dom-errorevent-error-4><a href=#dom-errorevent-error>error</a></code>] to null.<li> If <var>global</var> implements <code id=runtime-script-errors:dedicatedworkerglobalscope><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>, <a href=#queue-a-global-task id=runtime-script-errors:queue-a-global-task>queue a global task</a> on the <a href=#dom-manipulation-task-source id=runtime-script-errors:dom-manipulation-task-source>DOM manipulation task source</a> with the <var>global</var>'s associated <code id=runtime-script-errors:worker><a href=workers.html#worker>Worker</a></code>'s <a href=#concept-relevant-global id=runtime-script-errors:concept-relevant-global>relevant global object</a> to run these steps: <ol><li>Let <var>workerObject</var> be the <code id=runtime-script-errors:worker-2><a href=workers.html#worker>Worker</a></code> object associated with <var>global</var>.<li>Set <var>notHandled</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=runtime-script-errors:concept-event-fire-2 data-x-internal=concept-event-fire>firing an event</a> named <code id=runtime-script-errors:event-error-3><a href=indices.html#event-error>error</a></code> at <var>workerObject</var>, using <code id=runtime-script-errors:errorevent-2><a href=#errorevent>ErrorEvent</a></code>, with the <code id=runtime-script-errors:dom-event-cancelable-2><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true, and additional attributes initialized according to <var>errorInfo</var>.<li> If <var>notHandled</var> is true, then <a href=#report-an-exception id=runtime-script-errors:report-an-exception>report</a> <var>exception</var> for <var>workerObject</var>'s <a href=#concept-relevant-global id=runtime-script-errors:concept-relevant-global-2>relevant global object</a> with <a href=#report-exception-omiterror id=runtime-script-errors:report-exception-omiterror><var>omitError</var></a> set to true. The actual <var>exception</var> value will not be available in the owner realm, but the user agent still carries through enough information to set the message, filename, and other attributes, as well as potentially report to a developer console. </ol> </ol> <li>Otherwise, the user agent may report <var>exception</var> to a developer console.</ol> If the implicit port connecting a worker to its <code id=runtime-script-errors:worker-3><a href=workers.html#worker>Worker</a></code> object has been disentangled (i.e. if the parent worker has been terminated), then the user agent must act as if the <code id=runtime-script-errors:worker-4><a href=workers.html#worker>Worker</a></code> object had no <code id=runtime-script-errors:event-error-4><a href=indices.html#event-error>error</a></code> event handler and as if that worker's <code id=runtime-script-errors:handler-workerglobalscope-onerror><a href=workers.html#handler-workerglobalscope-onerror>onerror</a></code> attribute was null, but must otherwise act as described above. Thus, error reports propagate up to the chain of dedicated workers up to the original <code id=runtime-script-errors:document><a href=dom.html#document>Document</a></code>, even if some of the workers along this chain have been terminated and garbage collected. Previous revisions of this standard defined an algorithm to <dfn id=report-the-exception data-lt="report the exception" data-export="">report the exception</dfn>. As part of <a href=https://github.com/whatwg/html>issue #958</a>, this has been superseded by <a href=#report-an-exception id=runtime-script-errors:report-an-exception-2>report an exception</a> which behaves differently and takes different inputs. <a href=https://github.com/whatwg/html/issues/10516>Issue #10516</a> tracks updating the specification ecosystem. <hr> The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-reporterror data-dfn-type=method><code>reportError(<var>e</var>)</code></dfn> method steps are to <a href=#report-an-exception id=runtime-script-errors:report-an-exception-3>report an exception</a> <var>e</var> for <a id=runtime-script-errors:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>. It is unclear whether <a href=#muted-errors id=runtime-script-errors:muted-errors-2>muting</a> is applicable here. In Chrome and Safari it is muted, but in Firefox it is not. See also <a href=https://github.com/whatwg/html/issues/958>issue #958</a>. <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent title="The ErrorEvent interface represents events providing information related to errors in scripts or in files.">ErrorEvent</a>Support in all current engines.<div class=support>Firefox27+Safari6+Chrome10+<hr>Opera11+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+</div></div></div>The <code id=runtime-script-errors:errorevent-3><a href=#errorevent>ErrorEvent</a></code> interface is defined as follows: <pre><code class='idl'>[Exposed=*] <c- b>interface</c-> <dfn id='errorevent' data-dfn-type='interface'><c- g>ErrorEvent</c-></dfn> : <a id='runtime-script-errors:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> { <a href='https://dom.spec.whatwg.org/#concept-event-constructor' id='runtime-script-errors:dom-event-constructor' data-x-internal='dom-event-constructor'><c- g>constructor</c-></a>(<c- b>DOMString</c-> <c- g>type</c->, <c- b>optional</c-> <a href='#erroreventinit' id='runtime-script-errors:erroreventinit'><c- n>ErrorEventInit</c-></a> <c- g>eventInitDict</c-> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-errorevent-message' id='runtime-script-errors:dom-errorevent-message-3'><c- g>message</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-errorevent-filename' id='runtime-script-errors:dom-errorevent-filename-3'><c- g>filename</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-errorevent-lineno' id='runtime-script-errors:dom-errorevent-lineno-3'><c- g>lineno</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-errorevent-colno' id='runtime-script-errors:dom-errorevent-colno-3'><c- g>colno</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a href='#dom-errorevent-error' id='runtime-script-errors:dom-errorevent-error-5'><c- g>error</c-></a>; }; <c- b>dictionary</c-> <dfn id='erroreventinit' data-dfn-type='dictionary'><c- g>ErrorEventInit</c-></dfn> : <a id='runtime-script-errors:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> { <c- b>DOMString</c-> <c- g>message</c-> = ""; <c- b>USVString</c-> <c- g>filename</c-> = ""; <c- b>unsigned</c-> <c- b>long</c-> <c- g>lineno</c-> = 0; <c- b>unsigned</c-> <c- b>long</c-> <c- g>colno</c-> = 0; <c- b>any</c-> <c- g>error</c->; };</code></pre> The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-message data-dfn-type=attribute><code>message</code></dfn> attribute must return the value it was initialized to. It represents the error message. The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-filename data-dfn-type=attribute><code>filename</code></dfn> attribute must return the value it was initialized to. It represents the <a id=runtime-script-errors:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the script in which the error originally occurred. The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-lineno data-dfn-type=attribute><code>lineno</code></dfn> attribute must return the value it was initialized to. It represents the line number where the error occurred in the script. The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-colno data-dfn-type=attribute><code>colno</code></dfn> attribute must return the value it was initialized to. It represents the column number where the error occurred in the script. The <dfn data-dfn-for=ErrorEvent id=dom-errorevent-error data-dfn-type=attribute><code>error</code></dfn> attribute must return the value it was initialized to. It must initially be initialized to undefined. Where appropriate, it is set to the object representing the error (e.g., the exception object in the case of an uncaught exception). <h5 id=unhandled-promise-rejections>8.1.4.7 Unhandled promise rejections<a href=#unhandled-promise-rejections class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/rejectionhandled_event title="The rejectionhandled event is sent to the script's global scope (usually window but also Worker) whenever a rejected JavaScript Promise is handled late, i.e. when a handler is attached to the promise after its rejection had caused an unhandledrejection event.">Window/rejectionhandled_event</a>Support in all current engines.<div class=support>Firefox69+Safari11+Chrome49+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> In addition to synchronous <a href=#runtime-script-errors>runtime script errors</a>, scripts may experience asynchronous promise rejections, tracked via the <code id=unhandled-promise-rejections:event-unhandledrejection><a href=indices.html#event-unhandledrejection>unhandledrejection</a></code> and <code id=unhandled-promise-rejections:event-rejectionhandled><a href=indices.html#event-rejectionhandled>rejectionhandled</a></code> events. Tracking these rejections is done via the <a href=#the-hostpromiserejectiontracker-implementation id=unhandled-promise-rejections:the-hostpromiserejectiontracker-implementation>HostPromiseRejectionTracker</a> abstract operation, but reporting them is defined here. To <dfn id=notify-about-rejected-promises>notify about rejected promises</dfn> given a <a href=#global-object id=unhandled-promise-rejections:global-object>global object</a> <var>global</var>: <ol><li>Let <var>list</var> be a <a href=https://infra.spec.whatwg.org/#list-clone id=unhandled-promise-rejections:list-clone data-x-internal=list-clone>clone</a> of <var>global</var>'s <a href=#about-to-be-notified-rejected-promises-list id=unhandled-promise-rejections:about-to-be-notified-rejected-promises-list>about-to-be-notified rejected promises list</a>.<li>If <var>list</var> <a href=https://infra.spec.whatwg.org/#list-is-empty id=unhandled-promise-rejections:list-is-empty data-x-internal=list-is-empty>is empty</a>, then return.<li><a href=https://infra.spec.whatwg.org/#list-empty id=unhandled-promise-rejections:list-empty data-x-internal=list-empty>Empty</a> <var>global</var>'s <a href=#about-to-be-notified-rejected-promises-list id=unhandled-promise-rejections:about-to-be-notified-rejected-promises-list-2>about-to-be-notified rejected promises list</a>.<li> <a href=#queue-a-global-task id=unhandled-promise-rejections:queue-a-global-task>Queue a global task</a> on the <a href=#dom-manipulation-task-source id=unhandled-promise-rejections:dom-manipulation-task-source>DOM manipulation task source</a> given <var>global</var> to run the following step: <ol><li><a href=https://infra.spec.whatwg.org/#list-iterate id=unhandled-promise-rejections:list-iterate data-x-internal=list-iterate>For each</a> promise <var>p</var> of <var>list</var>: <ol><li>If <var>p</var>.[[PromiseIsHandled]] is true, then <a id=unhandled-promise-rejections:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>Let <var>notCanceled</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=unhandled-promise-rejections:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=unhandled-promise-rejections:event-unhandledrejection-2><a href=indices.html#event-unhandledrejection>unhandledrejection</a></code> at <var>global</var>, using <code id=unhandled-promise-rejections:promiserejectionevent><a href=#promiserejectionevent>PromiseRejectionEvent</a></code>, with the <code id=unhandled-promise-rejections:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true, the <code id=unhandled-promise-rejections:dom-promiserejectionevent-promise><a href=#dom-promiserejectionevent-promise>promise</a></code> attribute initialized to <var>p</var>, and the <code id=unhandled-promise-rejections:dom-promiserejectionevent-reason><a href=#dom-promiserejectionevent-reason>reason</a></code> attribute initialized to <var>p</var>.[[PromiseResult]].<li id=concept-promise-rejection-handled>If <var>notCanceled</var> is true, then the user agent may report <var>p</var>.[[PromiseResult]] to a developer console.<li>If <var>p</var>.[[PromiseIsHandled]] is false, then <a href=https://infra.spec.whatwg.org/#set-append id=unhandled-promise-rejections:set-append data-x-internal=set-append>append</a> <var>p</var> to <var>global</var>'s <a href=#outstanding-rejected-promises-weak-set id=unhandled-promise-rejections:outstanding-rejected-promises-weak-set>outstanding rejected promises weak set</a>.</ol> </ol> </ol> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent title="The PromiseRejectionEvent interface represents events which are sent to the global script context when JavaScript Promises are rejected. These events are particularly useful for telemetry and debugging purposes.">PromiseRejectionEvent</a>Support in all current engines.<div class=support>Firefox69+Safari11+Chrome49+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <code id=unhandled-promise-rejections:promiserejectionevent-2><a href=#promiserejectionevent>PromiseRejectionEvent</a></code> interface is defined as follows: <pre><code class='idl'>[Exposed=*] <c- b>interface</c-> <dfn id='promiserejectionevent' data-dfn-type='interface'><c- g>PromiseRejectionEvent</c-></dfn> : <a id='unhandled-promise-rejections:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> { <a href='https://dom.spec.whatwg.org/#concept-event-constructor' id='unhandled-promise-rejections:dom-event-constructor' data-x-internal='dom-event-constructor'><c- g>constructor</c-></a>(<c- b>DOMString</c-> <c- g>type</c->, <a href='#promiserejectioneventinit' id='unhandled-promise-rejections:promiserejectioneventinit'><c- n>PromiseRejectionEventInit</c-></a> <c- g>eventInitDict</c->); <c- b>readonly</c-> <c- b>attribute</c-> <a href='https://webidl.spec.whatwg.org/#idl-object' id='unhandled-promise-rejections:idl-object' data-x-internal='idl-object'><c- b>object</c-></a> <a href='#dom-promiserejectionevent-promise' id='unhandled-promise-rejections:dom-promiserejectionevent-promise-2'><c- g>promise</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a href='#dom-promiserejectionevent-reason' id='unhandled-promise-rejections:dom-promiserejectionevent-reason-2'><c- g>reason</c-></a>; }; <c- b>dictionary</c-> <dfn id='promiserejectioneventinit' data-dfn-type='dictionary'><c- g>PromiseRejectionEventInit</c-></dfn> : <a id='unhandled-promise-rejections:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> { <c- b>required</c-> <a href='https://webidl.spec.whatwg.org/#idl-object' id='unhandled-promise-rejections:idl-object-2' data-x-internal='idl-object'><c- b>object</c-></a> <c- g>promise</c->; <c- b>any</c-> <c- g>reason</c->; };</code></pre> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent/promise title="The PromiseRejectionEvent interface's promise read-only property indicates the JavaScript Promise which was rejected. You can examine the event's PromiseRejectionEvent.reason property to learn why the promise was rejected.">PromiseRejectionEvent/promise</a>Support in all current engines.<div class=support>Firefox69+Safari11+Chrome49+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=PromiseRejectionEvent id=dom-promiserejectionevent-promise data-dfn-type=attribute><code>promise</code></dfn> attribute must return the value it was initialized to. It represents the promise which this notification is about. Because of how Web IDL conversion rules for <code><a href=https://webidl.spec.whatwg.org/#idl-promise id=unhandled-promise-rejections:idl-promise data-x-internal=idl-promise>Promise</a><<var>T</var>></code> types always wrap the input into a new promise, the <code id=unhandled-promise-rejections:dom-promiserejectionevent-promise-3><a href=#dom-promiserejectionevent-promise>promise</a></code> attribute is of type <code id=unhandled-promise-rejections:idl-object-3><a data-x-internal=idl-object href=https://webidl.spec.whatwg.org/#idl-object>object</a></code> instead, which is more appropriate for representing an opaque handle to the original promise object. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent/reason title="The PromiseRejectionEvent reason read-only property is any JavaScript value or Object which provides the reason passed into Promise.reject(). This in theory provides information about why the promise was rejected.">PromiseRejectionEvent/reason</a>Support in all current engines.<div class=support>Firefox69+Safari11+Chrome49+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=PromiseRejectionEvent id=dom-promiserejectionevent-reason data-dfn-type=attribute><code>reason</code></dfn> attribute must return the value it was initialized to. It represents the rejection reason for the promise. <h5 id=import-map-parse-results>8.1.4.8 Import map parse results<a href=#import-map-parse-results class=self-link></a></h5> An <dfn id=import-map-parse-result>import map parse result</dfn> is a <a id=import-map-parse-results:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> that is similar to a <a href=#concept-script id=import-map-parse-results:concept-script>script</a>, and also can be stored in a <code id=import-map-parse-results:the-script-element><a href=scripting.html#the-script-element>script</a></code> element's <a href=scripting.html#concept-script-result id=import-map-parse-results:concept-script-result>result</a>, but is not counted as a <a href=#concept-script id=import-map-parse-results:concept-script-2>script</a> for other purposes. It has the following <a href=https://infra.spec.whatwg.org/#struct-item id=import-map-parse-results:struct-item data-x-internal=struct-item>items</a>: <dl><dt>An <dfn id=impr-import-map>import map</dfn><dd>An <a href=#import-map id=import-map-parse-results:import-map>import map</a> or null.<dt>An <dfn id=impr-error-to-rethrow>error to rethrow</dfn><dd>A JavaScript value representing an error that will prevent using this import map, when non-null.</dl> To <dfn id=create-an-import-map-parse-result>create an import map parse result</dfn> given a <a id=import-map-parse-results:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>input</var> and a <a id=import-map-parse-results:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>: <ol><li>Let <var>result</var> be an <a href=#import-map-parse-result id=import-map-parse-results:import-map-parse-result>import map parse result</a> whose <a href=#impr-import-map id=import-map-parse-results:impr-import-map>import map</a> is null and whose <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow>error to rethrow</a> is null.<li><a href=#parse-an-import-map-string id=import-map-parse-results:parse-an-import-map-string>Parse an import map string</a> given <var>input</var> and <var>baseURL</var>, catching any exceptions. If this threw an exception, then set <var>result</var>'s <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow-2>error to rethrow</a> to that exception. Otherwise, set <var>result</var>'s <a href=#impr-import-map id=import-map-parse-results:impr-import-map-2>import map</a> to the return value.<li>Return <var>result</var>.</ol> To <dfn id=register-an-import-map>register an import map</dfn> given a <code id=import-map-parse-results:window><a href=nav-history-apis.html#window>Window</a></code> <var>global</var> and an <a href=#import-map-parse-result id=import-map-parse-results:import-map-parse-result-2>import map parse result</a> <var>result</var>: <ol><li>If <var>result</var>'s <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow-3>error to rethrow</a> is not null, then <a href=#report-an-exception id=import-map-parse-results:report-an-exception>report an exception</a> given by <var>result</var>'s <a href=#impr-error-to-rethrow id=import-map-parse-results:impr-error-to-rethrow-4>error to rethrow</a> for <var>global</var> and return.<li><a href=#merge-existing-and-new-import-maps id=import-map-parse-results:merge-existing-and-new-import-maps>Merge existing and new import maps</a>, given <var>global</var> and <var>result</var>'s <a href=#impr-import-map id=import-map-parse-results:impr-import-map-3>import map</a>.</ol> <h4 id=module-specifier-resolution>8.1.5 Module specifier resolution<a href=#module-specifier-resolution class=self-link></a></h4> <h5 id=the-resolution-algorithm>8.1.5.1 The resolution algorithm<a href=#the-resolution-algorithm class=self-link></a></h5> The <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier>resolve a module specifier</a> algorithm is the primary entry point for converting module specifier strings into <a href=https://url.spec.whatwg.org/#concept-url id=the-resolution-algorithm:url data-x-internal=url>URLs</a>. When no <a href=#import-map id=the-resolution-algorithm:import-map>import maps</a> are involved, it is relatively straightforward, and reduces to <a href=#resolving-a-url-like-module-specifier id=the-resolution-algorithm:resolving-a-url-like-module-specifier>resolving a URL-like module specifier</a>. When there is a non-empty <a href=#import-map id=the-resolution-algorithm:import-map-2>import map</a> present, the behavior is more complex. It checks candidate entries from all applicable <a href=#module-specifier-map id=the-resolution-algorithm:module-specifier-map>module specifier maps</a>, from most-specific to least-specific <a href=#concept-import-map-scopes id=the-resolution-algorithm:concept-import-map-scopes>scopes</a> (falling back to the top-level unscoped <a href=#concept-import-map-imports id=the-resolution-algorithm:concept-import-map-imports>imports</a>), and from most-specific to least-specific prefixes. For each candidate, the <a href=#resolving-an-imports-match id=the-resolution-algorithm:resolving-an-imports-match>resolve an imports match</a> algorithm will give on the following results: <ul><li>Successful resolution of the specifier to a <a id=the-resolution-algorithm:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. Then the <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-2>resolve a module specifier</a> algorithm will return that URL.<li>Throwing an exception. Then the <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-3>resolve a module specifier</a> algorithm will rethrow that exception, without any further fallbacks.<li>Failing to resolve, without an error. In this case the outer <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-4>resolve a module specifier</a> algorithm will move on to the next candidate.</ul> In the end, if no successful resolution is found via any of the candidate <a href=#module-specifier-map id=the-resolution-algorithm:module-specifier-map-2>module specifier maps</a>, <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-5>resolve a module specifier</a> will throw an exception. Thus the result is always either a <a id=the-resolution-algorithm:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> or a thrown exception. To <dfn id=resolve-a-module-specifier>resolve a module specifier</dfn> given a <a id=the-resolution-algorithm:the-script-element href=scripting.html#the-script-element>script</a>-or-null <var>referringScript</var> and a <a id=the-resolution-algorithm:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>specifier</var>: <ol><li>Let <var>settingsObject</var> and <var>baseURL</var> be null.<li> If <var>referringScript</var> is not null, then: <ol><li>Set <var>settingsObject</var> to <var>referringScript</var>'s <a href=#settings-object id=the-resolution-algorithm:settings-object>settings object</a>.<li>Set <var>baseURL</var> to <var>referringScript</var>'s <a href=#concept-script-base-url id=the-resolution-algorithm:concept-script-base-url>base URL</a>.</ol> <li> Otherwise: <ol><li><a id=the-resolution-algorithm:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: there is a <a href=#current-settings-object id=the-resolution-algorithm:current-settings-object>current settings object</a>.<li>Set <var>settingsObject</var> to the <a href=#current-settings-object id=the-resolution-algorithm:current-settings-object-2>current settings object</a>.<li>Set <var>baseURL</var> to <var>settingsObject</var>'s <a href=#api-base-url id=the-resolution-algorithm:api-base-url>API base URL</a>.</ol> <li>Let <var>importMap</var> be an <a href=#empty-import-map id=the-resolution-algorithm:empty-import-map>empty import map</a>.<li>If <var>settingsObject</var>'s <a href=#concept-settings-object-global id=the-resolution-algorithm:concept-settings-object-global>global object</a> implements <code id=the-resolution-algorithm:window><a href=nav-history-apis.html#window>Window</a></code>, then set <var>importMap</var> to <var>settingsObject</var>'s <a href=#concept-settings-object-global id=the-resolution-algorithm:concept-settings-object-global-2>global object</a>'s <a href=#concept-global-import-map id=the-resolution-algorithm:concept-global-import-map>import map</a>.<li>Let <var>serializedBaseURL</var> be <var>baseURL</var>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer data-x-internal=concept-url-serializer>serialized</a>.<li>Let <var>asURL</var> be the result of <a href=#resolving-a-url-like-module-specifier id=the-resolution-algorithm:resolving-a-url-like-module-specifier-2>resolving a URL-like module specifier</a> given <var>specifier</var> and <var>baseURL</var>.<li>Let <var>normalizedSpecifier</var> be the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-2 data-x-internal=concept-url-serializer>serialization</a> of <var>asURL</var>, if <var>asURL</var> is non-null; otherwise, <var>specifier</var>.<li>Let <var>result</var> be a <a id=the-resolution-algorithm:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null, initially null.<li> <a href=https://infra.spec.whatwg.org/#list-iterate id=the-resolution-algorithm:list-iterate data-x-internal=list-iterate>For each</a> <var>scopePrefix</var> → <var>scopeImports</var> of <var>importMap</var>'s <a href=#concept-import-map-scopes id=the-resolution-algorithm:concept-import-map-scopes-2>scopes</a>: <ol><li> If <var>scopePrefix</var> is <var>serializedBaseURL</var>, or if <var>scopePrefix</var> ends with U+002F (/) and <var>scopePrefix</var> is a <a id=the-resolution-algorithm:code-unit-prefix href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of <var>serializedBaseURL</var>, then: <ol><li>Let <var>scopeImportsMatch</var> be the result of <a href=#resolving-an-imports-match id=the-resolution-algorithm:resolving-an-imports-match-2>resolving an imports match</a> given <var>normalizedSpecifier</var>, <var>asURL</var>, and <var>scopeImports</var>.<li>If <var>scopeImportsMatch</var> is not null, then set <var>result</var> to <var>scopeImportsMatch</var>, and <a id=the-resolution-algorithm:break href=https://infra.spec.whatwg.org/#iteration-break data-x-internal=break>break</a>.</ol> </ol> <li>If <var>result</var> is null, set <var>result</var> be the result of <a href=#resolving-an-imports-match id=the-resolution-algorithm:resolving-an-imports-match-3>resolving an imports match</a> given <var>normalizedSpecifier</var>, <var>asURL</var>, and <var>importMap</var>'s <a href=#concept-import-map-imports id=the-resolution-algorithm:concept-import-map-imports-2>imports</a>.<li> If <var>result</var> is null, set it to <var>asURL</var>. By this point, if <var>result</var> was null, <var>specifier</var> wasn't remapped to anything by <var>importMap</var>, but it might have been able to be turned into a URL. <li> If <var>result</var> is not null, then: <ol><li><a href=#add-module-to-resolved-module-set id=the-resolution-algorithm:add-module-to-resolved-module-set>Add module to resolved module set</a> given <var>settingsObject</var>, <var>serializedBaseURL</var>, <var>normalizedSpecifier</var>, and <var>asURL</var>.<li>Return <var>result</var>.</ol> <li>Throw a <code id=the-resolution-algorithm:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that <var>specifier</var> was a bare specifier, but was not remapped to anything by <var>importMap</var>.</ol> To <dfn id=resolving-an-imports-match>resolve an imports match</dfn>, given a <a id=the-resolution-algorithm:string-2 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>normalizedSpecifier</var>, a <a id=the-resolution-algorithm:url-5 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null <var>asURL</var>, and a <a href=#module-specifier-map id=the-resolution-algorithm:module-specifier-map-3>module specifier map</a> <var>specifierMap</var>: <ol><li> <a href=https://infra.spec.whatwg.org/#list-iterate id=the-resolution-algorithm:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>specifierKey</var> → <var>resolutionResult</var> of <var>specifierMap</var>: <ol><li> If <var>specifierKey</var> is <var>normalizedSpecifier</var>, then: <ol><li> If <var>resolutionResult</var> is null, then throw a <code id=the-resolution-algorithm:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that resolution of <var>specifierKey</var> was blocked by a null entry. This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-6>resolve a module specifier</a> algorithm, without any further fallbacks. <li><a id=the-resolution-algorithm:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>resolutionResult</var> is a <a id=the-resolution-algorithm:url-6 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.<li>Return <var>resolutionResult</var>.</ol> <li> If all of the following are true: <ul><li><var>specifierKey</var> ends with U+002F (/);<li><var>specifierKey</var> is a <a id=the-resolution-algorithm:code-unit-prefix-2 href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of <var>normalizedSpecifier</var>; and<li>either <var>asURL</var> is null, or <var>asURL</var> <a id=the-resolution-algorithm:is-special href=https://url.spec.whatwg.org/#is-special data-x-internal=is-special>is special</a>,</ul> then: <ol><li> If <var>resolutionResult</var> is null, then throw a <code id=the-resolution-algorithm:typeerror-3><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the resolution of <var>specifierKey</var> was blocked by a null entry. This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-7>resolve a module specifier</a> algorithm, without any further fallbacks. <li><a id=the-resolution-algorithm:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>resolutionResult</var> is a <a id=the-resolution-algorithm:url-7 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.<li>Let <var>afterPrefix</var> be the portion of <var>normalizedSpecifier</var> after the initial <var>specifierKey</var> prefix.<li><a id=the-resolution-algorithm:assert-4 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>resolutionResult</var>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-3 data-x-internal=concept-url-serializer>serialized</a>, ends with U+002F (/), as enforced during <a href=#parse-an-import-map-string id=the-resolution-algorithm:parse-an-import-map-string>parsing</a>.<li>Let <var>url</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-resolution-algorithm:url-parser data-x-internal=url-parser>URL parsing</a> <var>afterPrefix</var> with <var>resolutionResult</var>.<li> If <var>url</var> is failure, then throw a <code id=the-resolution-algorithm:typeerror-4><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that resolution of <var>normalizedSpecifier</var> was blocked since the <var>afterPrefix</var> portion could not be URL-parsed relative to the <var>resolutionResult</var> mapped to by the <var>specifierKey</var> prefix. This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-8>resolve a module specifier</a> algorithm, without any further fallbacks. <li><a id=the-resolution-algorithm:assert-5 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>url</var> is a <a id=the-resolution-algorithm:url-8 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.<li> If the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-4 data-x-internal=concept-url-serializer>serialization</a> of <var>resolutionResult</var> is not a <a id=the-resolution-algorithm:code-unit-prefix-3 href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-resolution-algorithm:concept-url-serializer-5 data-x-internal=concept-url-serializer>serialization</a> of <var>url</var>, then throw a <code id=the-resolution-algorithm:typeerror-5><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the resolution of <var>normalizedSpecifier</var> was blocked due to it backtracking above its prefix <var>specifierKey</var>. This will terminate the entire <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-9>resolve a module specifier</a> algorithm, without any further fallbacks. <li>Return <var>url</var>.</ol> </ol> <li> Return null. The <a href=#resolve-a-module-specifier id=the-resolution-algorithm:resolve-a-module-specifier-10>resolve a module specifier</a> algorithm will fall back to a less-specific scope, or to "<code>imports</code>", if possible. </ol> To <dfn id=resolving-a-url-like-module-specifier>resolve a URL-like module specifier</dfn>, given a <a id=the-resolution-algorithm:string-3 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>specifier</var> and a <a id=the-resolution-algorithm:url-9 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>: <ol><li> If <var>specifier</var> <a id=the-resolution-algorithm:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>/</code>", "<code>./</code>", or "<code>../</code>", then: <ol><li>Let <var>url</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-resolution-algorithm:url-parser-2 data-x-internal=url-parser>URL parsing</a> <var>specifier</var> with <var>baseURL</var>.<li> If <var>url</var> is failure, then return null. One way this could happen is if <var>specifier</var> is "<code>../foo</code>" and <var>baseURL</var> is a <code id=the-resolution-algorithm:data-protocol><a data-x-internal=data-protocol href=https://www.rfc-editor.org/rfc/rfc2397#section-2>data:</a></code> URL. <li>Return <var>url</var>.</ol> This includes cases where <var>specifier</var> <a id=the-resolution-algorithm:starts-with-2 href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>//</code>", i.e., scheme-relative URLs. Thus, <var>url</var> might end up with a different <a href=https://url.spec.whatwg.org/#concept-url-host id=the-resolution-algorithm:concept-url-host data-x-internal=concept-url-host>host</a> than <var>baseURL</var>. <li>Let <var>url</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=the-resolution-algorithm:url-parser-3 data-x-internal=url-parser>URL parsing</a> <var>specifier</var> (with no base URL).<li>If <var>url</var> is failure, then return null.<li>Return <var>url</var>. </ol> <h5 id=import-maps>8.1.5.2 Import maps<a href=#import-maps class=self-link></a></h5> An <a href=#import-map id=import-map-dev>import map</a> allows control over module specifier resolution. Import maps are delivered via inline <code id=import-maps:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements with their <code id=import-maps:attr-script-type><a href=scripting.html#attr-script-type>type</a></code> attribute set to "<code>importmap</code>", and with their <a id=import-maps:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> containing a JSON representation of the import map. A <code id=import-maps:document><a href=dom.html#document>Document</a></code> can have multiple import maps processed, which can happen either before or after any modules have been imported, e.g., via <code id=import-maps:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expressions or <code id=import-maps:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> elements with their <code id=import-maps:attr-script-type-2><a href=scripting.html#attr-script-type>type</a></code> attribute set to "<code>module</code>". The <a href=#merge-existing-and-new-import-maps id=import-maps:merge-existing-and-new-import-maps>merge existing and new import maps</a> algorithm ensures that new import maps cannot define the module resolution for modules that were already defined by past import maps, or for ones that were already resolved. <div id=example-import-map-bare-specifier class=example> The simplest use of import maps is to globally remap a bare module specifier: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"moment"</c-><c- o>:</c-> <c- u>"/node_modules/moment/src/moment.js"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> This enables statements like <code class=js>import moment from "moment";</code> to work, fetching and evaluating the JavaScript module at the <code>/node_modules/moment/src/moment.js</code> URL. </div> <div id=example-import-map-trailing-slashes class=example> An import map can remap a class of module specifiers into a class of URLs by using trailing slashes, like so: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"moment/"</c-><c- o>:</c-> <c- u>"/node_modules/moment/src/"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> This enables statements like <code class=js>import localeData from "moment/locale/zh-cn.js";</code> to work, fetching and evaluating the JavaScript module at the <code>/node_modules/moment/src/locale/zh-cn.js</code> URL. Such trailing-slash mappings are often combined with bare-specifier mappings, e.g. <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"moment"</c-><c- o>:</c-> <c- u>"/node_modules/moment/src/moment.js"</c-><c- p>,</c-> <c- u>"moment/"</c-><c- o>:</c-> <c- u>"/node_modules/moment/src/"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> so that both the "main module" specified by "<code>moment</code>" and the "submodules" specified by paths such as "<code>moment/locale/zh-cn.js</code>" are available. </div> <div id=example-import-map-url-like-specifier class=example> Bare specifiers are not the only type of module specifiers which import maps can remap. "URL-like" specifiers, i.e., those that are either parseable as absolute URLs or start with "<code>/</code>", "<code>./</code>", or "<code>../</code>", can be remapped as well: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"https://cdn.example.com/vue/dist/vue.runtime.esm.js"</c-><c- o>:</c-> <c- u>"/node_modules/vue/dist/vue.runtime.esm.js"</c-><c- p>,</c-> <c- u>"/js/app.mjs"</c-><c- o>:</c-> <c- u>"/js/app-8e0d62a03.mjs"</c-><c- p>,</c-> <c- u>"../helpers/"</c-><c- o>:</c-> <c- u>"https://cdn.example/helpers/"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> Note how the URL to be remapped, as well as the URL being mapped to, can be specified either as absolute URLs, or as relative URLs starting with "<code>/</code>", "<code>./</code>", or "<code>../</code>". (They cannot be specified as relative URLs without those starting sigils, as those help distinguish from bare module specifiers.) Also note how the <a href=#example-import-map-trailing-slashes>trailing slash mapping</a> works in this context as well. Such remappings operate on the post-canonicalization URL, and do not require a match between the literal strings supplied in the import map key and the imported module specifier. So for example, if this import map was included on <code>https://example.com/app.html</code>, then not only would <code class=js>import "/js/app.mjs"</code> be remapped, but so would <code class=js>import "./js/app.mjs"</code> and <code class=js>import "./foo/../js/app.mjs"</code>. </div> <div id=example-import-map-scopes class=example> All previous examples have globally remapped module specifiers, by using the top-level "<code>imports</code>" key in the import map. The top-level "<code>scopes</code>" key can be used to provide localized remappings, which only apply when the referring module matches a specific URL prefix. For example: <pre><code class='json'><c- p>{</c-> <c- u>"scopes"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/a/"</c-> <c- o>:</c-> <c- p>{</c-> <c- u>"moment"</c-><c- o>:</c-> <c- u>"/node_modules/moment/src/moment.js"</c-> <c- p>},</c-> <c- u>"/b/"</c-> <c- o>:</c-> <c- p>{</c-> <c- u>"moment"</c-><c- o>:</c-> <c- u>"https://cdn.example.com/moment/src/moment.js"</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-></code></pre> With this import map, the statement <code>import "moment"</code> will have different meanings depending on which referrer script contains the statement: <ul><li>Inside scripts located under <code>/a/</code>, this will import <code>/node_modules/moment/src/moment.js</code>.<li>Inside scripts located under <code>/b/</code>, this will import <code>https://cdn.example.com/moment/src/moment.js</code>.<li>Inside scripts located under <code>/c/</code>, this will fail to resolve and thus throw an exception.</ul> A typical usage of scopes is to allow multiple versions of the "same" module to exist in a web application, with some parts of the module graph importing one version, and other parts importing another version. </div> <div id=example-import-map-scopes-overlapping class=example> Scopes can overlap each other, and overlap the global "<code>imports</code>" specifier map. At resolution time, scopes are consulted in order of most- to least-specific, where specificity is measured by sorting the scopes using the <a id=import-maps:code-unit-less-than href=https://infra.spec.whatwg.org/#code-unit-less-than data-x-internal=code-unit-less-than>code unit less than</a> operation. So, for example, "<code>/scope2/scope3/</code>" is treated as more specific than "<code>/scope2/</code>", which is treated as more specific than the top-level (unscoped) mappings. The following import map illustrates this: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"a"</c-><c- o>:</c-> <c- u>"/a-1.mjs"</c-><c- p>,</c-> <c- u>"b"</c-><c- o>:</c-> <c- u>"/b-1.mjs"</c-><c- p>,</c-> <c- u>"c"</c-><c- o>:</c-> <c- u>"/c-1.mjs"</c-> <c- p>},</c-> <c- u>"scopes"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/scope2/"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"a"</c-><c- o>:</c-> <c- u>"/a-2.mjs"</c-> <c- p>},</c-> <c- u>"/scope2/scope3/"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"b"</c-><c- o>:</c-> <c- u>"/b-3.mjs"</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-></code></pre> This results in the following resolutions (using relative URLs for brevity): <table id=table-import-map-scopes-example><thead><tr><td colspan=2 rowspan=2> <th colspan=3>Specifier <tr><th>"<code>a</code>" <th>"<code>b</code>" <th>"<code>c</code>" <tbody><tr><th rowspan=3>Referrer <th><code>/scope1/r.mjs</code> <td><code>/a-1.mjs</code> <td><code>/b-1.mjs</code> <td><code>/c-1.mjs</code> <tr><th><code>/scope2/r.mjs</code> <td><code>/a-2.mjs</code> <td><code>/b-1.mjs</code> <td><code>/c-1.mjs</code> <tr><th><code>/scope2/scope3/r.mjs</code> <td><code>/a-2.mjs</code> <td><code>/b-3.mjs</code> <td><code>/c-1.mjs</code> </table> </div> <div id=example-import-map-integrity class=example> Import maps can also be used to provide modules with integrity metadata to be used in <cite>Subresource Integrity</cite> checks. <a href=references.html#refsSRI>[SRI]</a> The following import map illustrates this: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"a"</c-><c- o>:</c-> <c- u>"/a-1.mjs"</c-><c- p>,</c-> <c- u>"b"</c-><c- o>:</c-> <c- u>"/b-1.mjs"</c-><c- p>,</c-> <c- u>"c"</c-><c- o>:</c-> <c- u>"/c-1.mjs"</c-> <c- p>},</c-> <c- u>"integrity"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/a-1.mjs"</c-><c- o>:</c-> <c- u>"sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"</c-><c- p>,</c-> <c- u>"/d-1.mjs"</c-><c- o>:</c-> <c- u>"sha384-MBO5IDfYaE6c6Aao94oZrIOiC6CGiSN2n4QUbHNPhzk5Xhm0djZLQqTpL0HzTUxk"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> The above example provides integrity metadata to be enforced on the modules <code>/a-1.mjs</code> and <code>/d-1.mjs</code>, even if the latter is not defined as an import in the map. </div> <hr> The <a id=import-maps:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of a <code id=import-maps:the-script-element-3><a href=scripting.html#the-script-element>script</a></code> element representing an <a href=#import-map id=import-maps:import-map>import map</a> must match the following <dfn id=import-map-authoring-requirements>import map authoring requirements</dfn>: <ul><li>It must be valid JSON. <a href=references.html#refsJSON>[JSON]</a><li>The JSON must represent a JSON object, with at most the three keys "<code>imports</code>", "<code>scopes</code>", and "<code>integrity</code>".<li>The values corresponding to the "<code>imports</code>", "<code>scopes</code>", and "<code>integrity</code>" keys, if present, must themselves be JSON objects.<li>The value corresponding to the "<code>imports</code>" key, if present, must be a <a href=#valid-module-specifier-map id=import-maps:valid-module-specifier-map>valid module specifier map</a>.<li>The value corresponding to the "<code>scopes</code>" key, if present, must be a JSON object, whose keys are <a href=https://url.spec.whatwg.org/#valid-url-string id=import-maps:valid-url-string data-x-internal=valid-url-string>valid URL strings</a> and whose values are <a href=#valid-module-specifier-map id=import-maps:valid-module-specifier-map-2>valid module specifier maps</a>.<li>The value corresponding to the "<code>integrity</code>" key, if present, must be a JSON object, whose keys are <a href=https://url.spec.whatwg.org/#valid-url-string id=import-maps:valid-url-string-2 data-x-internal=valid-url-string>valid URL strings</a> and whose values fit <a id=import-maps:the-requirements-of-the-integrity-attribute href=https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute data-x-internal=the-requirements-of-the-integrity-attribute>the requirements of the integrity attribute</a>.</ul> A <dfn id=valid-module-specifier-map>valid module specifier map</dfn> is a JSON object that meets the following requirements: <ul><li>All of its keys must be nonempty.<li>All of its values must be strings.<li>Each value must be either a <a href=https://url.spec.whatwg.org/#syntax-url-absolute id=import-maps:absolute-url data-x-internal=absolute-url>valid absolute URL</a> or a <a id=import-maps:valid-url-string-3 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>valid URL string</a> that <a id=import-maps:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>/</code>", "<code>./</code>", or "<code>../</code>".<li>If a given key <a id=import-maps:ends-with href=https://infra.spec.whatwg.org/#string-ends-with data-x-internal=ends-with>ends with</a> "<code>/</code>", then the corresponding value must also.</ul> <h5 id=import-map-processing-model>8.1.5.3 Import map processing model<a href=#import-map-processing-model class=self-link></a></h5> Formally, an <dfn id=import-map>import map</dfn> is a <a id=import-map-processing-model:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with three <a href=https://infra.spec.whatwg.org/#struct-item id=import-map-processing-model:struct-item data-x-internal=struct-item>items</a>: <ul><li><dfn id=concept-import-map-imports>imports</dfn>, a <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map>module specifier map</a>;<li><dfn id=concept-import-map-scopes>scopes</dfn>, an <a id=import-map-processing-model:ordered-map href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> of <a href=https://url.spec.whatwg.org/#concept-url id=import-map-processing-model:url data-x-internal=url>URLs</a> to <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map-2>module specifier maps</a>; and<li><dfn id=concept-import-map-integrity>integrity</dfn>, a <a href=#module-integrity-map id=import-map-processing-model:module-integrity-map>module integrity map</a>.</ul> A <dfn id=module-specifier-map>module specifier map</dfn> is an <a id=import-map-processing-model:ordered-map-2 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> whose <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key data-x-internal=map-key>keys</a> are <a href=https://infra.spec.whatwg.org/#string id=import-map-processing-model:string data-x-internal=string>strings</a> and whose <a href=https://infra.spec.whatwg.org/#map-value id=import-map-processing-model:map-value data-x-internal=map-value>values</a> are either <a href=https://url.spec.whatwg.org/#concept-url id=import-map-processing-model:url-2 data-x-internal=url>URLs</a> or nulls. A <dfn id=module-integrity-map>module integrity map</dfn> is an <a id=import-map-processing-model:ordered-map-3 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> whose <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-2 data-x-internal=map-key>keys</a> are <a href=https://url.spec.whatwg.org/#concept-url id=import-map-processing-model:url-3 data-x-internal=url>URLs</a> and whose <a href=https://infra.spec.whatwg.org/#map-value id=import-map-processing-model:map-value-2 data-x-internal=map-value>values</a> are <a href=https://infra.spec.whatwg.org/#string id=import-map-processing-model:string-2 data-x-internal=string>strings</a> that will be used as <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=import-map-processing-model:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity metadata</a>. An <dfn id=empty-import-map>empty import map</dfn> is an <a href=#import-map id=import-map-processing-model:import-map>import map</a> with its <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports>imports</a> and <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes>scopes</a> both being empty maps. <hr> A <dfn id=specifier-resolution-record>specifier resolution record</dfn> is a <a id=import-map-processing-model:struct-2 href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a>. It has the following <a href=https://infra.spec.whatwg.org/#struct-item id=import-map-processing-model:struct-item-2 data-x-internal=struct-item>items</a>: <dl><dt>A <dfn id=specifier-resolution-record-serialized-base-url>serialized base URL</dfn><dd>A <a id=import-map-processing-model:string-3 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>-or-null that represents the base URL of the specifier, when one exists.<dt>A <dfn id=specifier-resolution-record-specifier>specifier</dfn><dd>A <a id=import-map-processing-model:string-4 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> representing the specifier.<dt>A <dfn id=specifier-resolution-record-as-url>specifier as a URL</dfn><dd>A <a id=import-map-processing-model:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null that represents the URL in case of a URL-like module specifier.</dl> Implementations can replace <a href=#specifier-resolution-record-as-url id=import-map-processing-model:specifier-resolution-record-as-url>specifier as a URL</a> with a boolean that indicates that the specifier is either bare or URL-like that <a id=import-map-processing-model:is-special href=https://url.spec.whatwg.org/#is-special data-x-internal=is-special>is special</a>. To <dfn id=add-module-to-resolved-module-set>add module to resolved module set</dfn> given an <a href=#environment-settings-object id=import-map-processing-model:environment-settings-object>environment settings object</a> <var>settingsObject</var>, a <a id=import-map-processing-model:string-5 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>serializedBaseURL</var>, a <a id=import-map-processing-model:string-6 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>normalizedSpecifier</var>, and a <a id=import-map-processing-model:url-5 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>-or-null <var>asURL</var>: <ol><li>Let <var>global</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-global id=import-map-processing-model:concept-settings-object-global>global object</a>.<li>If <var>global</var> does not implement <code id=import-map-processing-model:window><a href=nav-history-apis.html#window>Window</a></code>, then return.<li>Let <var>record</var> be a new <a href=#specifier-resolution-record id=import-map-processing-model:specifier-resolution-record>specifier resolution record</a>, with <a href=#specifier-resolution-record-serialized-base-url id=import-map-processing-model:specifier-resolution-record-serialized-base-url>serialized base URL</a> set to <var>serializedBaseURL</var>, <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier>specifier</a> set to <var>normalizedSpecifier</var>, and <a href=#specifier-resolution-record-as-url id=import-map-processing-model:specifier-resolution-record-as-url-2>specifier as a URL</a> set to <var>asURL</var>.<li><a href=https://infra.spec.whatwg.org/#set-append id=import-map-processing-model:set-append data-x-internal=set-append>Append</a> <var>record</var> to <var>global</var>'s <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set>resolved module set</a>.</ol> <hr> To <dfn id=parse-an-import-map-string>parse an import map string</dfn>, given a <a id=import-map-processing-model:string-7 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>input</var> and a <a id=import-map-processing-model:url-6 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>: <ol><li>Let <var>parsed</var> be the result of <a href=https://infra.spec.whatwg.org/#parse-a-json-string-to-an-infra-value id=import-map-processing-model:parse-a-json-string-to-an-infra-value data-x-internal=parse-a-json-string-to-an-infra-value>parsing a JSON string to an Infra value</a> given <var>input</var>.<li>If <var>parsed</var> is not an <a id=import-map-processing-model:ordered-map-4 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, then throw a <code id=import-map-processing-model:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the top-level value needs to be a JSON object.<li>Let <var>sortedAndNormalizedImports</var> be an empty <a id=import-map-processing-model:ordered-map-5 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li> If <var>parsed</var>["<code>imports</code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists data-x-internal=map-exists>exists</a>, then: <ol><li>If <var>parsed</var>["<code>imports</code>"] is not an <a id=import-map-processing-model:ordered-map-6 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, then throw a <code id=import-map-processing-model:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value for the "<code>imports</code>" top-level key needs to be a JSON object.<li>Set <var>sortedAndNormalizedImports</var> to the result of <a href=#sorting-and-normalizing-a-module-specifier-map id=import-map-processing-model:sorting-and-normalizing-a-module-specifier-map>sorting and normalizing a module specifier map</a> given <var>parsed</var>["<code>imports</code>"] and <var>baseURL</var>.</ol> <li>Let <var>sortedAndNormalizedScopes</var> be an empty <a id=import-map-processing-model:ordered-map-7 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li> If <var>parsed</var>["<code>scopes</code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-2 data-x-internal=map-exists>exists</a>, then: <ol><li>If <var>parsed</var>["<code>scopes</code>"] is not an <a id=import-map-processing-model:ordered-map-8 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, then throw a <code id=import-map-processing-model:typeerror-3><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value for the "<code>scopes</code>" top-level key needs to be a JSON object.<li>Set <var>sortedAndNormalizedScopes</var> to the result of <a href=#sorting-and-normalizing-scopes id=import-map-processing-model:sorting-and-normalizing-scopes>sorting and normalizing scopes</a> given <var>parsed</var>["<code>scopes</code>"] and <var>baseURL</var>.</ol> <li>Let <var>normalizedIntegrity</var> be an empty <a id=import-map-processing-model:ordered-map-9 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li> If <var>parsed</var>["<code>integrity</code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-3 data-x-internal=map-exists>exists</a>, then: <ol><li>If <var>parsed</var>["<code>integrity</code>"] is not an <a id=import-map-processing-model:ordered-map-10 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, then throw a <code id=import-map-processing-model:typeerror-4><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value for the "<code>integrity</code>" top-level key needs to be a JSON object.<li>Set <var>normalizedIntegrity</var> to the result of <a href=#normalizing-a-module-integrity-map id=import-map-processing-model:normalizing-a-module-integrity-map>normalizing a module integrity map</a> given <var>parsed</var>["<code>integrity</code>"] and <var>baseURL</var>.</ol> <li> If <var>parsed</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-3 data-x-internal=map-key>keys</a> <a href=https://infra.spec.whatwg.org/#list-contain id=import-map-processing-model:list-contains data-x-internal=list-contains>contains</a> any items besides "<code>imports</code>", "<code>scopes</code>", or "<code>integrity</code>", then the user agent should <a id=import-map-processing-model:report-a-warning-to-the-console href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that an invalid top-level key was present in the import map. This can help detect typos. It is not an error, because that would prevent any future extensions from being added backward-compatibly. <li>Return an <a href=#import-map id=import-map-processing-model:import-map-2>import map</a> whose <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-2>imports</a> are <var>sortedAndNormalizedImports</var>, whose <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-2>scopes</a> are <var>sortedAndNormalizedScopes</var>, and whose <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity>integrity</a> are <var>normalizedIntegrity</var>.</ol> <div id=example-import-map-normalization class=example> The <a href=#import-map id=import-map-processing-model:import-map-3>import map</a> that results from this parsing algorithm is highly normalized. For example, given a base URL of <code>https://example.com/base/page.html</code>, the input <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"node_modules/helper/index.mjs"</c-><c- p>,</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> will generate an <a href=#import-map id=import-map-processing-model:import-map-4>import map</a> with <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-3>imports</a> of <pre><code>«[ "https://example.com/app/helper" → https://example.com/base/node_modules/helper/index.mjs "lodash" → https://example.com/node_modules/lodash-es/lodash.js ]»</code></pre> and (despite nothing being present in the input string) an empty <a id=import-map-processing-model:ordered-map-11 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> for its <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-3>scopes</a>. </div> <hr> To <dfn id=merge-module-specifier-maps>merge module specifier maps</dfn>, given a <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map-3>module specifier map</a> <var>newMap</var> and a <a href=#module-specifier-map id=import-map-processing-model:module-specifier-map-4>module specifier map</a> <var>oldMap</var>: <ol><li>Let <var>mergedMap</var> be a deep copy of <var>oldMap</var>.<li> <a href=https://infra.spec.whatwg.org/#map-iterate id=import-map-processing-model:map-iterate data-x-internal=map-iterate>For each</a> <var>specifier</var> → <var>url</var> of <var>newMap</var>: <ol><li> If <var>specifier</var> <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-4 data-x-internal=map-exists>exists</a> in <var>oldMap</var>, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-2 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the ignored rule. They may choose to avoid reporting if the rule is identical to an existing one.<li><a id=import-map-processing-model:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>Set <var>mergedMap</var>[<var>specifier</var>] to <var>url</var>.</ol> <li>Return <var>mergedMap</var>.</ol> To <dfn id=merge-existing-and-new-import-maps>merge existing and new import maps</dfn>, given a <a href=#concept-settings-object-global id=import-map-processing-model:concept-settings-object-global-2>global object</a> <var>global</var> and an <a href=#import-map id=import-map-processing-model:import-map-5>import map</a> <var>newImportMap</var>: <ol><li> Let <var>newImportMapScopes</var> be a deep copy of <var>newImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-4>scopes</a>. We're mutating these copies and removing items from them when they are used to ignore scope-specific rules. This is true for <var>newImportMapScopes</var>, as well as to <var>newImportMapImports</var> below. <li>Let <var>oldImportMap</var> be <var>global</var>'s <a href=#concept-global-import-map id=import-map-processing-model:concept-global-import-map>import map</a>.<li>Let <var>newImportMapImports</var> be a deep copy of <var>newImportMap</var>'s <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-4>imports</a>.<li> <a href=https://infra.spec.whatwg.org/#map-iterate id=import-map-processing-model:map-iterate-2 data-x-internal=map-iterate>For each</a> <var>scopePrefix</var> → <var>scopeImports</var> of <var>newImportMapScopes</var>: <ol><li> <a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate data-x-internal=list-iterate>For each</a> <var>record</var> of <var>global</var>'s <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-2>resolved module set</a>: <ol><li> If <var>scopePrefix</var> is <var>record</var>'s <a href=#specifier-resolution-record-serialized-base-url id=import-map-processing-model:specifier-resolution-record-serialized-base-url-2>serialized base URL</a>, or if <var>scopePrefix</var> ends with U+002F (/) and <var>scopePrefix</var> is a <a id=import-map-processing-model:code-unit-prefix href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of <var>record</var>'s <a href=#specifier-resolution-record-serialized-base-url id=import-map-processing-model:specifier-resolution-record-serialized-base-url-3>serialized base URL</a>, then: <ol><li> <a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>specifierKey</var> → <var>resolutionResult</var> of <var>scopeImports</var>: <ol><li> If <var>specifierKey</var> is <var>record</var>'s <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier-2>specifier</a>, or if all of the following conditions are true: <ul><li><var>specifierKey</var> ends with U+002F (/);<li><var>specifierKey</var> is a <a id=import-map-processing-model:code-unit-prefix-2 href=https://infra.spec.whatwg.org/#code-unit-prefix data-x-internal=code-unit-prefix>code unit prefix</a> of <var>record</var>'s <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier-3>specifier</a>;<li>either <var>record</var>'s <a href=#specifier-resolution-record-as-url id=import-map-processing-model:specifier-resolution-record-as-url-3>specifier as a URL</a> is null or <a id=import-map-processing-model:is-special-2 href=https://url.spec.whatwg.org/#is-special data-x-internal=is-special>is special</a>,</ul> then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-3 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the ignored rule. They may choose to avoid reporting if the rule is identical to an existing one.<li>Remove <var>scopeImports</var>[<var>specifierKey</var>].</ol> </ol> </ol> </ol> Implementers are encouraged to implement a more efficient matching algorithm when working with the <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-3>resolved module set</a>. As guidance, the number of resolved/mapped modules in a large application can be on the order of thousands. <li>If <var>scopePrefix</var> <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-5 data-x-internal=map-exists>exists</a> in <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-5>scopes</a>, then set <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-6>scopes</a>[<var>scopePrefix</var>] to the result of <a href=#merge-module-specifier-maps id=import-map-processing-model:merge-module-specifier-maps>merging module specifier maps</a>, given <var>scopeImports</var> and <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-7>scopes</a>[<var>scopePrefix</var>].<li>Otherwise, set <var>oldImportMap</var>'s <a href=#concept-import-map-scopes id=import-map-processing-model:concept-import-map-scopes-8>scopes</a>[<var>scopePrefix</var>] to <var>scopeImports</var>.</ol> <li> <a href=https://infra.spec.whatwg.org/#map-iterate id=import-map-processing-model:map-iterate-3 data-x-internal=map-iterate>For each</a> <var>url</var> → <var>integrity</var> of <var>newImportMap</var>'s <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity-2>integrity</a>: <ol><li> If <var>url</var> <a href=https://infra.spec.whatwg.org/#map-exists id=import-map-processing-model:map-exists-6 data-x-internal=map-exists>exists</a> in <var>oldImportMap</var>'s <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity-3>integrity</a>, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-4 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the ignored rule. They may choose to avoid reporting if the rule is identical to an existing one.<li><a id=import-map-processing-model:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>Set <var>oldImportMap</var>'s <a href=#concept-import-map-integrity id=import-map-processing-model:concept-import-map-integrity-4>integrity</a>[<var>url</var>] to <var>integrity</var>.</ol> <li> <a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-3 data-x-internal=list-iterate>For each</a> <var>record</var> of <var>global</var>'s <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-4>resolved module set</a>: <ol><li> <a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-4 data-x-internal=list-iterate>For each</a> <var>specifier</var> → <var>url</var> of <var>newImportMapImports</var>: <ol><li> If <var>specifier</var> <a id=import-map-processing-model:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> <var>record</var>'s <a href=#specifier-resolution-record-specifier id=import-map-processing-model:specifier-resolution-record-specifier-4>specifier</a>, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-5 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating the ignored rule. They may choose to avoid reporting if the rule is identical to an existing one.<li>Remove <var>newImportMapImports</var>[<var>specifier</var>].</ol> </ol> </ol> <li>Set <var>oldImportMap</var>'s <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-5>imports</a> to the result of <a href=#merge-module-specifier-maps id=import-map-processing-model:merge-module-specifier-maps-2>merge module specifier maps</a>, given <var>newImportMapImports</var> and <var>oldImportMap</var>'s <a href=#concept-import-map-imports id=import-map-processing-model:concept-import-map-imports-6>imports</a>.</ol> The above algorithm merges a new import map into the given <a href=#environment-settings-object id=import-map-processing-model:environment-settings-object-2>environment settings object</a>'s <a href=#global-object id=import-map-processing-model:global-object>global object</a>'s <a href=#import-map id=import-map-processing-model:import-map-6>import map</a>. Let's examine a few examples: <div id=example-import-map-merge-unrelated class=example> There are two cases when rules of the new import map don't get merged into the existing one. <ol><li>The new import map rule has the exact same scope and specifier as a rule in the existing import map. We'll call that "conflicting rule".<li>The new import map rule may impact the resolution of an already resolved module. We'll call that "impacted already resolved module".</ol> When the new import map has no conflicting rules, and there are no impacted resolved modules, the resulting map would be a combination of the new and existing maps. Rules that would have individually impacted similar modules (e.g. "/app/" and "/app/helper") but are not an exact match are not conflicting, and all make it to the merged map. So, the following existing and new import maps: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- u>"./original-app/"</c-><c- p>,</c-> <c- p>}</c-> <c- p>}</c-></code> <code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/index.mjs"</c-> <c- p>},</c-> <c- u>"scopes"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/js"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- u>"./js-app/"</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-></code></pre> Would be equivalent to the following single import map: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- u>"./original-app/"</c-><c- p>,</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/index.mjs"</c-> <c- p>},</c-> <c- u>"scopes"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/js"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- u>"./js-app/"</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-></code></pre> </div> <div id=example-import-map-merge-conflict-imports class=example> When the new import map impacts an already resolved module, that rule gets dropped from the import map. So, if the <a href=#resolved-module-set id=import-map-processing-model:resolved-module-set-5>resolved module set</a> already contains the "<code>/app/helper</code>", the following new import map: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/index.mjs"</c-><c- p>,</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> Would be equivalent to the following one: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> </div> <div id=example-import-map-merge-conflict-scopes class=example> The same is true for rules that impact already resolved modules defined in specific scopes. If we already resolved "<code>/app/helper</code>" from "<code>/app/main.mjs</code>" the following new import map: <pre><code class='json'><c- p>{</c-> <c- u>"scopes"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/index.mjs"</c-> <c- p>}</c-> <c- p>},</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> Would similarly be equivalent to: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> </div> <div id=example-import-map-merge-conflict-imports-and-scopes class=example> We could also have cases where a single already-resolved module specifier has multiple rules for its resolution, depending on the referring script. In such cases, only the relevant rules would not be added to the map. For example, if we already resolved "<code>/app/helper</code>" from "<code>/app/vendor/main.mjs</code>", the following new import map: <pre><code class='json'><c- p>{</c-> <c- u>"scopes"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/index.mjs"</c-> <c- p>},</c-> <c- u>"/app/vendor/"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- u>"./vendor_helper/"</c-> <c- p>},</c-> <c- u>"/vendor/"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/vendor_index.mjs"</c-> <c- p>}</c-> <c- p>},</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- u>"/app/"</c-><c- o>:</c-> <c- u>"./general_app_path/"</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./other_path/helper/index.mjs"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> Would be equivalent to: <pre><code class='json'><c- p>{</c-> <c- u>"scopes"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/vendor/"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/vendor_index.mjs"</c-> <c- p>}</c-> <c- p>},</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> This is achieved by the fact that the merge algorithm tracks already resolved modules and removes rules affecting them from new import maps before they are merged into the existing one. </div> <div id=example-import-map-merge-two-map-conflict class=example> When the new import map has conflicting rules to the existing import map, with no impacted already resolved modules, the existing import map rules persist. For example, the following existing and new import maps: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/index.mjs"</c-><c- p>,</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-> <c- p>}</c-> <c- p>}</c-></code> <code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./main/helper/index.mjs"</c-> <c- p>}</c-> <c- p>}</c-></code></pre> Would be equivalent to the following single import map: <pre><code class='json'><c- p>{</c-> <c- u>"imports"</c-><c- o>:</c-> <c- p>{</c-> <c- u>"/app/helper"</c-><c- o>:</c-> <c- u>"./helper/index.mjs"</c-><c- p>,</c-> <c- u>"lodash"</c-><c- o>:</c-> <c- u>"/node_modules/lodash-es/lodash.js"</c-><c- p>,</c-> <c- p>}</c-> <c- p>}</c-></code></pre> </div> To <dfn id=sorting-and-normalizing-a-module-specifier-map>sort and normalize a module specifier map</dfn>, given an <a id=import-map-processing-model:ordered-map-12 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> <var>originalMap</var> and a <a id=import-map-processing-model:url-7 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>: <ol><li>Let <var>normalized</var> be an empty <a id=import-map-processing-model:ordered-map-13 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li> <a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-5 data-x-internal=list-iterate>For each</a> <var>specifierKey</var> → <var>value</var> of <var>originalMap</var>: <ol><li>Let <var>normalizedSpecifierKey</var> be the result of <a href=#normalizing-a-specifier-key id=import-map-processing-model:normalizing-a-specifier-key>normalizing a specifier key</a> given <var>specifierKey</var> and <var>baseURL</var>.<li>If <var>normalizedSpecifierKey</var> is null, then <a id=import-map-processing-model:continue-3 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li> If <var>value</var> is not a <a id=import-map-processing-model:string-8 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-6 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that addresses need to be strings.<li>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to null.<li><a id=import-map-processing-model:continue-4 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>Let <var>addressURL</var> be the result of <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier>resolving a URL-like module specifier</a> given <var>value</var> and <var>baseURL</var>.<li> If <var>addressURL</var> is null, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-7 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that the address was invalid.<li>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to null.<li><a id=import-map-processing-model:continue-5 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li> If <var>specifierKey</var> ends with U+002F (/), and the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=import-map-processing-model:concept-url-serializer data-x-internal=concept-url-serializer>serialization</a> of <var>addressURL</var> does not end with U+002F (/), then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-8 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that an invalid address was given for the specifier key <var>specifierKey</var>; since <var>specifierKey</var> ends with a slash, the address needs to as well.<li>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to null.<li><a id=import-map-processing-model:continue-6 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>Set <var>normalized</var>[<var>normalizedSpecifierKey</var>] to <var>addressURL</var>.</ol> <li>Return the result of <a href=https://infra.spec.whatwg.org/#map-sort-in-descending-order id=import-map-processing-model:map-sort-descending data-x-internal=map-sort-descending>sorting in descending order</a> <var>normalized</var>, with an entry <var>a</var> being less than an entry <var>b</var> if <var>a</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-4 data-x-internal=map-key>key</a> is <a id=import-map-processing-model:code-unit-less-than href=https://infra.spec.whatwg.org/#code-unit-less-than data-x-internal=code-unit-less-than>code unit less than</a> <var>b</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-5 data-x-internal=map-key>key</a>.</ol> To <dfn id=sorting-and-normalizing-scopes>sort and normalize scopes</dfn>, given an <a id=import-map-processing-model:ordered-map-14 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> <var>originalMap</var> and a <a id=import-map-processing-model:url-8 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>: <ol><li>Let <var>normalized</var> be an empty <a id=import-map-processing-model:ordered-map-15 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li> <a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-6 data-x-internal=list-iterate>For each</a> <var>scopePrefix</var> → <var>potentialSpecifierMap</var> of <var>originalMap</var>: <ol><li>If <var>potentialSpecifierMap</var> is not an <a id=import-map-processing-model:ordered-map-16 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>, then throw a <code id=import-map-processing-model:typeerror-5><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> indicating that the value of the scope with prefix <var>scopePrefix</var> needs to be a JSON object.<li>Let <var>scopePrefixURL</var> be the result of <a href=https://url.spec.whatwg.org/#concept-url-parser id=import-map-processing-model:url-parser data-x-internal=url-parser>URL parsing</a> <var>scopePrefix</var> with <var>baseURL</var>.<li> If <var>scopePrefixURL</var> is failure, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-9 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> that the scope prefix URL was not parseable.<li><a id=import-map-processing-model:continue-7 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>Let <var>normalizedScopePrefix</var> be the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=import-map-processing-model:concept-url-serializer-2 data-x-internal=concept-url-serializer>serialization</a> of <var>scopePrefixURL</var>.<li>Set <var>normalized</var>[<var>normalizedScopePrefix</var>] to the result of <a href=#sorting-and-normalizing-a-module-specifier-map id=import-map-processing-model:sorting-and-normalizing-a-module-specifier-map-2>sorting and normalizing a module specifier map</a> given <var>potentialSpecifierMap</var> and <var>baseURL</var>.</ol> <li>Return the result of <a href=https://infra.spec.whatwg.org/#map-sort-in-descending-order id=import-map-processing-model:map-sort-descending-2 data-x-internal=map-sort-descending>sorting in descending order</a> <var>normalized</var>, with an entry <var>a</var> being less than an entry <var>b</var> if <var>a</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-6 data-x-internal=map-key>key</a> is <a id=import-map-processing-model:code-unit-less-than-2 href=https://infra.spec.whatwg.org/#code-unit-less-than data-x-internal=code-unit-less-than>code unit less than</a> <var>b</var>'s <a href=https://infra.spec.whatwg.org/#map-key id=import-map-processing-model:map-key-7 data-x-internal=map-key>key</a>.</ol> In the above two algorithms, sorting keys and scopes in descending order has the effect of putting "<code>foo/bar/</code>" before "<code>foo/</code>". This in turn gives "<code>foo/bar/</code>" a higher priority than "<code>foo/</code>" during <a href=#resolve-a-module-specifier id=import-map-processing-model:resolve-a-module-specifier>module specifier resolution</a>. To <dfn id=normalizing-a-module-integrity-map>normalize a module integrity map</dfn>, given an <a id=import-map-processing-model:ordered-map-17 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a> <var>originalMap</var>: <ol><li>Let <var>normalized</var> be an empty <a id=import-map-processing-model:ordered-map-18 href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li> <a href=https://infra.spec.whatwg.org/#list-iterate id=import-map-processing-model:list-iterate-7 data-x-internal=list-iterate>For each</a> <var>key</var> → <var>value</var> of <var>originalMap</var>: <ol><li> Let <var>resolvedURL</var> be the result of <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier-2>resolving a URL-like module specifier</a> given <var>key</var> and <var>baseURL</var>. Unlike "<code>imports</code>", keys of the integrity map are treated as URLs, not module specifiers. However, we use the <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier-3>resolve a URL-like module specifier</a> algorithm to prohibit "bare" relative URLs like <code>foo</code>, which could be mistaken for module specifiers. <li> If <var>resolvedURL</var> is null, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-10 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that the key failed to resolve.<li><a id=import-map-processing-model:continue-8 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li> If <var>value</var> is not a <a id=import-map-processing-model:string-9 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-11 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=import-map-processing-model:concept-request-integrity-metadata-2 data-x-internal=concept-request-integrity-metadata>integrity metadata</a> values need to be <a href=https://infra.spec.whatwg.org/#string id=import-map-processing-model:string-10 data-x-internal=string>strings</a>.<li><a id=import-map-processing-model:continue-9 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>Set <var>normalized</var>[<var>resolvedURL</var>] to <var>value</var>.</ol> <li>Return <var>normalized</var>.</ol> To <dfn id=normalizing-a-specifier-key>normalize a specifier key</dfn>, given a <a id=import-map-processing-model:string-11 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>specifierKey</var> and a <a id=import-map-processing-model:url-9 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>baseURL</var>: <ol><li> If <var>specifierKey</var> is the empty string, then: <ol><li>The user agent may <a id=import-map-processing-model:report-a-warning-to-the-console-12 href=https://console.spec.whatwg.org/#report-a-warning-to-the-console data-x-internal=report-a-warning-to-the-console>report a warning to the console</a> indicating that specifier keys may not be the empty string.<li>Return null.</ol> <li>Let <var>url</var> be the result of <a href=#resolving-a-url-like-module-specifier id=import-map-processing-model:resolving-a-url-like-module-specifier-4>resolving a URL-like module specifier</a>, given <var>specifierKey</var> and <var>baseURL</var>.<li>If <var>url</var> is not null, then return the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=import-map-processing-model:concept-url-serializer-3 data-x-internal=concept-url-serializer>serialization</a> of <var>url</var>.<li>Return <var>specifierKey</var>.</ol> <h4 id=javascript-specification-host-hooks>8.1.6 JavaScript specification host hooks<a href=#javascript-specification-host-hooks class=self-link></a></h4> The JavaScript specification contains a number of <a id=javascript-specification-host-hooks:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> abstract operations, that vary depending on the host environment. This section defines them for user agent hosts. <h5 id=the-hostensurecanaddprivateelement-implementation>8.1.6.1 <dfn>HostEnsureCanAddPrivateElement</dfn>(<var>O</var>)<a href=#the-hostensurecanaddprivateelement-implementation class=self-link></a></h5> JavaScript contains an <a id=the-hostensurecanaddprivateelement-implementation:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostensurecanaddprivateelement id=the-hostensurecanaddprivateelement-implementation:js-hostensurecanaddprivateelement data-x-internal=js-hostensurecanaddprivateelement>HostEnsureCanAddPrivateElement</a>(<var>O</var>) abstract operation. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>If <var>O</var> is a <code id=the-hostensurecanaddprivateelement-implementation:windowproxy><a href=nav-history-apis.html#windowproxy>WindowProxy</a></code> object, or <a id=the-hostensurecanaddprivateelement-implementation:implements href=https://webidl.spec.whatwg.org/#implements data-x-internal=implements>implements</a> <code id=the-hostensurecanaddprivateelement-implementation:location><a href=nav-history-apis.html#location>Location</a></code>, then return Completion { [[Type]]: throw, [[Value]]: a new <code id=the-hostensurecanaddprivateelement-implementation:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> }.<li>Return <a id=the-hostensurecanaddprivateelement-implementation:normalcompletion href=https://tc39.es/ecma262/#sec-normalcompletion data-x-internal=normalcompletion>NormalCompletion</a>(unused).</ol> JavaScript private fields can be applied to arbitrary objects. Since this can dramatically complicate implementation for particularly-exotic host objects, the JavaScript language specification provides this hook to allow hosts to reject private fields on objects meeting a host-defined criteria. In the case of HTML, <code id=the-hostensurecanaddprivateelement-implementation:windowproxy-2><a href=nav-history-apis.html#windowproxy>WindowProxy</a></code> and <code id=the-hostensurecanaddprivateelement-implementation:location-2><a href=nav-history-apis.html#location>Location</a></code> have complicated semantics — particularly around navigation and security — that make implementation of private field semantics challenging, so our implementation simply rejects those objects. <h5 id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg)>8.1.6.2 <dfn>HostEnsureCanCompileStrings</dfn>(<var>realm</var>, <var>parameterStrings</var>, <var>bodyString</var>, <var>codeString</var>, <var>compilationType</var>, <var>parameterArgs</var>, <var>bodyArg</var>)<a href=#hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg) class=self-link></a></h5> JavaScript contains an <a id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg):implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-dynamic-code-brand-checks/#sec-hostensurecancompilestrings id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg):js-hostensurecancompilestrings data-x-internal=js-hostensurecancompilestrings>HostEnsureCanCompileStrings</a> abstract operation, redefined by the <cite>Dynamic Code Brand Checks</cite> proposal. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <a href=references.html#refsJSDYNAMICCODEBRANDCHECKS>[JSDYNAMICCODEBRANDCHECKS]</a> <ol><li>Perform ? <a href=https://w3c.github.io/webappsec-csp/#can-compile-strings id=hostensurecancompilestrings(realm,-parameterstrings,-bodystring,-codestring,-compilationtype,-parameterargs,-bodyarg):csp-ensurecspdoesnotblockstringcompilation data-x-internal=csp-ensurecspdoesnotblockstringcompilation>EnsureCSPDoesNotBlockStringCompilation</a>(<var>realm</var>, <var>parameterStrings</var>, <var>bodyString</var>, <var>codeString</var>, <var>compilationType</var>, <var>parameterArgs</var>, <var>bodyArg</var>). <a href=references.html#refsCSP>[CSP]</a></ol> <h5 id=hostgetcodeforeval(argument)>8.1.6.3 <dfn>HostGetCodeForEval</dfn>(<var>argument</var>)<a href=#hostgetcodeforeval(argument) class=self-link></a></h5> The <cite>Dynamic Code Brand Checks</cite> proposal contains an <a id=hostgetcodeforeval(argument):implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-dynamic-code-brand-checks/#sec-hostgetcodeforeval id=hostgetcodeforeval(argument):js-hostgetcodeforeval data-x-internal=js-hostgetcodeforeval>HostGetCodeForEval</a>(<var>argument</var>) abstract operation. User agents must use the following implementation: <a href=references.html#refsJSDYNAMICCODEBRANDCHECKS>[JSDYNAMICCODEBRANDCHECKS]</a> <ol><li>If <var>argument</var> is a <code id=hostgetcodeforeval(argument):tt-trustedscript><a data-x-internal=tt-trustedscript href=https://w3c.github.io/trusted-types/dist/spec/#trusted-script>TrustedScript</a></code> object, then return <var>argument</var>'s <a href=https://w3c.github.io/trusted-types/dist/spec/#trustedscript-data id=hostgetcodeforeval(argument):tt-trustedscript-data data-x-internal=tt-trustedscript-data>data</a>.<li>Otherwise, return no-code.</ol> <h5 id=the-hostpromiserejectiontracker-implementation>8.1.6.4 <dfn>HostPromiseRejectionTracker</dfn>(<var>promise</var>, <var>operation</var>)<a href=#the-hostpromiserejectiontracker-implementation class=self-link></a></h5> JavaScript contains an <a id=the-hostpromiserejectiontracker-implementation:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-host-promise-rejection-tracker id=the-hostpromiserejectiontracker-implementation:js-hostpromiserejectiontracker data-x-internal=js-hostpromiserejectiontracker>HostPromiseRejectionTracker</a>(<var>promise</var>, <var>operation</var>) abstract operation. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>script</var> be the <a href=#running-script id=the-hostpromiserejectiontracker-implementation:running-script>running script</a>.<li>If <var>script</var> is a <a href=#classic-script id=the-hostpromiserejectiontracker-implementation:classic-script>classic script</a> and <var>script</var>'s <a href=#muted-errors id=the-hostpromiserejectiontracker-implementation:muted-errors>muted errors</a> is true, then return.<li>Let <var>settingsObject</var> be the <a href=#current-settings-object id=the-hostpromiserejectiontracker-implementation:current-settings-object>current settings object</a>.<li>If <var>script</var> is not null, then set <var>settingsObject</var> to <var>script</var>'s <a href=#settings-object id=the-hostpromiserejectiontracker-implementation:settings-object>settings object</a>.<li>Let <var>global</var> be <var>settingsObject</var>'s <a href=#concept-settings-object-global id=the-hostpromiserejectiontracker-implementation:concept-settings-object-global>global object</a>.<li> If <var>operation</var> is "<code>reject</code>", then: <ol><li><a href=https://infra.spec.whatwg.org/#list-append id=the-hostpromiserejectiontracker-implementation:list-append data-x-internal=list-append>Append</a> <var>promise</var> to <var>global</var>'s <a href=#about-to-be-notified-rejected-promises-list id=the-hostpromiserejectiontracker-implementation:about-to-be-notified-rejected-promises-list>about-to-be-notified rejected promises list</a>.</ol> <li> If <var>operation</var> is "<code>handle</code>", then: <ol><li>If <var>global</var>'s <a href=#about-to-be-notified-rejected-promises-list id=the-hostpromiserejectiontracker-implementation:about-to-be-notified-rejected-promises-list-2>about-to-be-notified rejected promises list</a> <a href=https://infra.spec.whatwg.org/#list-contain id=the-hostpromiserejectiontracker-implementation:list-contains data-x-internal=list-contains>contains</a> <var>promise</var>, then <a href=https://infra.spec.whatwg.org/#list-remove id=the-hostpromiserejectiontracker-implementation:list-remove data-x-internal=list-remove>remove</a> <var>promise</var> from that list and return.<li>If <var>global</var>'s <a href=#outstanding-rejected-promises-weak-set id=the-hostpromiserejectiontracker-implementation:outstanding-rejected-promises-weak-set>outstanding rejected promises weak set</a> does not <a href=https://infra.spec.whatwg.org/#list-contain id=the-hostpromiserejectiontracker-implementation:list-contains-2 data-x-internal=list-contains>contain</a> <var>promise</var>, then return.<li><a href=https://infra.spec.whatwg.org/#list-remove id=the-hostpromiserejectiontracker-implementation:list-remove-2 data-x-internal=list-remove>Remove</a> <var>promise</var> from <var>global</var>'s <a href=#outstanding-rejected-promises-weak-set id=the-hostpromiserejectiontracker-implementation:outstanding-rejected-promises-weak-set-2>outstanding rejected promises weak set</a>.<li><a href=#queue-a-global-task id=the-hostpromiserejectiontracker-implementation:queue-a-global-task>Queue a global task</a> on the <a href=#dom-manipulation-task-source id=the-hostpromiserejectiontracker-implementation:dom-manipulation-task-source>DOM manipulation task source</a> given <var>global</var> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-hostpromiserejectiontracker-implementation:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=the-hostpromiserejectiontracker-implementation:event-rejectionhandled><a href=indices.html#event-rejectionhandled>rejectionhandled</a></code> at <var>global</var>, using <code id=the-hostpromiserejectiontracker-implementation:promiserejectionevent><a href=#promiserejectionevent>PromiseRejectionEvent</a></code>, with the <code id=the-hostpromiserejectiontracker-implementation:dom-promiserejectionevent-promise><a href=#dom-promiserejectionevent-promise>promise</a></code> attribute initialized to <var>promise</var>, and the <code id=the-hostpromiserejectiontracker-implementation:dom-promiserejectionevent-reason><a href=#dom-promiserejectionevent-reason>reason</a></code> attribute initialized to <var>promise</var>.[[PromiseResult]].</ol> </ol> <h5 id=hostsystemutcepochnanoseconds>8.1.6.5 <dfn>HostSystemUTCEpochNanoseconds</dfn>(<var>global</var>)<a href=#hostsystemutcepochnanoseconds class=self-link></a></h5> The Temporal proposal contains an <a id=hostsystemutcepochnanoseconds:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-temporal/#sec-hostsystemutcepochnanoseconds id=hostsystemutcepochnanoseconds:js-hostsystemutcepochnanoseconds data-x-internal=js-hostsystemutcepochnanoseconds>HostSystemUTCEpochNanoseconds</a> abstract operation. User agents must use the following implementation: <a href=references.html#refsJSTEMPORAL>[JSTEMPORAL]</a> <ol><li>Let <var>settingsObject</var> be <var>global</var>'s <a href=#relevant-settings-object id=hostsystemutcepochnanoseconds:relevant-settings-object>relevant settings object</a>.<li>Let <var>time</var> be <var>settingsObject</var>'s <a id=hostsystemutcepochnanoseconds:current-wall-time href=https://w3c.github.io/hr-time/#dfn-current-wall-time data-x-internal=current-wall-time>current wall time</a>.<li>Let <var>ns</var> be the number of nanoseconds from the <a id=hostsystemutcepochnanoseconds:unix-epoch href=https://w3c.github.io/hr-time/#dfn-unix-epoch data-x-internal=unix-epoch>Unix epoch</a> to <var>time</var>, rounded to the nearest integer.<li>Return the result of <a id=hostsystemutcepochnanoseconds:clamping href=https://tc39.es/ecma262/#clamping data-x-internal=clamping>clamping</a> <var>ns</var> between <a id=hostsystemutcepochnanoseconds:nsmininstant href=https://tc39.es/proposal-temporal/#eqn-nsMinInstant data-x-internal=nsmininstant>nsMinInstant</a> and <a id=hostsystemutcepochnanoseconds:nsmaxinstant href=https://tc39.es/proposal-temporal/#eqn-nsMaxInstant data-x-internal=nsmaxinstant>nsMaxInstant</a>.</ol> <h5 id=integration-with-javascript-jobs>8.1.6.6 Job-related host hooks<a href=#integration-with-javascript-jobs class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>⚠MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Incumbent_settings_object_tracking title="The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.">Reference/Global_Objects/Promise#Incumbent_settings_object_tracking</a>Support in one engine only.<div class=support>Firefox50+SafariNoChromeNo<hr>Opera?EdgeNo<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The JavaScript specification defines Jobs to be scheduled and run later by the host, as well as <a href=https://tc39.es/ecma262/#sec-jobcallback-records id=integration-with-javascript-jobs:jobcallback-record data-x-internal=jobcallback-record>JobCallback Records</a> which encapsulate JavaScript functions that are called as part of jobs. The JavaScript specification contains a number of <a id=integration-with-javascript-jobs:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> abstract operations that lets the host define how jobs are scheduled and how JobCallbacks are handled. HTML uses these abstract operations to track the <a href=#incumbent-settings-object id=integration-with-javascript-jobs:incumbent-settings-object>incumbent settings object</a> in promises and <code id=integration-with-javascript-jobs:finalizationregistry><a data-x-internal=finalizationregistry href=https://tc39.es/ecma262/#sec-finalization-registry-objects>FinalizationRegistry</a></code> callbacks by saving and restoring the <a href=#incumbent-settings-object id=integration-with-javascript-jobs:incumbent-settings-object-2>incumbent settings object</a> and a <a id=integration-with-javascript-jobs:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> for the <a href=#active-script id=integration-with-javascript-jobs:active-script>active script</a> in JobCallbacks. This section defines them for user agent hosts. <h6 id=hostcalljobcallback>8.1.6.6.1 <dfn>HostCallJobCallback</dfn>(<var>callback</var>, <var>V</var>, <var>argumentsList</var>)<a href=#hostcalljobcallback class=self-link></a></h6> JavaScript contains an <a id=hostcalljobcallback:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostcalljobcallback id=hostcalljobcallback:js-hostcalljobcallback data-x-internal=js-hostcalljobcallback>HostCallJobCallback</a>(<var>callback</var>, <var>V</var>, <var>argumentsList</var>) abstract operation to let hosts restore state when invoking JavaScript callbacks from inside tasks. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>incumbent settings</var> be <var>callback</var>.[[HostDefined]].[[IncumbentSettings]].<li>Let <var>script execution context</var> be <var>callback</var>.[[HostDefined]].[[ActiveScriptContext]].<li> <a href=#prepare-to-run-a-callback id=hostcalljobcallback:prepare-to-run-a-callback>Prepare to run a callback</a> with <var>incumbent settings</var>. This affects the <a href=#concept-incumbent-everything id=hostcalljobcallback:concept-incumbent-everything>incumbent</a> concept while the callback runs. <li> If <var>script execution context</var> is not null, then <a href=https://infra.spec.whatwg.org/#stack-push id=hostcalljobcallback:stack-push data-x-internal=stack-push>push</a> <var>script execution context</var> onto the <a id=hostcalljobcallback:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>. This affects the <a href=#active-script id=hostcalljobcallback:active-script>active script</a> while the callback runs. <li>Let <var>result</var> be <a id=hostcalljobcallback:call href=https://tc39.es/ecma262/#sec-call data-x-internal=call>Call</a>(<var>callback</var>.[[Callback]], <var>V</var>, <var>argumentsList</var>).<li>If <var>script execution context</var> is not null, then <a href=https://infra.spec.whatwg.org/#stack-pop id=hostcalljobcallback:stack-pop data-x-internal=stack-pop>pop</a> <var>script execution context</var> from the <a id=hostcalljobcallback:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li><a href=#clean-up-after-running-a-callback id=hostcalljobcallback:clean-up-after-running-a-callback>Clean up after running a callback</a> with <var>incumbent settings</var>.<li>Return <var>result</var>.</ol> <h6 id=hostenqueuefinalizationregistrycleanupjob>8.1.6.6.2 <dfn>HostEnqueueFinalizationRegistryCleanupJob</dfn>(<var>finalizationRegistry</var>)<a href=#hostenqueuefinalizationregistrycleanupjob class=self-link></a></h6> JavaScript has the ability to register objects with <code id=hostenqueuefinalizationregistrycleanupjob:finalizationregistry><a data-x-internal=finalizationregistry href=https://tc39.es/ecma262/#sec-finalization-registry-objects>FinalizationRegistry</a></code> objects, in order to schedule a cleanup action if they are found to be garbage collected. The JavaScript specification contains an <a id=hostenqueuefinalizationregistrycleanupjob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-host-cleanup-finalization-registry id=hostenqueuefinalizationregistrycleanupjob:js-hostenqueuefinalizationregistrycleanupjob data-x-internal=js-hostenqueuefinalizationregistrycleanupjob>HostEnqueueFinalizationRegistryCleanupJob</a>(<var>finalizationRegistry</var>) abstract operation to schedule the cleanup action. The timing and occurrence of cleanup work is <a id=hostenqueuefinalizationregistrycleanupjob:implementation-defined-2 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> in the JavaScript specification. User agents might differ in when and whether an object is garbage collected, affecting both whether the return value of the <code id=hostenqueuefinalizationregistrycleanupjob:weakref.prototype.deref()><a data-x-internal=weakref.prototype.deref() href=https://tc39.es/ecma262/#sec-weak-ref.prototype.deref>WeakRef.prototype.deref()</a></code> method is undefined, and whether <code id=hostenqueuefinalizationregistrycleanupjob:finalizationregistry-2><a data-x-internal=finalizationregistry href=https://tc39.es/ecma262/#sec-finalization-registry-objects>FinalizationRegistry</a></code> cleanup callbacks occur. There are well-known cases in popular web browsers where objects are not accessible to JavaScript, but they remain retained by the garbage collector indefinitely. HTML clears kept-alive <code id=hostenqueuefinalizationregistrycleanupjob:weakref><a data-x-internal=weakref href=https://tc39.es/ecma262/#sec-weak-ref-objects>WeakRef</a></code> objects in the <a href=#perform-a-microtask-checkpoint id=hostenqueuefinalizationregistrycleanupjob:perform-a-microtask-checkpoint>perform a microtask checkpoint</a> algorithm. Authors would be best off not depending on the timing details of garbage collection implementations. Cleanup actions do not take place interspersed with synchronous JavaScript execution, but rather happen in queued <a href=#concept-task id=hostenqueuefinalizationregistrycleanupjob:concept-task>tasks</a>. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>global</var> be <var>finalizationRegistry</var>.[[Realm]]'s <a href=#global-object id=hostenqueuefinalizationregistrycleanupjob:global-object>global object</a>.<li> <a href=#queue-a-global-task id=hostenqueuefinalizationregistrycleanupjob:queue-a-global-task>Queue a global task</a> on the <dfn id=javascript-engine-task-source>JavaScript engine task source</dfn> given <var>global</var> to perform the following steps: <ol><li>Let <var>entry</var> be <var>finalizationRegistry</var>.[[CleanupCallback]].[[Callback]].[[Realm]]'s <a href=#concept-realm-settings-object id=hostenqueuefinalizationregistrycleanupjob:concept-realm-settings-object>environment settings object</a>.<li><a href=#check-if-we-can-run-script id=hostenqueuefinalizationregistrycleanupjob:check-if-we-can-run-script>Check if we can run script</a> with <var>entry</var>. If this returns "do not run", then return.<li> <a href=#prepare-to-run-script id=hostenqueuefinalizationregistrycleanupjob:prepare-to-run-script>Prepare to run script</a> with <var>entry</var>. This affects the <a href=#concept-entry-everything id=hostenqueuefinalizationregistrycleanupjob:concept-entry-everything>entry</a> concept while the cleanup callback runs. <li>Let <var>result</var> be the result of performing <a id=hostenqueuefinalizationregistrycleanupjob:cleanupfinalizationregistry href=https://tc39.es/ecma262/#sec-cleanup-finalization-registry data-x-internal=cleanupfinalizationregistry>CleanupFinalizationRegistry</a>(<var>finalizationRegistry</var>).<li><a href=#clean-up-after-running-script id=hostenqueuefinalizationregistrycleanupjob:clean-up-after-running-script>Clean up after running script</a> with <var>entry</var>.<li>If <var>result</var> is an <a href=https://tc39.es/ecma262/#sec-completion-record-specification-type id=hostenqueuefinalizationregistrycleanupjob:completion-record data-x-internal=completion-record>abrupt completion</a>, then <a href=#report-an-exception id=hostenqueuefinalizationregistrycleanupjob:report-an-exception>report an exception</a> given by <var>result</var>.[[Value]] for <var>global</var>.</ol> </ol> <h6 id=hostenqueuegenericjob>8.1.6.6.3 <dfn>HostEnqueueGenericJob</dfn>(<var>job</var>, <var>realm</var>)<a href=#hostenqueuegenericjob class=self-link></a></h6> JavaScript contains an <a id=hostenqueuegenericjob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostenqueuegenericjob id=hostenqueuegenericjob:js-hostenqueuegenericjob data-x-internal=js-hostenqueuegenericjob>HostEnqueueGenericJob</a>(<var>job</var>, <var>realm</var>) abstract operation to perform generic jobs in a particular realm (e.g., resolve promises resulting from <code id=hostenqueuegenericjob:atomics.waitasync><a data-x-internal=atomics.waitasync href=https://tc39.es/ecma262/#sec-atomics.waitasync>Atomics.waitAsync</a></code>). User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>global</var> be <var>realm</var>'s <a href=#concept-realm-global id=hostenqueuegenericjob:concept-realm-global>global object</a>.<li><a href=#queue-a-global-task id=hostenqueuegenericjob:queue-a-global-task>Queue a global task</a> on the <a href=#javascript-engine-task-source id=hostenqueuegenericjob:javascript-engine-task-source>JavaScript engine task source</a> given <var>global</var> to perform <var>job</var>().</ol> <h6 id=hostenqueuepromisejob>8.1.6.6.4 <dfn>HostEnqueuePromiseJob</dfn>(<var>job</var>, <var>realm</var>)<a href=#hostenqueuepromisejob class=self-link></a></h6> JavaScript contains an <a id=hostenqueuepromisejob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostenqueuepromisejob id=hostenqueuepromisejob:js-hostenqueuepromisejob data-x-internal=js-hostenqueuepromisejob>HostEnqueuePromiseJob</a>(<var>job</var>, <var>realm</var>) abstract operation to schedule Promise-related operations. HTML schedules these operations in the microtask queue. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li> If <var>realm</var> is not null, then let <var>job settings</var> be the <a href=#concept-realm-settings-object id=hostenqueuepromisejob:concept-realm-settings-object>settings object</a> for <var>realm</var>. Otherwise, let <var>job settings</var> be null. <div class=note> If <var>realm</var> is not null, it is the <a id=hostenqueuepromisejob:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> of the author code that will run. When <var>job</var> is returned by <a id=hostenqueuepromisejob:newpromisereactionjob href=https://tc39.es/ecma262/#sec-newpromisereactionjob data-x-internal=newpromisereactionjob>NewPromiseReactionJob</a>, it is the realm of the promise's handler function. When <var>job</var> is returned by <a id=hostenqueuepromisejob:newpromiseresolvethenablejob href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob data-x-internal=newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a>, it is the realm of the <code>then</code> function. If <var>realm</var> is null, either no author code will run or author code is guaranteed to throw. For the former, the author may not have passed in code to run, such as in <code>promise.then(null, null)</code>. For the latter, it is because a revoked Proxy was passed. In both cases, all the steps below that would otherwise use <var>job settings</var> get skipped. <a href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a> and <a href=https://tc39.es/ecma262/#sec-newpromisereactionjob>NewPromiseReactionJob</a> both seem to provide non-null realms (the current Realm Record) in the case of a revoked proxy. The previous text could be updated to reflect that. </div> <li> <a href=#queue-a-microtask id=hostenqueuepromisejob:queue-a-microtask>Queue a microtask</a> to perform the following steps: <ol><li>If <var>job settings</var> is not null, then <a href=#check-if-we-can-run-script id=hostenqueuepromisejob:check-if-we-can-run-script>check if we can run script</a> with <var>job settings</var>. If this returns "do not run" then return.<li> If <var>job settings</var> is not null, then <a href=#prepare-to-run-script id=hostenqueuepromisejob:prepare-to-run-script>prepare to run script</a> with <var>job settings</var>. This affects the <a href=#concept-entry-everything id=hostenqueuepromisejob:concept-entry-everything>entry</a> concept while the job runs. <li> Let <var>result</var> be <var>job</var>(). <var>job</var> is an <a id=hostenqueuepromisejob:abstract-closure href=https://tc39.es/ecma262/#sec-abstract-closure data-x-internal=abstract-closure>abstract closure</a> returned by <a id=hostenqueuepromisejob:newpromisereactionjob-2 href=https://tc39.es/ecma262/#sec-newpromisereactionjob data-x-internal=newpromisereactionjob>NewPromiseReactionJob</a> or <a id=hostenqueuepromisejob:newpromiseresolvethenablejob-2 href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob data-x-internal=newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a>. The promise's handler function when <var>job</var> is returned by <a id=hostenqueuepromisejob:newpromisereactionjob-3 href=https://tc39.es/ecma262/#sec-newpromisereactionjob data-x-internal=newpromisereactionjob>NewPromiseReactionJob</a>, and the <code>then</code> function when <var>job</var> is returned by <a id=hostenqueuepromisejob:newpromiseresolvethenablejob-3 href=https://tc39.es/ecma262/#sec-newpromiseresolvethenablejob data-x-internal=newpromiseresolvethenablejob>NewPromiseResolveThenableJob</a>, are wrapped in <a href=https://tc39.es/ecma262/#sec-jobcallback-records id=hostenqueuepromisejob:jobcallback-record data-x-internal=jobcallback-record>JobCallback Records</a>. HTML saves the <a href=#incumbent-settings-object id=hostenqueuepromisejob:incumbent-settings-object>incumbent settings object</a> and a <a id=hostenqueuepromisejob:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a> for to the <a href=#active-script id=hostenqueuepromisejob:active-script>active script</a> in <a href=#hostmakejobcallback id=hostenqueuepromisejob:hostmakejobcallback>HostMakeJobCallback</a> and restores them in <a href=#hostcalljobcallback id=hostenqueuepromisejob:hostcalljobcallback>HostCallJobCallback</a>. <li>If <var>job settings</var> is not null, then <a href=#clean-up-after-running-script id=hostenqueuepromisejob:clean-up-after-running-script>clean up after running script</a> with <var>job settings</var>.<li> If <var>result</var> is an <a href=https://tc39.es/ecma262/#sec-completion-record-specification-type id=hostenqueuepromisejob:completion-record data-x-internal=completion-record>abrupt completion</a>, then <a href=#report-an-exception id=hostenqueuepromisejob:report-an-exception>report an exception</a> given by <var>result</var>.[[Value]] for <var>realm</var>'s <a href=#concept-realm-global id=hostenqueuepromisejob:concept-realm-global>global object</a>. There is a very gnarly case where HostEnqueuePromiseJob is called with a null realm (e.g., because Promise.prototype.then was called with null handlers) but also the job returns abruptly (because the promise capability's resolve or reject handler threw, possibly because this is a subclass of Promise that takes the supplied functions and wraps them in throwing functions before passing them on to the function passed to the Promise superclass constructor. Which global is to be used then, considering that the current realm could be different at each of those steps, by using a Promise constructor or Promise.prototype.then from another realm? See <a href=https://github.com/whatwg/html/issues/10526>issue #10526</a>. </ol> </ol> <h6 id=hostenqueuetimeoutjob>8.1.6.6.5 <dfn>HostEnqueueTimeoutJob</dfn>(<var>job</var>, <var>realm</var>, <var>milliseconds</var>)<a href=#hostenqueuetimeoutjob class=self-link></a></h6> JavaScript contains an <a id=hostenqueuetimeoutjob:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostenqueuetimeoutjob id=hostenqueuetimeoutjob:js-hostenqueuetimeoutjob data-x-internal=js-hostenqueuetimeoutjob>HostEnqueueTimeoutJob</a>(<var>job</var>, <var>milliseconds</var>) abstract operation to schedule an operation to be performed after a timeout. HTML schedules these operations using <a id=hostenqueuetimeoutjob:run-steps-after-a-timeout href=timers-and-user-prompts.html#run-steps-after-a-timeout>run steps after a timeout</a>. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>global</var> be <var>realm</var>'s <a href=#concept-realm-global id=hostenqueuetimeoutjob:concept-realm-global>global object</a>.<li>Let <var>timeoutStep</var> be an algorithm step which <a href=#queue-a-global-task id=hostenqueuetimeoutjob:queue-a-global-task>queues a global task</a> on the <a href=#javascript-engine-task-source id=hostenqueuetimeoutjob:javascript-engine-task-source>JavaScript engine task source</a> given <var>global</var> to perform <var>job</var>().<li><a id=hostenqueuetimeoutjob:run-steps-after-a-timeout-2 href=timers-and-user-prompts.html#run-steps-after-a-timeout>Run steps after a timeout</a> given <var>global</var>, "<code>JavaScript</code>", <var>milliseconds</var>, and <var>timeoutStep</var>.</ol> <h6 id=hostmakejobcallback>8.1.6.6.6 <dfn>HostMakeJobCallback</dfn>(<var>callable</var>)<a href=#hostmakejobcallback class=self-link></a></h6> JavaScript contains an <a id=hostmakejobcallback:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostmakejobcallback id=hostmakejobcallback:js-hostmakejobcallback data-x-internal=js-hostmakejobcallback>HostMakeJobCallback</a>(<var>callable</var>) abstract operation to let hosts attach state to JavaScript callbacks that are called from inside <a href=#concept-task id=hostmakejobcallback:concept-task>task</a>s. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>incumbent settings</var> be the <a href=#incumbent-settings-object id=hostmakejobcallback:incumbent-settings-object>incumbent settings object</a>.<li>Let <var>active script</var> be the <a href=#active-script id=hostmakejobcallback:active-script>active script</a>.<li>Let <var>script execution context</var> be null.<li> If <var>active script</var> is not null, set <var>script execution context</var> to a new <a id=hostmakejobcallback:javascript-execution-context href=https://tc39.es/ecma262/#sec-execution-contexts data-x-internal=javascript-execution-context>JavaScript execution context</a>, with its Function field set to null, its Realm field set to <var>active script</var>'s <a href=#settings-object id=hostmakejobcallback:settings-object>settings object</a>'s <a href="#environment-settings-object's-realm" id="hostmakejobcallback:environment-settings-object's-realm">realm</a>, and its ScriptOrModule set to <var>active script</var>'s <a href=#concept-script-record id=hostmakejobcallback:concept-script-record>record</a>. As seen below, this is used in order to propagate the current <a href=#active-script id=hostmakejobcallback:active-script-2>active script</a> forward to the time when the job callback is invoked. <div class=example> A case where <var>active script</var> is non-null, and saving it in this way is useful, is the following: <pre><code class='js'>Promise<c- p>.</c->resolve<c- p>(</c-><c- t>'import(`./example.mjs`)'</c-><c- p>).</c->then<c- p>(</c->eval<c- p>);</c-></code></pre> Without this step (and the steps that use it in <a href=#hostcalljobcallback id=hostmakejobcallback:hostcalljobcallback>HostCallJobCallback</a>), there would be no <a href=#active-script id=hostmakejobcallback:active-script-3>active script</a> when the <code id=hostmakejobcallback:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expression is evaluated, since <code id=hostmakejobcallback:eval()><a data-x-internal=eval() href=https://tc39.es/ecma262/#sec-eval-x>eval()</a></code> is a built-in function that does not originate from any particular <a href=#concept-script id=hostmakejobcallback:concept-script>script</a>. With this step in place, the active script is propagated from the above code into the job, allowing <code id=hostmakejobcallback:import()-2><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> to use the original script's <a href=#concept-script-base-url id=hostmakejobcallback:concept-script-base-url>base URL</a> appropriately. </div> <div class=example> <var>active script</var> can be null if the user clicks on the following button: <pre><code class='html'><c- p><</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>"Promise.resolve('import(`./example.mjs`)').then(eval)"</c-><c- p>></c->Click me<c- p></</c-><c- f>button</c-><c- p>></c-></code></pre> In this case, the JavaScript function for the <a href=#event-handlers id=hostmakejobcallback:event-handlers>event handler</a> will be created by the <a href=#getting-the-current-value-of-the-event-handler id=hostmakejobcallback:getting-the-current-value-of-the-event-handler>get the current value of the event handler</a> algorithm, which creates a function with null [[ScriptOrModule]] value. Thus, when the promise machinery calls <a href=#hostmakejobcallback id=hostmakejobcallback:hostmakejobcallback>HostMakeJobCallback</a>, there will be no <a href=#active-script id=hostmakejobcallback:active-script-4>active script</a> to pass along. As a consequence, this means that when the <code id=hostmakejobcallback:import()-3><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expression is evaluated, there will still be no <a href=#active-script id=hostmakejobcallback:active-script-5>active script</a>. Fortunately that is handled by our implementation of <a href=#hostloadimportedmodule id=hostmakejobcallback:hostloadimportedmodule>HostLoadImportedModule</a> by falling back to using the <a href=#current-settings-object id=hostmakejobcallback:current-settings-object>current settings object</a>'s <a href=#api-base-url id=hostmakejobcallback:api-base-url>API base URL</a>. </div> <li>Return the <a id=hostmakejobcallback:jobcallback-record href=https://tc39.es/ecma262/#sec-jobcallback-records data-x-internal=jobcallback-record>JobCallback Record</a> { [[Callback]]: <var>callable</var>, [[HostDefined]]: { [[IncumbentSettings]]: <var>incumbent settings</var>, [[ActiveScriptContext]]: <var>script execution context</var> } }.</ol> <h5 id=integration-with-the-javascript-module-system>8.1.6.7 Module-related host hooks<a href=#integration-with-the-javascript-module-system class=self-link></a></h5> The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts of their processing model. This specification defines the rest of their processing model: how the module system is bootstrapped, via the <code id=integration-with-the-javascript-module-system:the-script-element><a href=scripting.html#the-script-element>script</a></code> element with <code id=integration-with-the-javascript-module-system:attr-script-type><a href=scripting.html#attr-script-type>type</a></code> attribute set to "<code>module</code>", and how modules are fetched, resolved, and executed. <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> Although the JavaScript specification speaks in terms of "scripts" versus "modules", in general this specification speaks in terms of <a href=#classic-script id=integration-with-the-javascript-module-system:classic-script>classic scripts</a> versus <a href=#module-script id=integration-with-the-javascript-module-system:module-script>module scripts</a>, since both of them use the <code id=integration-with-the-javascript-module-system:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> element. <dl class=domintro><dt><code><var>modulePromise</var> = <a href=https://tc39.es/ecma262/#sec-import-calls id=integration-with-the-javascript-module-system:import() data-x-internal=import()>import(<var>specifier</var>)</a></code><dd> Returns a promise for the module namespace object for the <a href=#module-script id=integration-with-the-javascript-module-system:module-script-2>module script</a> identified by <var>specifier</var>. This allows dynamic importing of module scripts at runtime, instead of statically using the <code>import</code> statement form. The specifier will be <a href=#resolve-a-module-specifier id=integration-with-the-javascript-module-system:resolve-a-module-specifier>resolved</a> relative to the <a href=#active-script id=integration-with-the-javascript-module-system:active-script>active script</a>. The returned promise will be rejected if an invalid specifier is given, or if a failure is encountered while <a href=#hostloadimportedmodule id=integration-with-the-javascript-module-system:hostloadimportedmodule>fetching</a> or evaluating the resulting module graph. This syntax can be used inside both <a href=#classic-script id=integration-with-the-javascript-module-system:classic-script-2>classic</a> and <a href=#module-script id=integration-with-the-javascript-module-system:module-script-3>module scripts</a>. It thus provides a bridge into the module-script world, from the classic-script world. <dt><code><var>url</var> = <a href=https://tc39.es/ecma262/#sec-meta-properties id=integration-with-the-javascript-module-system:import.meta data-x-internal=import.meta>import.meta</a>.<a href=#import-meta-url id=integration-with-the-javascript-module-system:import-meta-url>url</a></code><dd> Returns the <a href=#active-script id=integration-with-the-javascript-module-system:active-script-2>active module script</a>'s <a href=#concept-script-base-url id=integration-with-the-javascript-module-system:concept-script-base-url>base URL</a>. This syntax can only be used inside <a href=#module-script id=integration-with-the-javascript-module-system:module-script-4>module scripts</a>. <dt><code><var>url</var> = <a href=https://tc39.es/ecma262/#sec-meta-properties id=integration-with-the-javascript-module-system:import.meta-2 data-x-internal=import.meta>import.meta</a>.<a href=#import-meta-resolve id=integration-with-the-javascript-module-system:import-meta-resolve>resolve</a>(<var>specifier</var>)</code><dd> Returns <var>specifier</var>, <a href=#resolve-a-module-specifier id=integration-with-the-javascript-module-system:resolve-a-module-specifier-2>resolved</a> relative to the <a href=#active-script id=integration-with-the-javascript-module-system:active-script-3>active script</a>. That is, this returns the URL that would be imported by using <code id=integration-with-the-javascript-module-system:import()-2><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import(<var>specifier</var>)</a></code>. Throws a <code id=integration-with-the-javascript-module-system:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> exception if an invalid specifier is given. This syntax can only be used inside <a href=#module-script id=integration-with-the-javascript-module-system:module-script-5>module scripts</a>. </dl> A <dfn id=module-map>module map</dfn> is a <a href=https://infra.spec.whatwg.org/#ordered-map id=integration-with-the-javascript-module-system:ordered-map data-x-internal=ordered-map>map</a> keyed by <a href=https://infra.spec.whatwg.org/#tuple id=integration-with-the-javascript-module-system:tuple data-x-internal=tuple>tuples</a> consisting of a <a id=integration-with-the-javascript-module-system:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> and a <a id=integration-with-the-javascript-module-system:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>. The <a id=integration-with-the-javascript-module-system:url-record-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> is the <a href=https://fetch.spec.whatwg.org/#concept-request-url id=integration-with-the-javascript-module-system:concept-request-url data-x-internal=concept-request-url>request URL</a> at which the module was fetched, and the <a id=integration-with-the-javascript-module-system:string-2 href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> indicates the type of the module (e.g. "<code>javascript-or-wasm</code>"). The <a href=#module-map id=integration-with-the-javascript-module-system:module-map>module map</a>'s values are either a <a href=#module-script id=integration-with-the-javascript-module-system:module-script-6>module script</a>, null (used to represent failed fetches), or a placeholder value "<code>fetching</code>". <a href=#module-map id=integration-with-the-javascript-module-system:module-map-2>Module maps</a> are used to ensure that imported module scripts are only fetched, parsed, and evaluated once per <code id=integration-with-the-javascript-module-system:document><a href=dom.html#document>Document</a></code> or <a href=workers.html#workers>worker</a>. <div class=example> Since <a href=#module-map id=integration-with-the-javascript-module-system:module-map-3>module maps</a> are keyed by (URL, module type), the following code will create three separate entries in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-4>module map</a>, since it results in three different (URL, module type) <a href=https://infra.spec.whatwg.org/#tuple id=integration-with-the-javascript-module-system:tuple-2 data-x-internal=tuple>tuples</a> (all with "<code>javascript-or-wasm</code>" type): <pre><code class='js'><c- k>import</c-> <c- u>"https://example.com/module.mjs"</c-><c- p>;</c-> <c- k>import</c-> <c- u>"https://example.com/module.mjs#map-buster"</c-><c- p>;</c-> <c- k>import</c-> <c- u>"https://example.com/module.mjs?debug=true"</c-><c- p>;</c-></code></pre> That is, URL <a href=https://url.spec.whatwg.org/#concept-url-query id=integration-with-the-javascript-module-system:concept-url-query data-x-internal=concept-url-query>queries</a> and <a href=https://url.spec.whatwg.org/#concept-url-fragment id=integration-with-the-javascript-module-system:concept-url-fragment data-x-internal=concept-url-fragment>fragments</a> can be varied to create distinct entries in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-5>module map</a>; they are not ignored. Thus, three separate fetches and three separate module evaluations will be performed. In contrast, the following code would only create a single entry in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-6>module map</a>, since after applying the <a id=integration-with-the-javascript-module-system:url-parser href=https://url.spec.whatwg.org/#concept-url-parser data-x-internal=url-parser>URL parser</a> to these inputs, the resulting <a href=https://url.spec.whatwg.org/#concept-url id=integration-with-the-javascript-module-system:url-record-3 data-x-internal=url-record>URL records</a> are equal: <pre><code class='js'><c- k>import</c-> <c- u>"https://example.com/module2.mjs"</c-><c- p>;</c-> <c- k>import</c-> <c- u>"https:example.com/module2.mjs"</c-><c- p>;</c-> <c- k>import</c-> <c- u>"https://///example.com\\module2.mjs"</c-><c- p>;</c-> <c- k>import</c-> <c- u>"https://example.com/foo/../module2.mjs"</c-><c- p>;</c-></code></pre> So in this second example, only one fetch and one module evaluation will occur. Note that this behavior is the same as how <a href=workers.html#sharedworker id=integration-with-the-javascript-module-system:sharedworker>shared workers</a> are keyed by their parsed <a href=workers.html#concept-sharedworkerglobalscope-constructor-url id=integration-with-the-javascript-module-system:concept-sharedworkerglobalscope-constructor-url>constructor url</a>. </div> <div class=example> Since module type is also part of the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-7>module map</a> key, the following code will create two separate entries in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-8>module map</a> (the type is "<code>javascript-or-wasm</code>" for the first, and "<code>css</code>" for the second): <pre><code class='html'><c- p><</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>module</c-><c- p>></c-> <c- k>import</c-> <c- u>"https://example.com/module"</c-><c- p>;</c-> <c- p></</c-><c- f>script</c-><c- p>></c-> <c- p><</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>module</c-><c- p>></c-> <c- k>import</c-> <c- u>"https://example.com/module"</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>"css"</c-> <c- p>};</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> This can result in two separate fetches and two separate module evaluations being performed. In practice, due to the as-yet-unspecified memory cache (see issue <a href=https://github.com/whatwg/html/issues/6110>#6110</a>) the resource may only be fetched once in WebKit and Blink-based browsers. Additionally, as long as all module types are mutually exclusive, the module type check in <a href=#fetch-a-single-module-script id=integration-with-the-javascript-module-system:fetch-a-single-module-script>fetch a single module script</a> will fail for at least one of the imports, so at most one module evaluation will occur. The purpose of including the type in the <a href=#module-map id=integration-with-the-javascript-module-system:module-map-9>module map</a> key is so that an import with the wrong type attribute does not prevent a different import of the same specifier but with the correct type from succeeding. </div> <div class=example> JavaScript module scripts are the default import type when importing from another JavaScript module; that is, when an <code>import</code> statement lacks a <code>type</code> import attribute the imported module script's type will be JavaScript. Attempting to import a JavaScript resource using an <code>import</code> statement with a <code>type</code> import attribute will fail: <pre><code class='html'><c- p><</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>"module"</c-><c- p>></c-> <c- c1>// All of the following will fail, assuming that the imported .mjs files are served with a</c-> <c- c1>// JavaScript MIME type. JavaScript module scripts are the default and cannot be imported with</c-> <c- c1>// any import type attribute.</c-> <c- k>import</c-> foo <c- k>from</c-> <c- u>"./foo.mjs"</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>"javascript"</c-> <c- p>};</c-> <c- k>import</c-> foo2 <c- k>from</c-> <c- u>"./foo2.mjs"</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>"js"</c-> <c- p>};</c-> <c- k>import</c-> foo3 <c- k>from</c-> <c- u>"./foo3.mjs"</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>""</c-> <c- p>};</c-> <c- k>await</c-> <c- k>import</c-><c- p>(</c-><c- u>"./foo4.mjs"</c-><c- p>,</c-> <c- p>{</c-> <c- a>with</c-><c- o>:</c-> <c- p>{</c-> type<c- o>:</c-> <c- kc>null</c-> <c- p>}</c-> <c- p>});</c-> <c- k>await</c-> <c- k>import</c-><c- p>(</c-><c- u>"./foo5.mjs"</c-><c- p>,</c-> <c- p>{</c-> <c- a>with</c-><c- o>:</c-> <c- p>{</c-> type<c- o>:</c-> <c- kc>undefined</c-> <c- p>}</c-> <c- p>});</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> </div> <h6 id=hostgetimportmetaproperties>8.1.6.7.1 <dfn>HostGetImportMetaProperties</dfn>(<var>moduleRecord</var>)<a href=#hostgetimportmetaproperties class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve title="import.meta.resolve() is a built-in function defined on the import.meta object of a JavaScript module that resolves a module specifier to a URL using the current module's URL as base.">Reference/Operators/import.meta/resolve</a>Support in all current engines.<div class=support>Firefox106+Safari16.4+Chrome105+<hr>Opera?Edge105+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta title="The import.meta meta-property exposes context-specific metadata to a JavaScript module. It contains information about the module, such as the module's URL.">Reference/Operators/import.meta</a>Support in all current engines.<div class=support>Firefox62+Safari11.1+Chrome64+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS12+Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> JavaScript contains an <a id=hostgetimportmetaproperties:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/ecma262/#sec-hostgetimportmetaproperties id=hostgetimportmetaproperties:js-hostgetimportmetaproperties data-x-internal=js-hostgetimportmetaproperties>HostGetImportMetaProperties</a> abstract operation. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>moduleScript</var> be <var>moduleRecord</var>.[[HostDefined]].<li><a id=hostgetimportmetaproperties:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>moduleScript</var>'s <a href=#concept-script-base-url id=hostgetimportmetaproperties:concept-script-base-url>base URL</a> is not null, as <var>moduleScript</var> is a <a href=#javascript-module-script id=hostgetimportmetaproperties:javascript-module-script>JavaScript module script</a>.<li>Let <var>urlString</var> be <var>moduleScript</var>'s <a href=#concept-script-base-url id=hostgetimportmetaproperties:concept-script-base-url-2>base URL</a>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=hostgetimportmetaproperties:concept-url-serializer data-x-internal=concept-url-serializer>serialized</a>.<li> Let <var>steps</var> be the following steps, given the argument <var>specifier</var>: <ol><li>Set <var>specifier</var> to ? <a id=hostgetimportmetaproperties:tostring href=https://tc39.es/ecma262/#sec-tostring data-x-internal=tostring>ToString</a>(<var>specifier</var>).<li>Let <var>url</var> be the result of <a href=#resolve-a-module-specifier id=hostgetimportmetaproperties:resolve-a-module-specifier>resolving a module specifier</a> given <var>moduleScript</var> and <var>specifier</var>.<li>Return the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=hostgetimportmetaproperties:concept-url-serializer-2 data-x-internal=concept-url-serializer>serialization</a> of <var>url</var>.</ol> <li>Let <var>resolveFunction</var> be ! <a id=hostgetimportmetaproperties:createbuiltinfunction href=https://tc39.es/ecma262/#sec-createbuiltinfunction data-x-internal=createbuiltinfunction>CreateBuiltinFunction</a>(<var>steps</var>, 1, "<code>resolve</code>", « »).<li>Return « <a id=hostgetimportmetaproperties:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> { [[Key]]: "<dfn id=import-meta-url><code>url</code></dfn>", [[Value]]: <var>urlString</var> }, <a id=hostgetimportmetaproperties:record-2 href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> { [[Key]]: "<dfn id=import-meta-resolve><code>resolve</code></dfn>", [[Value]]: <var>resolveFunction</var> } ».</ol> <h6 id=hostgetsupportedimportattributes>8.1.6.7.2 <dfn>HostGetSupportedImportAttributes</dfn>()<a href=#hostgetsupportedimportattributes class=self-link></a></h6> The <cite>Import Attributes</cite> proposal contains an <a id=hostgetsupportedimportattributes:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-import-attributes/#sec-hostgetsupportedimportattributes id=hostgetsupportedimportattributes:js-hostgetsupportedimportattributes data-x-internal=js-hostgetsupportedimportattributes>HostGetSupportedImportAttributes</a> abstract operation. User agents must use the following implementation: <a href=references.html#refsJSIMPORTATTRIBUTES>[JSIMPORTATTRIBUTES]</a> <ol><li>Return « "<code>type</code>" ».</ol> <h6 id=hostloadimportedmodule>8.1.6.7.3 <dfn>HostLoadImportedModule</dfn>(<var>referrer</var>, <var>moduleRequest</var>, <var>loadState</var>, <var>payload</var>)<a href=#hostloadimportedmodule class=self-link></a></h6> JavaScript contains an <a id=hostloadimportedmodule:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> <a href=https://tc39.es/proposal-import-attributes/#sec-HostLoadImportedModule id=hostloadimportedmodule:js-hostloadimportedmodule data-x-internal=js-hostloadimportedmodule>HostLoadImportedModule</a> abstract operation. User agents must use the following implementation: <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a> <ol><li>Let <var>settingsObject</var> be the <a href=#current-settings-object id=hostloadimportedmodule:current-settings-object>current settings object</a>.<li> If <var>settingsObject</var>'s <a href=#concept-settings-object-global id=hostloadimportedmodule:concept-settings-object-global>global object</a> implements <code id=hostloadimportedmodule:workletglobalscope><a href=worklets.html#workletglobalscope>WorkletGlobalScope</a></code> or <code id=hostloadimportedmodule:serviceworkerglobalscope><a data-x-internal=serviceworkerglobalscope href=https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope>ServiceWorkerGlobalScope</a></code> and <var>loadState</var> is undefined, then: <var>loadState</var> is undefined when the current fetching process has been initiated by a dynamic <code id=hostloadimportedmodule:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> call, either directly or when loading the transitive dependencies of the dynamically imported module. <ol><li>Let <var>completion</var> be <a id=hostloadimportedmodule:completion-record href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: throw, [[Value]]: a new <code id=hostloadimportedmodule:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>, [[Target]]: empty }.<li>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>, <var>moduleRequest</var>, <var>payload</var>, <var>completion</var>).<li>Return.</ol> <li>Let <var>referencingScript</var> be null.<li>Let <var>originalFetchOptions</var> be the <a href=#default-script-fetch-options id=hostloadimportedmodule:default-script-fetch-options>default script fetch options</a>.<li>Let <var>fetchReferrer</var> be "<code>client</code>".<li> If <var>referrer</var> is a <a id=hostloadimportedmodule:script-record href=https://tc39.es/ecma262/#sec-script-records data-x-internal=script-record>Script Record</a> or a <a id=hostloadimportedmodule:cyclic-module-record href=https://tc39.es/ecma262/#sec-cyclic-module-records data-x-internal=cyclic-module-record>Cyclic Module Record</a>, then: <ol><li>Set <var>referencingScript</var> to <var>referrer</var>.[[HostDefined]]. <li>Set <var>settingsObject</var> to <var>referencingScript</var>'s <a href=#settings-object id=hostloadimportedmodule:settings-object>settings object</a>.<li>Set <var>fetchReferrer</var> to <var>referencingScript</var>'s <a href=#concept-script-base-url id=hostloadimportedmodule:concept-script-base-url>base URL</a>.<li>Set <var>originalFetchOptions</var> to <var>referencingScript</var>'s <a href=#concept-script-script-fetch-options id=hostloadimportedmodule:concept-script-script-fetch-options>fetch options</a>.</ol> <div class=example> <var>referrer</var> is usually a <a id=hostloadimportedmodule:script-record-2 href=https://tc39.es/ecma262/#sec-script-records data-x-internal=script-record>Script Record</a> or a <a id=hostloadimportedmodule:cyclic-module-record-2 href=https://tc39.es/ecma262/#sec-cyclic-module-records data-x-internal=cyclic-module-record>Cyclic Module Record</a>, but it will not be so for event handlers per the <a href=#getting-the-current-value-of-the-event-handler id=hostloadimportedmodule:getting-the-current-value-of-the-event-handler>get the current value of the event handler</a> algorithm. For example, given: <pre><code class='html'><c- p><</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>"import('./foo.mjs')"</c-><c- p>></c->Click me<c- p></</c-><c- f>button</c-><c- p>></c-></code></pre> If a <code id=hostloadimportedmodule:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event occurs, then at the time the <code id=hostloadimportedmodule:import()-2><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code> expression runs, <a id=hostloadimportedmodule:getactivescriptormodule href=https://tc39.es/ecma262/#sec-getactivescriptormodule data-x-internal=getactivescriptormodule>GetActiveScriptOrModule</a> will return null, and this operation will receive the <a id=hostloadimportedmodule:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a> as a fallback <var>referrer</var>. </div> <li> If <var>referrer</var> is a <a id=hostloadimportedmodule:cyclic-module-record-3 href=https://tc39.es/ecma262/#sec-cyclic-module-records data-x-internal=cyclic-module-record>Cyclic Module Record</a> and <var>moduleRequest</var> is equal to the first element of <var>referrer</var>.[[RequestedModules]], then: <ol><li id=validate-requested-module-specifiers> <a href=https://infra.spec.whatwg.org/#list-iterate id=hostloadimportedmodule:list-iterate data-x-internal=list-iterate>For each</a> <a id=hostloadimportedmodule:modulerequest-record href=https://tc39.es/proposal-import-attributes/#sec-modulerequest-record data-x-internal=modulerequest-record>ModuleRequest record</a> <var>requested</var> of <var>referrer</var>.[[RequestedModules]]: <ol><li> If <var>moduleRequest</var>.[[Attributes]] contains a <a id=hostloadimportedmodule:record href=https://tc39.es/ecma262/#sec-list-and-record-specification-type data-x-internal=record>Record</a> <var>entry</var> such that <var>entry</var>.[[Key]] is not "<code>type</code>", then: <ol><li>Let <var>completion</var> be <a id=hostloadimportedmodule:completion-record-2 href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: throw, [[Value]]: a new <code id=hostloadimportedmodule:syntaxerror-2><a data-x-internal=syntaxerror-2 href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-syntaxerror>SyntaxError</a></code> exception, [[Target]]: empty }.<li>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-2 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>, <var>moduleRequest</var>, <var>payload</var>, <var>completion</var>).<li>Return.</ol> The JavaScript specification re-performs this validation but it is duplicated here to avoid unnecessarily loading any of the dependencies on validation failure. <li><a href=#resolve-a-module-specifier id=hostloadimportedmodule:resolve-a-module-specifier>Resolve a module specifier</a> given <var>referencingScript</var> and <var>moduleRequest</var>.[[Specifier]], catching any exceptions. If they throw an exception, let <var>resolutionError</var> be the thrown exception.<li> If the previous step threw an exception, then: <ol><li>Let <var>completion</var> be <a id=hostloadimportedmodule:completion-record-3 href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: throw, [[Value]]: <var>resolutionError</var>, [[Target]]: empty }.<li>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-3 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>, <var>moduleRequest</var>, <var>payload</var>, <var>completion</var>).<li>Return.</ol> <li>Let <var>moduleType</var> be the result of running the <a href=#module-type-from-module-request id=hostloadimportedmodule:module-type-from-module-request>module type from module request</a> steps given <var>moduleRequest</var>.<li> If the result of running the <a href=#module-type-allowed id=hostloadimportedmodule:module-type-allowed>module type allowed</a> steps given <var>moduleType</var> and <var>settingsObject</var> is false, then: <ol><li>Let <var>completion</var> be <a id=hostloadimportedmodule:completion-record-4 href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: throw, [[Value]]: a new <code id=hostloadimportedmodule:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> exception, [[Target]]: empty }.<li>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-4 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>, <var>moduleRequest</var>, <var>payload</var>, <var>completion</var>).<li>Return.</ol> </ol> This step is essentially validating all of the requested module specifiers and type attributes when the first call to <a href=#hostloadimportedmodule id=hostloadimportedmodule:hostloadimportedmodule>HostLoadImportedModule</a> for a static module dependency list is made, to avoid further loading operations in the case any one of the dependencies has a static error. We treat a module with unresolvable module specifiers or unsupported type attributes the same as one that cannot be parsed; in both cases, a syntactic issue makes it impossible to ever contemplate linking the module later. </ol> <li>Let <var>url</var> be the result of <a href=#resolve-a-module-specifier id=hostloadimportedmodule:resolve-a-module-specifier-2>resolving a module specifier</a> given <var>referencingScript</var> and <var>moduleRequest</var>.[[Specifier]], catching any exceptions. If they throw an exception, let <var>resolutionError</var> be the thrown exception.<li> If the previous step threw an exception, then: <ol><li>Let <var>completion</var> be <a id=hostloadimportedmodule:completion-record-5 href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: throw, [[Value]]: <var>resolutionError</var>, [[Target]]: empty }.<li>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-5 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>, <var>moduleRequest</var>, <var>payload</var>, <var>completion</var>).<li>Return.</ol> <li>Let <var>fetchOptions</var> be the result of <a href=#get-the-descendant-script-fetch-options id=hostloadimportedmodule:get-the-descendant-script-fetch-options>getting the descendant script fetch options</a> given <var>originalFetchOptions</var>, <var>url</var>, and <var>settingsObject</var>.<li>Let <var>destination</var> be <code>"script"</code>.<li>Let <var>fetchClient</var> be <var>settingsObject</var>.<li> If <var>loadState</var> is not undefined, then: <ol><li>Set <var>destination</var> to <var>loadState</var>.[[Destination]].<li>Set <var>fetchClient</var> to <var>loadState</var>.[[FetchClient]].</ol> <li> <a href=#fetch-a-single-imported-module-script id=hostloadimportedmodule:fetch-a-single-imported-module-script>Fetch a single imported module script</a> given <var>url</var>, <var>fetchClient</var>, <var>destination</var>, <var>fetchOptions</var>, <var>settingsObject</var>, <var>fetchReferrer</var>, <var>moduleRequest</var>, and <var>onSingleFetchComplete</var> as defined below. If <var>loadState</var> is not undefined and <var>loadState</var>.[[PerformFetch]] is not null, pass <var>loadState</var>.[[PerformFetch]] along as well. <var>onSingleFetchComplete</var> given <var>moduleScript</var> is the following algorithm: <ol><li>Let <var>completion</var> be null.<li>If <var>moduleScript</var> is null, then set <var>completion</var> to <a id=hostloadimportedmodule:completion-record-6 href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: throw, [[Value]]: a new <code id=hostloadimportedmodule:typeerror-3><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>, [[Target]]: empty }.<li> Otherwise, if <var>moduleScript</var>'s <a href=#concept-script-parse-error id=hostloadimportedmodule:concept-script-parse-error>parse error</a> is not null, then: <ol><li>Let <var>parseError</var> be <var>moduleScript</var>'s <a href=#concept-script-parse-error id=hostloadimportedmodule:concept-script-parse-error-2>parse error</a>.<li>Set <var>completion</var> to <a id=hostloadimportedmodule:completion-record-7 href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: throw, [[Value]]: <var>parseError</var>, [[Target]]: empty }.<li>If <var>loadState</var> is not undefined and <var>loadState</var>.[[ParseError]] is null, set <var>loadState</var>.[[ParseError]] to <var>parseError</var>.</ol> <li>Otherwise, set <var>completion</var> to <a id=hostloadimportedmodule:completion-record-8 href=https://tc39.es/ecma262/#sec-completion-record-specification-type data-x-internal=completion-record>Completion Record</a> { [[Type]]: normal, [[Value]]: <var>moduleScript</var>'s <a href=#concept-script-record id=hostloadimportedmodule:concept-script-record>record</a>, [[Target]]: empty }.<li>Perform <a id=hostloadimportedmodule:finishloadingimportedmodule-6 href=https://tc39.es/ecma262/#sec-FinishLoadingImportedModule data-x-internal=finishloadingimportedmodule>FinishLoadingImportedModule</a>(<var>referrer</var>, <var>moduleRequest</var>, <var>payload</var>, <var>completion</var>).</ol> </ol> <h4 id=event-loops>8.1.7 Event loops<a href=#event-loops class=self-link></a></h4> <h5 id=definitions-3>8.1.7.1 Definitions<a href=#definitions-3 class=self-link></a></h5> To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use <dfn id=event-loop data-lt="event loop" data-export="">event loops</dfn> as described in this section. Each <a id=definitions-3:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> has an associated <dfn data-dfn-for=agent id=concept-agent-event-loop data-export="">event loop</dfn>, which is unique to that agent. The <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop>event loop</a> of a <a href=#similar-origin-window-agent id=definitions-3:similar-origin-window-agent>similar-origin window agent</a> is known as a <dfn id=window-event-loop>window event loop</dfn>. The <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop-2>event loop</a> of a <a href=#dedicated-worker-agent id=definitions-3:dedicated-worker-agent>dedicated worker agent</a>, <a href=#shared-worker-agent id=definitions-3:shared-worker-agent>shared worker agent</a>, or <a href=#service-worker-agent id=definitions-3:service-worker-agent>service worker agent</a> is known as a <dfn id=worker-event-loop-2>worker event loop</dfn>. And the <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop-3>event loop</a> of a <a href=#worklet-agent id=definitions-3:worklet-agent>worklet agent</a> is known as a <dfn id=worklet-event-loop>worklet event loop</dfn>. <div class=note> <a href=#event-loop id=definitions-3:event-loop>Event loops</a> do not necessarily correspond to implementation threads. For example, multiple <a href=#window-event-loop id=definitions-3:window-event-loop>window event loops</a> could be cooperatively scheduled in a single thread. However, for the various worker <a href=https://tc39.es/ecma262/#sec-agents id=definitions-3:agent-2 data-x-internal=agent>agents</a> that are allocated with [[CanBlock]] set to true, the JavaScript specification does place requirements on them regarding <a id=definitions-3:forward-progress href=https://tc39.es/ecma262/#sec-forward-progress data-x-internal=forward-progress>forward progress</a>, which effectively amount to requiring dedicated per-agent threads in those cases. </div> <hr> An <a href=#event-loop id=definitions-3:event-loop-2>event loop</a> has one or more <dfn id=task-queue>task queues</dfn>. A <a href=#task-queue id=definitions-3:task-queue>task queue</a> is a <a id=definitions-3:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <a href=#concept-task id=definitions-3:concept-task>tasks</a>. <a href=#task-queue id=definitions-3:task-queue-2>Task queues</a> are <a href=https://infra.spec.whatwg.org/#ordered-set id=definitions-3:set-2 data-x-internal=set>sets</a>, not <a href=https://infra.spec.whatwg.org/#queue id=definitions-3:queue data-x-internal=queue>queues</a>, because the <a href=#event-loop-processing-model>event loop processing model</a> grabs the first <a href=#concept-task-runnable id=definitions-3:concept-task-runnable>runnable</a> <a href=#concept-task id=definitions-3:concept-task-2>task</a> from the chosen queue, instead of <a href=https://infra.spec.whatwg.org/#queue-dequeue id=definitions-3:dequeue data-x-internal=dequeue>dequeuing</a> the first task. The <a href=#microtask-queue id=definitions-3:microtask-queue>microtask queue</a> is not a <a href=#task-queue id=definitions-3:task-queue-3>task queue</a>. Tasks encapsulate algorithms that are responsible for such work as: <dl><dt>Events<dd> Dispatching an <code id=definitions-3:event><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code> object at a particular <code id=definitions-3:eventtarget><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object is often done by a dedicated task. Not all events are dispatched using the <a href=#task-queue id=definitions-3:task-queue-4>task queue</a>; many are dispatched during other tasks. <dt>Parsing<dd>The <a id=definitions-3:html-parser href=parsing.html#html-parser>HTML parser</a> tokenizing one or more bytes, and then processing any resulting tokens, is typically a task.<dt>Callbacks<dd>Calling a callback is often done by a dedicated task.<dt>Using a resource<dd>When an algorithm <a href=https://fetch.spec.whatwg.org/#concept-fetch id=definitions-3:concept-fetch data-x-internal=concept-fetch>fetches</a> a resource, if the fetching occurs in a non-blocking fashion then the processing of the resource once some or all of the resource is available is performed by a task.<dt>Reacting to DOM manipulation<dd>Some elements have tasks that trigger in response to DOM manipulation, e.g. when that element is <a href=infrastructure.html#insert-an-element-into-a-document id=definitions-3:insert-an-element-into-a-document>inserted into the document</a>. </dl> Formally, a <dfn id=concept-task data-lt=task data-export="">task</dfn> is a <a id=definitions-3:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> which has: <dl><dt><dfn id=concept-task-steps>Steps</dfn><dd>A series of steps specifying the work to be done by the task.<dt>A <dfn id=concept-task-source>source</dfn><dd>One of the <a href=#task-source id=definitions-3:task-source>task sources</a>, used to group and serialize related tasks.<dt>A <dfn id=concept-task-document>document</dfn><dd>A <code id=definitions-3:document><a href=dom.html#document>Document</a></code> associated with the task, or null for tasks that are not in a <a href=#window-event-loop id=definitions-3:window-event-loop-2>window event loop</a>.<dt>A <dfn id=script-evaluation-environment-settings-object-set data-export="">script evaluation environment settings object set</dfn><dd>A <a id=definitions-3:set-3 href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <a href=#environment-settings-object id=definitions-3:environment-settings-object>environment settings objects</a> used for tracking script evaluation during the task.</dl> A <a href=#concept-task id=definitions-3:concept-task-3>task</a> is <dfn id=concept-task-runnable>runnable</dfn> if its <a href=#concept-task-document id=definitions-3:concept-task-document>document</a> is either null or <a id=definitions-3:fully-active href=document-sequences.html#fully-active>fully active</a>. Per its <a href=#concept-task-source id=definitions-3:concept-task-source>source</a> field, each <a href=#concept-task id=definitions-3:concept-task-4>task</a> is defined as coming from a specific <dfn id=task-source data-export="">task source</dfn>. For each <a href=#event-loop id=definitions-3:event-loop-3>event loop</a>, every <a href=#task-source id=definitions-3:task-source-2>task source</a> must be associated with a specific <a href=#task-queue id=definitions-3:task-queue-5>task queue</a>. Essentially, <a href=#task-source id=definitions-3:task-source-3>task sources</a> are used within standards to separate logically-different types of tasks, which a user agent might wish to distinguish between. <a href=#task-queue id=definitions-3:task-queue-6>Task queues</a> are used by user agents to coalesce task sources within a given <a href=#event-loop id=definitions-3:event-loop-4>event loop</a>. For example, a user agent could have one <a href=#task-queue id=definitions-3:task-queue-7>task queue</a> for mouse and key events (to which the <a href=#user-interaction-task-source id=definitions-3:user-interaction-task-source>user interaction task source</a> is associated), and another to which all other <a href=#task-source id=definitions-3:task-source-4>task sources</a> are associated. Then, using the freedom granted in the initial step of the <a href=#event-loop-processing-model>event loop processing model</a>, it could give keyboard and mouse events preference over other tasks three-quarters of the time, keeping the interface responsive but not starving other task queues. Note that in this setup, the processing model still enforces that the user agent would never process events from any one <a href=#task-source id=definitions-3:task-source-5>task source</a> out of order. <hr> Each <a href=#event-loop id=definitions-3:event-loop-5>event loop</a> has a <dfn id=currently-running-task>currently running task</dfn>, which is either a <a href=#concept-task id=definitions-3:concept-task-5>task</a> or null. Initially, this is null. It is used to handle reentrancy. Each <a href=#event-loop id=definitions-3:event-loop-6>event loop</a> has a <dfn id=microtask-queue>microtask queue</dfn>, which is a <a id=definitions-3:queue-2 href=https://infra.spec.whatwg.org/#queue data-x-internal=queue>queue</a> of <a href=#microtask id=definitions-3:microtask>microtasks</a>, initially empty. A <dfn id=microtask data-export="">microtask</dfn> is a colloquial way of referring to a <a href=#concept-task id=definitions-3:concept-task-6>task</a> that was created via the <a href=#queue-a-microtask id=definitions-3:queue-a-microtask>queue a microtask</a> algorithm. Each <a href=#event-loop id=definitions-3:event-loop-7>event loop</a> has a <dfn id=performing-a-microtask-checkpoint>performing a microtask checkpoint</dfn> boolean, which is initially false. It is used to prevent reentrant invocation of the <a href=#perform-a-microtask-checkpoint id=definitions-3:perform-a-microtask-checkpoint>perform a microtask checkpoint</a> algorithm. Each <a href=#window-event-loop id=definitions-3:window-event-loop-3>window event loop</a> has a <code id=definitions-3:domhighrestimestamp><a data-x-internal=domhighrestimestamp href=https://w3c.github.io/hr-time/#dom-domhighrestimestamp>DOMHighResTimeStamp</a></code> <dfn id=last-render-opportunity-time>last render opportunity time</dfn>, initially set to zero. Each <a href=#window-event-loop id=definitions-3:window-event-loop-4>window event loop</a> has a <code id=definitions-3:domhighrestimestamp-2><a data-x-internal=domhighrestimestamp href=https://w3c.github.io/hr-time/#dom-domhighrestimestamp>DOMHighResTimeStamp</a></code> <dfn id=last-idle-period-start-time>last idle period start time</dfn>, initially set to zero. To get the <dfn id=same-loop-windows>same-loop windows</dfn> for a <a href=#window-event-loop id=definitions-3:window-event-loop-5>window event loop</a> <var>loop</var>, return all <code id=definitions-3:window><a href=nav-history-apis.html#window>Window</a></code> objects whose <a href=#relevant-agent id=definitions-3:relevant-agent>relevant agent</a>'s <a href=#concept-agent-event-loop id=definitions-3:concept-agent-event-loop-4>event loop</a> is <var>loop</var>. <h5 id=queuing-tasks>8.1.7.2 Queuing tasks<a href=#queuing-tasks class=self-link></a></h5> To <dfn id=queue-a-task data-export="">queue a task</dfn> on a <a href=#task-source id=queuing-tasks:task-source>task source</a> <var>source</var>, which performs a series of steps <var>steps</var>, optionally given an event loop <var>event loop</var> and a document <var>document</var>: <ol><li>If <var>event loop</var> was not given, set <var>event loop</var> to the <a href=#implied-event-loop id=queuing-tasks:implied-event-loop>implied event loop</a>.<li>If <var>document</var> was not given, set <var>document</var> to the <a href=#implied-document id=queuing-tasks:implied-document>implied document</a>.<li>Let <var>task</var> be a new <a href=#concept-task id=queuing-tasks:concept-task>task</a>.<li>Set <var>task</var>'s <a href=#concept-task-steps id=queuing-tasks:concept-task-steps>steps</a> to <var>steps</var>.<li>Set <var>task</var>'s <a href=#concept-task-source id=queuing-tasks:concept-task-source>source</a> to <var>source</var>.<li>Set <var>task</var>'s <a href=#concept-task-document id=queuing-tasks:concept-task-document>document</a> to the <var>document</var>.<li>Set <var>task</var>'s <a href=#script-evaluation-environment-settings-object-set id=queuing-tasks:script-evaluation-environment-settings-object-set>script evaluation environment settings object set</a> to an empty <a id=queuing-tasks:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a>.<li>Let <var>queue</var> be the <a href=#task-queue id=queuing-tasks:task-queue>task queue</a> to which <var>source</var> is associated on <var>event loop</var>.<li><a href=https://infra.spec.whatwg.org/#list-append id=queuing-tasks:list-append data-x-internal=list-append>Append</a> <var>task</var> to <var>queue</var>.</ol> Failing to pass an event loop and document to <a href=#queue-a-task id=queuing-tasks:queue-a-task>queue a task</a> means relying on the ambiguous and poorly-specified <a href=#implied-event-loop id=queuing-tasks:implied-event-loop-2>implied event loop</a> and <a href=#implied-document id=queuing-tasks:implied-document-2>implied document</a> concepts. Specification authors should either always pass these values, or use the wrapper algorithms <a href=#queue-a-global-task id=queuing-tasks:queue-a-global-task>queue a global task</a> or <a href=#queue-an-element-task id=queuing-tasks:queue-an-element-task>queue an element task</a> instead. Using the wrapper algorithms is recommended. To <dfn id=queue-a-global-task data-export="">queue a global task</dfn> on a <a href=#task-source id=queuing-tasks:task-source-2>task source</a> <var>source</var>, with a <a href=#global-object id=queuing-tasks:global-object>global object</a> <var>global</var> and a series of steps <var>steps</var>: <ol><li>Let <var>event loop</var> be <var>global</var>'s <a href=#relevant-agent id=queuing-tasks:relevant-agent>relevant agent</a>'s <a href=#concept-agent-event-loop id=queuing-tasks:concept-agent-event-loop>event loop</a>.<li>Let <var>document</var> be <var>global</var>'s <a href=nav-history-apis.html#concept-document-window id=queuing-tasks:concept-document-window>associated <code>Document</code></a>, if <var>global</var> is a <code id=queuing-tasks:window><a href=nav-history-apis.html#window>Window</a></code> object; otherwise null. <li><a href=#queue-a-task id=queuing-tasks:queue-a-task-2>Queue a task</a> given <var>source</var>, <var>event loop</var>, <var>document</var>, and <var>steps</var>.</ol> To <dfn id=queue-an-element-task data-export="">queue an element task</dfn> on a <a href=#task-source id=queuing-tasks:task-source-3>task source</a> <var>source</var>, with an element <var>element</var> and a series of steps <var>steps</var>: <ol><li>Let <var>global</var> be <var>element</var>'s <a href=#concept-relevant-global id=queuing-tasks:concept-relevant-global>relevant global object</a>.<li><a href=#queue-a-global-task id=queuing-tasks:queue-a-global-task-2>Queue a global task</a> given <var>source</var>, <var>global</var>, and <var>steps</var>.</ol> To <dfn id=queue-a-microtask data-export="">queue a microtask</dfn> which performs a series of steps <var>steps</var>, optionally given a document <var>document</var>: <ol><li><a id=queuing-tasks:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: there is a <a id=queuing-tasks:surrounding-agent href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding agent</a>. I.e., this algorithm is not called while <a id=queuing-tasks:in-parallel href=infrastructure.html#in-parallel>in parallel</a>.<li>Let <var>eventLoop</var> be the <a id=queuing-tasks:surrounding-agent-2 href=https://tc39.es/ecma262/#surrounding-agent data-x-internal=surrounding-agent>surrounding agent</a>'s <a href=#concept-agent-event-loop id=queuing-tasks:concept-agent-event-loop-2>event loop</a>.<li>If <var>document</var> was not given, set <var>document</var> to the <a href=#implied-document id=queuing-tasks:implied-document-3>implied document</a>.<li>Let <var>microtask</var> be a new <a href=#concept-task id=queuing-tasks:concept-task-2>task</a>.<li>Set <var>microtask</var>'s <a href=#concept-task-steps id=queuing-tasks:concept-task-steps-2>steps</a> to <var>steps</var>.<li>Set <var>microtask</var>'s <a href=#concept-task-source id=queuing-tasks:concept-task-source-2>source</a> to the <dfn id=microtask-task-source>microtask task source</dfn>.<li>Set <var>microtask</var>'s <a href=#concept-task-document id=queuing-tasks:concept-task-document-2>document</a> to <var>document</var>.<li>Set <var>microtask</var>'s <a href=#script-evaluation-environment-settings-object-set id=queuing-tasks:script-evaluation-environment-settings-object-set-2>script evaluation environment settings object set</a> to an empty <a id=queuing-tasks:set-2 href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a>.<li><a id=queuing-tasks:enqueue href=https://infra.spec.whatwg.org/#queue-enqueue data-x-internal=enqueue>Enqueue</a> <var>microtask</var> on <var>eventLoop</var>'s <a href=#microtask-queue id=queuing-tasks:microtask-queue>microtask queue</a>.</ol> It is possible for a <a href=#microtask id=queuing-tasks:microtask>microtask</a> to be moved to a regular <a href=#task-queue id=queuing-tasks:task-queue-2>task queue</a>, if, during its initial execution, it <a href=#spin-the-event-loop id=queuing-tasks:spin-the-event-loop>spins the event loop</a>. This is the only case in which the <a href=#concept-task-source id=queuing-tasks:concept-task-source-3>source</a>, <a href=#concept-task-document id=queuing-tasks:concept-task-document-3>document</a>, and <a href=#script-evaluation-environment-settings-object-set id=queuing-tasks:script-evaluation-environment-settings-object-set-3>script evaluation environment settings object set</a> of the microtask are consulted; they are ignored by the <a href=#perform-a-microtask-checkpoint id=queuing-tasks:perform-a-microtask-checkpoint>perform a microtask checkpoint</a> algorithm. The <dfn id=implied-event-loop>implied event loop</dfn> when queuing a task is the one that can deduced from the context of the calling algorithm. This is generally unambiguous, as most specification algorithms only ever involve a single <a id=queuing-tasks:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a> (and thus a single <a href=#event-loop id=queuing-tasks:event-loop>event loop</a>). The exception is algorithms involving or specifying cross-agent communication (e.g., between a window and a worker); for those cases, the <a href=#implied-event-loop id=queuing-tasks:implied-event-loop-3>implied event loop</a> concept must not be relied upon and specifications must explicitly provide an <a href=#event-loop id=queuing-tasks:event-loop-2>event loop</a> when <a href=#queue-a-task id=queuing-tasks:queue-a-task-3>queuing a task</a>. The <dfn id=implied-document>implied document</dfn> when queuing a task on an <a href=#event-loop id=queuing-tasks:event-loop-3>event loop</a> <var>event loop</var> is determined as follows: <ol><li>If <var>event loop</var> is not a <a href=#window-event-loop id=queuing-tasks:window-event-loop>window event loop</a>, then return null.<li>If the task is being queued in the context of an element, then return the element's <a id=queuing-tasks:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>If the task is being queued in the context of a <a id=queuing-tasks:browsing-context href=document-sequences.html#browsing-context>browsing context</a>, then return the browsing context's <a id=queuing-tasks:active-document href=document-sequences.html#active-document>active document</a>.<li>If the task is being queued by or for a <a href=#concept-script id=queuing-tasks:concept-script>script</a>, then return the script's <a href=#settings-object id=queuing-tasks:settings-object>settings object</a>'s <a href=#concept-settings-object-global id=queuing-tasks:concept-settings-object-global>global object</a>'s <a href=nav-history-apis.html#concept-document-window id=queuing-tasks:concept-document-window-2>associated <code>Document</code></a>.<li><a id=queuing-tasks:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: this step is never reached, because one of the previous conditions is true. Really?</ol> Both <a href=#implied-event-loop id=queuing-tasks:implied-event-loop-4>implied event loop</a> and <a href=#implied-document id=queuing-tasks:implied-document-4>implied document</a> are vaguely-defined and have a lot of action-at-a-distance. The hope is to remove these, especially <a href=#implied-document id=queuing-tasks:implied-document-5>implied document</a>. See <a href=https://github.com/whatwg/html/issues/4980>issue #4980</a>. <h5 id=event-loop-processing-model data-dfn-type=dfn data-lt="event loop processing model">8.1.7.3 Processing model<a href=#event-loop-processing-model class=self-link></a></h5> An <a href=#event-loop id=event-loop-processing-model:event-loop>event loop</a> must continually run through the following steps for as long as it exists: <ol id=step1><li>Let <var>oldestTask</var> and <var>taskStartTime</var> be null.<li> If the <a href=#event-loop id=event-loop-processing-model:event-loop-2>event loop</a> has a <a href=#task-queue id=event-loop-processing-model:task-queue>task queue</a> with at least one <a href=#concept-task-runnable id=event-loop-processing-model:concept-task-runnable>runnable</a> <a href=#concept-task id=event-loop-processing-model:concept-task>task</a>, then: <ol><li> Let <var>taskQueue</var> be one such <a href=#task-queue id=event-loop-processing-model:task-queue-2>task queue</a>, chosen in an <a id=event-loop-processing-model:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner. Remember that the <a href=#microtask-queue id=event-loop-processing-model:microtask-queue>microtask queue</a> is not a <a href=#task-queue id=event-loop-processing-model:task-queue-3>task queue</a>, so it will not be chosen in this step. However, a <a href=#task-queue id=event-loop-processing-model:task-queue-4>task queue</a> to which the <a href=#microtask-task-source id=event-loop-processing-model:microtask-task-source>microtask task source</a> is associated might be chosen in this step. In that case, the <a href=#concept-task id=event-loop-processing-model:concept-task-2>task</a> chosen in the next step was originally a <a href=#microtask id=event-loop-processing-model:microtask>microtask</a>, but it got moved as part of <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop>spinning the event loop</a>. <li>Set <var>taskStartTime</var> to the <a id=event-loop-processing-model:unsafe-shared-current-time href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>.<li>Set <var>oldestTask</var> to the first <a href=#concept-task-runnable id=event-loop-processing-model:concept-task-runnable-2>runnable</a> <a href=#concept-task id=event-loop-processing-model:concept-task-3>task</a> in <var>taskQueue</var>, and <a href=https://infra.spec.whatwg.org/#list-remove id=event-loop-processing-model:list-remove data-x-internal=list-remove>remove</a> it from <var>taskQueue</var>.<li>If <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document>document</a> is not null, then <a id=event-loop-processing-model:record-task-start-time href=https://w3c.github.io/long-animation-frames/#record-task-start-time data-x-internal=record-task-start-time>record task start time</a> given <var>taskStartTime</var> and <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document-2>document</a>.<li>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-3>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task>currently running task</a> to <var>oldestTask</var>.<li>Perform <var>oldestTask</var>'s <a href=#concept-task-steps id=event-loop-processing-model:concept-task-steps>steps</a>.<li>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-4>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-2>currently running task</a> back to null.<li><a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint>Perform a microtask checkpoint</a>.</ol> <li>Let <var>taskEndTime</var> be the <a id=event-loop-processing-model:unsafe-shared-current-time-2 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>. <a href=references.html#refsHRT>[HRT]</a><li> If <var>oldestTask</var> is not null, then: <ol><li>Let <var>top-level browsing contexts</var> be an empty <a id=event-loop-processing-model:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a>.<li> For each <a href=#environment-settings-object id=event-loop-processing-model:environment-settings-object>environment settings object</a> <var>settings</var> of <var>oldestTask</var>'s <a href=#script-evaluation-environment-settings-object-set id=event-loop-processing-model:script-evaluation-environment-settings-object-set>script evaluation environment settings object set</a>: <ol><li>Let <var>global</var> be <var>settings</var>'s <a href=#concept-settings-object-global id=event-loop-processing-model:concept-settings-object-global>global object</a>.<li>If <var>global</var> is not a <code id=event-loop-processing-model:window><a href=nav-history-apis.html#window>Window</a></code> object, then <a id=event-loop-processing-model:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>If <var>global</var>'s <a href=nav-history-apis.html#window-bc id=event-loop-processing-model:window-bc>browsing context</a> is null, then <a id=event-loop-processing-model:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>Let <var>tlbc</var> be <var>global</var>'s <a href=nav-history-apis.html#window-bc id=event-loop-processing-model:window-bc-2>browsing context</a>'s <a href=document-sequences.html#bc-tlbc id=event-loop-processing-model:bc-tlbc>top-level browsing context</a>.<li>If <var>tlbc</var> is not null, then <a href=https://infra.spec.whatwg.org/#set-append id=event-loop-processing-model:set-append data-x-internal=set-append>append</a> it to <var>top-level browsing contexts</var>.</ol> <li><a id=event-loop-processing-model:report-long-tasks href=https://w3c.github.io/longtasks/#report-long-tasks data-x-internal=report-long-tasks>Report long tasks</a>, passing in <var>taskStartTime</var>, <var>taskEndTime</var>, <var>top-level browsing contexts</var>, and <var>oldestTask</var>.<li>If <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document-3>document</a> is not null, then <a id=event-loop-processing-model:record-task-end-time href=https://w3c.github.io/long-animation-frames/#record-task-end-time data-x-internal=record-task-end-time>record task end time</a> given <var>taskEndTime</var> and <var>oldestTask</var>'s <a href=#concept-task-document id=event-loop-processing-model:concept-task-document-4>document</a>.</ol> <li id=idle-deadline-computation> If this is a <a href=#window-event-loop id=event-loop-processing-model:window-event-loop>window event loop</a> that has no <a href=#concept-task-runnable id=event-loop-processing-model:concept-task-runnable-3>runnable</a> <a href=#concept-task id=event-loop-processing-model:concept-task-4>task</a> in this <a href=#event-loop id=event-loop-processing-model:event-loop-5>event loop</a>'s <a href=#task-queue id=event-loop-processing-model:task-queue-5>task queues</a>, then: <ol><li>Set this <a href=#event-loop id=event-loop-processing-model:event-loop-6>event loop</a>'s <a href=#last-idle-period-start-time id=event-loop-processing-model:last-idle-period-start-time>last idle period start time</a> to the <a id=event-loop-processing-model:unsafe-shared-current-time-3 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>.<li> Let <var>computeDeadline</var> be the following steps: <ol><li> Let <var>deadline</var> be this <a href=#event-loop id=event-loop-processing-model:event-loop-7>event loop</a>'s <a href=#last-idle-period-start-time id=event-loop-processing-model:last-idle-period-start-time-2>last idle period start time</a> plus 50. The cap of 50ms in the future is to ensure responsiveness to new user input within the threshold of human perception. <li>Let <var>hasPendingRenders</var> be false.<li> For each <var>windowInSameLoop</var> of the <a href=#same-loop-windows id=event-loop-processing-model:same-loop-windows>same-loop windows</a> for this <a href=#event-loop id=event-loop-processing-model:event-loop-8>event loop</a>: <ol><li>If <var>windowInSameLoop</var>'s <a id=event-loop-processing-model:list-of-animation-frame-callbacks href=imagebitmap-and-animations.html#list-of-animation-frame-callbacks>map of animation frame callbacks</a> is not <a href=https://infra.spec.whatwg.org/#map-is-empty id=event-loop-processing-model:map-empty data-x-internal=map-empty>empty</a>, or if the user agent believes that the <var>windowInSameLoop</var> might have pending rendering updates, set <var>hasPendingRenders</var> to true.<li>Let <var>timerCallbackEstimates</var> be the result of <a href=https://infra.spec.whatwg.org/#map-getting-the-values id=event-loop-processing-model:map-get-the-values data-x-internal=map-get-the-values>getting the values</a> of <var>windowInSameLoop</var>'s <a id=event-loop-processing-model:map-of-active-timers href=timers-and-user-prompts.html#map-of-active-timers>map of active timers</a>.<li>For each <var>timeoutDeadline</var> of <var>timerCallbackEstimates</var>, if <var>timeoutDeadline</var> is less than <var>deadline</var>, set <var>deadline</var> to <var>timeoutDeadline</var>.</ol> <li> If <var>hasPendingRenders</var> is true, then: <ol><li> Let <var>nextRenderDeadline</var> be this <a href=#event-loop id=event-loop-processing-model:event-loop-9>event loop</a>'s <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time>last render opportunity time</a> plus (1000 divided by the current refresh rate). The refresh rate can be hardware- or implementation-specific. For a refresh rate of 60Hz, the <var>nextRenderDeadline</var> would be about 16.67ms after the <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time-2>last render opportunity time</a>. <li>If <var>nextRenderDeadline</var> is less than <var>deadline</var>, then return <var>nextRenderDeadline</var>.</ol> <li>Return <var>deadline</var>.</ol> <li>For each <var>win</var> of the <a href=#same-loop-windows id=event-loop-processing-model:same-loop-windows-2>same-loop windows</a> for this <a href=#event-loop id=event-loop-processing-model:event-loop-10>event loop</a>, perform the <a id=event-loop-processing-model:start-an-idle-period-algorithm href=https://w3c.github.io/requestidlecallback/#start-an-idle-period-algorithm data-x-internal=start-an-idle-period-algorithm>start an idle period algorithm</a> for <var>win</var> with the following step: return the result of calling <var>computeDeadline</var>, <a href=https://w3c.github.io/hr-time/#dfn-coarsen-time id=event-loop-processing-model:coarsen-time data-x-internal=coarsen-time>coarsened</a> given <var>win</var>'s <a href=#relevant-settings-object id=event-loop-processing-model:relevant-settings-object>relevant settings object</a>'s <a href=#concept-settings-object-cross-origin-isolated-capability id=event-loop-processing-model:concept-settings-object-cross-origin-isolated-capability>cross-origin isolated capability</a>. <a href=references.html#refsREQUESTIDLECALLBACK>[REQUESTIDLECALLBACK]</a></ol> <li> If this is a <a href=#worker-event-loop-2 id=event-loop-processing-model:worker-event-loop-2>worker event loop</a>, then: <ol><li> If this <a href=#event-loop id=event-loop-processing-model:event-loop-11>event loop</a>'s <a id=event-loop-processing-model:agent href=https://tc39.es/ecma262/#sec-agents data-x-internal=agent>agent</a>'s single <a id=event-loop-processing-model:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>'s <a href=#concept-realm-global id=event-loop-processing-model:concept-realm-global>global object</a> is a <a href=imagebitmap-and-animations.html#concept-animationframeprovider-supported id=event-loop-processing-model:concept-animationframeprovider-supported>supported</a> <code id=event-loop-processing-model:dedicatedworkerglobalscope><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code> and the user agent believes that it would benefit from having its rendering updated at this time, then: <ol><li>Let <var>now</var> be the <a id=event-loop-processing-model:current-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given the <code id=event-loop-processing-model:dedicatedworkerglobalscope-2><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>. <a href=references.html#refsHRT>[HRT]</a><li><a id=event-loop-processing-model:run-the-animation-frame-callbacks href=imagebitmap-and-animations.html#run-the-animation-frame-callbacks>Run the animation frame callbacks</a> for that <code id=event-loop-processing-model:dedicatedworkerglobalscope-3><a href=workers.html#dedicatedworkerglobalscope>DedicatedWorkerGlobalScope</a></code>, passing in <var>now</var> as the timestamp.<li>Update the rendering of that dedicated worker to reflect the current state.</ol> Similar to the notes for <a href=#update-the-rendering id=event-loop-processing-model:update-the-rendering>updating the rendering</a> in a <a href=#window-event-loop id=event-loop-processing-model:window-event-loop-2>window event loop</a>, a user agent can determine the rate of rendering in the dedicated worker. <li>If there are no <a href=#concept-task id=event-loop-processing-model:concept-task-5>tasks</a> in the <a href=#event-loop id=event-loop-processing-model:event-loop-12>event loop</a>'s <a href=#task-queue id=event-loop-processing-model:task-queue-6>task queues</a> and the <code id=event-loop-processing-model:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code> object's <a href=workers.html#dom-workerglobalscope-closing id=event-loop-processing-model:dom-workerglobalscope-closing>closing</a> flag is true, then destroy the <a href=#event-loop id=event-loop-processing-model:event-loop-13>event loop</a>, aborting these steps, resuming the <a id=event-loop-processing-model:run-a-worker href=workers.html#run-a-worker>run a worker</a> steps described in the <a href=workers.html#workers>Web workers</a> section below.</ol> </ol> A <a href=#window-event-loop id=event-loop-processing-model:window-event-loop-3>window event loop</a> <var>eventLoop</var> must also run the following <a id=event-loop-processing-model:in-parallel href=infrastructure.html#in-parallel>in parallel</a>, as long as it exists: <ol><li>Wait until at least one <a id=event-loop-processing-model:navigable href=document-sequences.html#navigable>navigable</a> whose <a href=document-sequences.html#nav-document id=event-loop-processing-model:nav-document>active document</a>'s <a href=#relevant-agent id=event-loop-processing-model:relevant-agent>relevant agent</a>'s <a href=#concept-agent-event-loop id=event-loop-processing-model:concept-agent-event-loop>event loop</a> is <var>eventLoop</var> might have a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity>rendering opportunity</a>.<li>Set <var>eventLoop</var>'s <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time-3>last render opportunity time</a> to the <a id=event-loop-processing-model:unsafe-shared-current-time-4 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>.<li> For each <var>navigable</var> that has a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-2>rendering opportunity</a>, <a href=#queue-a-global-task id=event-loop-processing-model:queue-a-global-task>queue a global task</a> on the <a href=#rendering-task-source id=event-loop-processing-model:rendering-task-source>rendering task source</a> given <var>navigable</var>'s <a href=document-sequences.html#nav-window id=event-loop-processing-model:nav-window>active window</a> to <dfn id=update-the-rendering data-export="">update the rendering</dfn>: This might cause redundant calls to <a href=#update-the-rendering id=event-loop-processing-model:update-the-rendering-2>update the rendering</a>. However, these calls would have no observable effect because there will be no rendering necessary, as per the Unnecessary rendering step. Implementations can introduce further optimizations such as only queuing this task when it is not already queued. However, note that the document associated with the task might become inactive before the task is processed. <ol><li>Let <var>frameTimestamp</var> be <var>eventLoop</var>'s <a href=#last-render-opportunity-time id=event-loop-processing-model:last-render-opportunity-time-4>last render opportunity time</a>.<li> Let <var>docs</var> be all <a id=event-loop-processing-model:fully-active href=document-sequences.html#fully-active>fully active</a> <code id=event-loop-processing-model:document><a href=dom.html#document>Document</a></code> objects whose <a href=#relevant-agent id=event-loop-processing-model:relevant-agent-2>relevant agent</a>'s <a href=#concept-agent-event-loop id=event-loop-processing-model:concept-agent-event-loop-2>event loop</a> is <var>eventLoop</var>, sorted arbitrarily except that the following conditions must be met: <ul><li>Any <code id=event-loop-processing-model:document-2><a href=dom.html#document>Document</a></code> <var>B</var> whose <a href=document-sequences.html#doc-container-document id=event-loop-processing-model:doc-container-document>container document</a> is <var>A</var> must be listed after <var>A</var> in the list.<li>If there are two documents <var>A</var> and <var>B</var> that both have the same non-null <a href=document-sequences.html#doc-container-document id=event-loop-processing-model:doc-container-document-2>container document</a> <var>C</var>, then the order of <var>A</var> and <var>B</var> in the list must match the <a id=event-loop-processing-model:shadow-including-tree-order href=https://dom.spec.whatwg.org/#concept-shadow-including-tree-order data-x-internal=shadow-including-tree-order>shadow-including tree order</a> of their respective <a href=document-sequences.html#navigable-container id=event-loop-processing-model:navigable-container>navigable containers</a> in <var>C</var>'s <a id=event-loop-processing-model:node-tree href=https://dom.spec.whatwg.org/#concept-node-tree data-x-internal=node-tree>node tree</a>.</ul> In the steps below that iterate over <var>docs</var>, each <code id=event-loop-processing-model:document-3><a href=dom.html#document>Document</a></code> must be processed in the order it is found in the list. <li> Filter non-renderable documents: Remove from <var>docs</var> any <code id=event-loop-processing-model:document-4><a href=dom.html#document>Document</a></code> object <var>doc</var> for which any of the following are true: <ul><li><var>doc</var> is <a id=event-loop-processing-model:render-blocked href=dom.html#render-blocked>render-blocked</a>;<li><var>doc</var>'s <a id=event-loop-processing-model:visibility-state href=interaction.html#visibility-state>visibility state</a> is "<code>hidden</code>";<li><var>doc</var>'s rendering is <a href=https://drafts.csswg.org/css-view-transitions/#document-rendering-suppression-for-view-transitions id=event-loop-processing-model:rendering-suppression-for-view-transitions data-x-internal=rendering-suppression-for-view-transitions>suppressed for view transitions</a>; or<li><var>doc</var>'s <a id=event-loop-processing-model:node-navigable href=document-sequences.html#node-navigable>node navigable</a> doesn't currently have a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-3>rendering opportunity</a>.</ul> We have to check for rendering opportunities here, in addition to checking that in the <a id=event-loop-processing-model:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a> steps, as some documents that share the same <a href=#event-loop id=event-loop-processing-model:event-loop-14>event loop</a> might not have a <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-4>rendering opportunity</a> at the same time. <li> Unnecessary rendering: Remove from <var>docs</var> any <code id=event-loop-processing-model:document-5><a href=dom.html#document>Document</a></code> object <var>doc</var> for which all of the following are true: <ul><li>the user agent believes that updating the rendering of <var>doc</var>'s <a id=event-loop-processing-model:node-navigable-2 href=document-sequences.html#node-navigable>node navigable</a> would have no visible effect; and<li><var>doc</var>'s <a id=event-loop-processing-model:list-of-animation-frame-callbacks-2 href=imagebitmap-and-animations.html#list-of-animation-frame-callbacks>map of animation frame callbacks</a> is empty.</ul> <li> Remove from <var>docs</var> all <code id=event-loop-processing-model:document-6><a href=dom.html#document>Document</a></code> objects for which the user agent believes that it's preferable to skip updating the rendering for other reasons. <div class=note> The step labeled Filter non-renderable documents prevents the user agent from updating the rendering when it is unable to present new content to the user. The step labeled Unnecessary rendering prevents the user agent from updating the rendering when there's no new content to draw. This step enables the user agent to prevent the steps below from running for other reasons, for example, to ensure certain <a href=#concept-task id=event-loop-processing-model:concept-task-6>tasks</a> are executed immediately after each other, with only <a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-2>microtask checkpoints</a> interleaved (and without, e.g., <a href=imagebitmap-and-animations.html#run-the-animation-frame-callbacks id=event-loop-processing-model:run-the-animation-frame-callbacks-2>animation frame callbacks</a> interleaved). Concretely, a user agent might wish to coalesce timer callbacks together, with no intermediate rendering updates. </div> <li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:reveal href=browsing-the-web.html#reveal>reveal</a> <var>doc</var>.<li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:flush-autofocus-candidates href=interaction.html#flush-autofocus-candidates>flush autofocus candidates</a> for <var>doc</var> if its <a id=event-loop-processing-model:node-navigable-3 href=document-sequences.html#node-navigable>node navigable</a> is a <a id=event-loop-processing-model:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a>.<li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-resize-steps href=https://drafts.csswg.org/cssom-view/#document-run-the-resize-steps data-x-internal=run-the-resize-steps>run the resize steps</a> for <var>doc</var>. <a href=references.html#refsCSSOMVIEW>[CSSOMVIEW]</a><li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-scroll-steps href=https://drafts.csswg.org/cssom-view/#document-run-the-scroll-steps data-x-internal=run-the-scroll-steps>run the scroll steps</a> for <var>doc</var>. <a href=references.html#refsCSSOMVIEW>[CSSOMVIEW]</a><li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:evaluate-media-queries-and-report-changes href=https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes data-x-internal=evaluate-media-queries-and-report-changes>evaluate media queries and report changes</a> for <var>doc</var>. <a href=references.html#refsCSSOMVIEW>[CSSOMVIEW]</a><li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:update-animations-and-send-events href=https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events data-x-internal=update-animations-and-send-events>update animations and send events</a> for <var>doc</var>, passing in <a id=event-loop-processing-model:relative-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-relative-high-resolution-time data-x-internal=relative-high-resolution-time>relative high resolution time</a> given <var>frameTimestamp</var> and <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global>relevant global object</a> as the timestamp <a href=references.html#refsWEBANIMATIONS>[WEBANIMATIONS]</a><li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-fullscreen-steps href=https://fullscreen.spec.whatwg.org/#run-the-fullscreen-steps data-x-internal=run-the-fullscreen-steps>run the fullscreen steps</a> for <var>doc</var>. <a href=references.html#refsFULLSCREEN>[FULLSCREEN]</a><li> For each <var>doc</var> of <var>docs</var>, if the user agent detects that the backing storage associated with a <code id=event-loop-processing-model:canvasrenderingcontext2d><a href=canvas.html#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> or an <code id=event-loop-processing-model:offscreencanvasrenderingcontext2d><a href=canvas.html#offscreencanvasrenderingcontext2d>OffscreenCanvasRenderingContext2D</a></code>, <var>context</var>, has been lost, then it must run the <dfn id=context-lost-steps>context lost steps</dfn> for each such <var>context</var>: <ol><li>Let <var>canvas</var> be the value of <var>context</var>'s <code id=event-loop-processing-model:dom-context-2d-canvas><a href=canvas.html#dom-context-2d-canvas>canvas</a></code> attribute, if <var>context</var> is a <code id=event-loop-processing-model:canvasrenderingcontext2d-2><a href=canvas.html#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>, or the <a id=event-loop-processing-model:associated-offscreencanvas-object href=canvas.html#associated-offscreencanvas-object>associated <code>OffscreenCanvas</code> object</a> for <var>context</var> otherwise.<li>Set <var>context</var>'s <a href=canvas.html#concept-canvas-context-lost id=event-loop-processing-model:concept-canvas-context-lost>context lost</a> to true.<li><a id=event-loop-processing-model:reset-the-rendering-context-to-its-default-state href=canvas.html#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a> given <var>context</var>.<li>Let <var>shouldRestore</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=event-loop-processing-model:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=event-loop-processing-model:event-contextlost><a href=indices.html#event-contextlost>contextlost</a></code> at <var>canvas</var>, with the <code id=event-loop-processing-model:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li>If <var>shouldRestore</var> is false, then abort these steps.<li>Attempt to restore <var>context</var> by creating a backing storage using <var>context</var>'s attributes and associating them with <var>context</var>. If this fails, then abort these steps.<li>Set <var>context</var>'s <a href=canvas.html#concept-canvas-context-lost id=event-loop-processing-model:concept-canvas-context-lost-2>context lost</a> to false.<li><a href=https://dom.spec.whatwg.org/#concept-event-fire id=event-loop-processing-model:concept-event-fire-2 data-x-internal=concept-event-fire>Fire an event</a> named <code id=event-loop-processing-model:event-contextrestored><a href=indices.html#event-contextrestored>contextrestored</a></code> at <var>canvas</var>.</ol> <li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-animation-frame-callbacks-3 href=imagebitmap-and-animations.html#run-the-animation-frame-callbacks>run the animation frame callbacks</a> for <var>doc</var>, passing in the <a id=event-loop-processing-model:relative-high-resolution-time-2 href=https://w3c.github.io/hr-time/#dfn-relative-high-resolution-time data-x-internal=relative-high-resolution-time>relative high resolution time</a> given <var>frameTimestamp</var> and <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global-2>relevant global object</a> as the timestamp.<li>Let <var>unsafeStyleAndLayoutStartTime</var> be the <a id=event-loop-processing-model:unsafe-shared-current-time-5 href=https://w3c.github.io/hr-time/#dfn-unsafe-shared-current-time data-x-internal=unsafe-shared-current-time>unsafe shared current time</a>. <li> For each <var>doc</var> of <var>docs</var>: <ol><li>Let <var>resizeObserverDepth</var> be 0.<li> While true: <ol><li>Recalculate styles and update layout for <var>doc</var>.<li>Let <var>hadInitialVisibleContentVisibilityDetermination</var> be false.<li> For each element <var>element</var> with <a href=https://drafts.csswg.org/css-contain/#propdef-content-visibility id=event-loop-processing-model:content-visibility-auto data-x-internal=content-visibility-auto>'auto'</a> used value of <a id="event-loop-processing-model:'content-visibility'" href=https://drafts.csswg.org/css-contain/#content-visibility data-x-internal="'content-visibility'">'content-visibility'</a>: <ol><li>Let <var>checkForInitialDetermination</var> be true if <var>element</var>'s <a id=event-loop-processing-model:proximity-to-the-viewport href=https://drafts.csswg.org/css-contain/#proximity-to-the-viewport data-x-internal=proximity-to-the-viewport>proximity to the viewport</a> is not determined and it is not <a id=event-loop-processing-model:relevant-to-the-user href=https://drafts.csswg.org/css-contain/#relevant-to-the-user data-x-internal=relevant-to-the-user>relevant to the user</a>. Otherwise, let <var>checkForInitialDetermination</var> be false.<li>Determine <a id=event-loop-processing-model:proximity-to-the-viewport-2 href=https://drafts.csswg.org/css-contain/#proximity-to-the-viewport data-x-internal=proximity-to-the-viewport>proximity to the viewport</a> for <var>element</var>.<li>If <var>checkForInitialDetermination</var> is true and <var>element</var> is now <a id=event-loop-processing-model:relevant-to-the-user-2 href=https://drafts.csswg.org/css-contain/#relevant-to-the-user data-x-internal=relevant-to-the-user>relevant to the user</a>, then set <var>hadInitialVisibleContentVisibilityDetermination</var> to true.</ol> <li> If <var>hadInitialVisibleContentVisibilityDetermination</var> is true, then <a id=event-loop-processing-model:continue-3 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>. The intent of this step is for the initial viewport proximity determination, which takes effect immediately, to be reflected in the style and layout calculation which is carried out in a previous step of this loop. Proximity determinations other than the initial one take effect at the next <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-5>rendering opportunity</a>. <a href=references.html#refsCSSCONTAIN>[CSSCONTAIN]</a> <li><a id=event-loop-processing-model:gather-active-resize-observations-at-depth href=https://drafts.csswg.org/resize-observer-1/#gather-active-observations-h data-x-internal=gather-active-resize-observations-at-depth>Gather active resize observations at depth</a> <var>resizeObserverDepth</var> for <var>doc</var>.<li>If <var>doc</var> <a id=event-loop-processing-model:has-active-resize-observations href=https://drafts.csswg.org/resize-observer-1/#has-active-observations-h data-x-internal=has-active-resize-observations>has active resize observations</a>: <ol><li>Set <var>resizeObserverDepth</var> to the result of <a href=https://drafts.csswg.org/resize-observer-1/#broadcast-resize-notifications-h id=event-loop-processing-model:broadcast-active-resize-observations data-x-internal=broadcast-active-resize-observations>broadcasting active resize observations</a> given <var>doc</var>.<li><a id=event-loop-processing-model:continue-4 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>Otherwise, <a id=event-loop-processing-model:break href=https://infra.spec.whatwg.org/#iteration-break data-x-internal=break>break</a>.</ol> <li>If <var>doc</var> <a id=event-loop-processing-model:has-skipped-resize-observations href=https://drafts.csswg.org/resize-observer-1/#has-skipped-observations-h data-x-internal=has-skipped-resize-observations>has skipped resize observations</a>, then <a id=event-loop-processing-model:deliver-resize-loop-error href=https://drafts.csswg.org/resize-observer-1/#deliver-resize-error data-x-internal=deliver-resize-loop-error>deliver resize loop error</a> given <var>doc</var>.</ol> <li id=focus-fixup-rule> For each <var>doc</var> of <var>docs</var>, if the <a href=interaction.html#focused-area-of-the-document id=event-loop-processing-model:focused-area-of-the-document>focused area</a> of <var>doc</var> is not a <a id=event-loop-processing-model:focusable-area href=interaction.html#focusable-area>focusable area</a>, then run the <a id=event-loop-processing-model:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> for <var>doc</var>'s <a id=event-loop-processing-model:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>, and set <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global-3>relevant global object</a>'s <a href=nav-history-apis.html#window-navigation-api id=event-loop-processing-model:window-navigation-api>navigation API</a>'s <a id=event-loop-processing-model:focus-changed-during-ongoing-navigation href=nav-history-apis.html#focus-changed-during-ongoing-navigation>focus changed during ongoing navigation</a> to false. For example, this might happen because an element has the <code id=event-loop-processing-model:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute added, causing it to stop <a id=event-loop-processing-model:being-rendered href=rendering.html#being-rendered>being rendered</a>. It might also happen to an <code id=event-loop-processing-model:the-input-element><a href=input.html#the-input-element>input</a></code> element when the element gets <a href=form-control-infrastructure.html#concept-fe-disabled id=event-loop-processing-model:concept-fe-disabled>disabled</a>. This will <a href=interaction.html#note-sometimes-no-blur-event>usually</a> fire <code id=event-loop-processing-model:event-blur><a href=indices.html#event-blur>blur</a></code> events, and possibly <code id=event-loop-processing-model:event-change><a href=indices.html#event-change>change</a></code> events. In addition to this asynchronous fixup, if the <a id=event-loop-processing-model:focused-area-of-the-document-2 href=interaction.html#focused-area-of-the-document>focused area of the document</a> is removed, there is a <a href=infrastructure.html#node-remove-focus-fixup>synchronous fixup</a>. That one will not fire <code id=event-loop-processing-model:event-blur-2><a href=indices.html#event-blur>blur</a></code> or <code id=event-loop-processing-model:event-change-2><a href=indices.html#event-change>change</a></code> events. <li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:perform-pending-transition-operations href=https://drafts.csswg.org/css-view-transitions/#perform-pending-transition-operations data-x-internal=perform-pending-transition-operations>perform pending transition operations</a> for <var>doc</var>. <a href=references.html#refsCSSVIEWTRANSITIONS>[CSSVIEWTRANSITIONS]</a><li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:run-the-update-intersection-observations-steps href=https://w3c.github.io/IntersectionObserver/#run-the-update-intersection-observations-steps data-x-internal=run-the-update-intersection-observations-steps>run the update intersection observations steps</a> for <var>doc</var>, passing in the <a id=event-loop-processing-model:relative-high-resolution-time-3 href=https://w3c.github.io/hr-time/#dfn-relative-high-resolution-time data-x-internal=relative-high-resolution-time>relative high resolution time</a> given <var>now</var> and <var>doc</var>'s <a href=#concept-relevant-global id=event-loop-processing-model:concept-relevant-global-4>relevant global object</a> as the timestamp. <a href=references.html#refsINTERSECTIONOBSERVER>[INTERSECTIONOBSERVER]</a><li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:record-rendering-time href=https://w3c.github.io/long-animation-frames/#record-rendering-time data-x-internal=record-rendering-time>record rendering time</a> for <var>doc</var> given <var>unsafeStyleAndLayoutStartTime</var>.<li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:mark-paint-timing href=https://w3c.github.io/paint-timing/#mark-paint-timing data-x-internal=mark-paint-timing>mark paint timing</a> for <var>doc</var>.<li>For each <var>doc</var> of <var>docs</var>, update the rendering or user interface of <var>doc</var> and its <a id=event-loop-processing-model:node-navigable-4 href=document-sequences.html#node-navigable>node navigable</a> to reflect the current state.<li>For each <var>doc</var> of <var>docs</var>, <a id=event-loop-processing-model:process-top-layer-removals href=https://drafts.csswg.org/css-position-4/#process-top-layer-removals data-x-internal=process-top-layer-removals>process top layer removals</a> given <var>doc</var>.</ol> </ol> A <a id=event-loop-processing-model:navigable-2 href=document-sequences.html#navigable>navigable</a> has a <dfn id=rendering-opportunity data-export="">rendering opportunity</dfn> if the user agent is currently able to present the contents of the <a id=event-loop-processing-model:navigable-3 href=document-sequences.html#navigable>navigable</a> to the user, accounting for hardware refresh rate constraints and user agent throttling for performance reasons, but considering content presentable even if it's outside the viewport. A <a id=event-loop-processing-model:navigable-4 href=document-sequences.html#navigable>navigable</a>'s <a href=#rendering-opportunity id=event-loop-processing-model:rendering-opportunity-6>rendering opportunities</a> are determined based on hardware constraints such as display refresh rates and other factors such as page performance or whether its <a href=document-sequences.html#nav-document id=event-loop-processing-model:nav-document-2>active document</a>'s <a id=event-loop-processing-model:visibility-state-2 href=interaction.html#visibility-state>visibility state</a> is "<code>visible</code>". Rendering opportunities typically occur at regular intervals. This specification does not mandate any particular model for selecting rendering opportunities. But for example, if the browser is attempting to achieve a 60Hz refresh rate, then rendering opportunities occur at a maximum of every 60th of a second (about 16.7ms). If the browser finds that a <a id=event-loop-processing-model:navigable-5 href=document-sequences.html#navigable>navigable</a> is not able to sustain this rate, it might drop to a more sustainable 30 rendering opportunities per second for that <a id=event-loop-processing-model:navigable-6 href=document-sequences.html#navigable>navigable</a>, rather than occasionally dropping frames. Similarly, if a <a id=event-loop-processing-model:navigable-7 href=document-sequences.html#navigable>navigable</a> is not visible, the user agent might decide to drop that page to a much slower 4 rendering opportunities per second, or even less. <hr> When a user agent is to <dfn id=perform-a-microtask-checkpoint data-export="">perform a microtask checkpoint</dfn>: <ol><li>If the <a href=#event-loop id=event-loop-processing-model:event-loop-15>event loop</a>'s <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint>performing a microtask checkpoint</a> is true, then return.<li>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-16>event loop</a>'s <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-2>performing a microtask checkpoint</a> to true.<li> While the <a href=#event-loop id=event-loop-processing-model:event-loop-17>event loop</a>'s <a href=#microtask-queue id=event-loop-processing-model:microtask-queue-2>microtask queue</a> is not <a href=https://infra.spec.whatwg.org/#list-is-empty id=event-loop-processing-model:list-is-empty data-x-internal=list-is-empty>empty</a>: <ol><li>Let <var>oldestMicrotask</var> be the result of <a href=https://infra.spec.whatwg.org/#queue-dequeue id=event-loop-processing-model:dequeue data-x-internal=dequeue>dequeuing</a> from the <a href=#event-loop id=event-loop-processing-model:event-loop-18>event loop</a>'s <a href=#microtask-queue id=event-loop-processing-model:microtask-queue-3>microtask queue</a>.<li>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-19>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-3>currently running task</a> to <var>oldestMicrotask</var>.<li> Run <var>oldestMicrotask</var>. This might involve invoking scripted callbacks, which eventually calls the <a href=#clean-up-after-running-script id=event-loop-processing-model:clean-up-after-running-script>clean up after running script</a> steps, which call this <a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-3>perform a microtask checkpoint</a> algorithm again, which is why we use the <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-3>performing a microtask checkpoint</a> flag to avoid reentrancy. <li>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-20>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-4>currently running task</a> back to null.</ol> <li>For each <a href=#environment-settings-object id=event-loop-processing-model:environment-settings-object-2>environment settings object</a> <var>settingsObject</var> whose <a href=#responsible-event-loop id=event-loop-processing-model:responsible-event-loop>responsible event loop</a> is this <a href=#event-loop id=event-loop-processing-model:event-loop-21>event loop</a>, <a href=#notify-about-rejected-promises id=event-loop-processing-model:notify-about-rejected-promises>notify about rejected promises</a> given <var>settingsObject</var>'s <a href=#concept-settings-object-global id=event-loop-processing-model:concept-settings-object-global-2>global object</a>.<li><a id=event-loop-processing-model:cleanup-indexed-database-transactions href=https://w3c.github.io/IndexedDB/#cleanup-indexed-database-transactions data-x-internal=cleanup-indexed-database-transactions>Cleanup Indexed Database transactions</a>.<li> Perform <a id=event-loop-processing-model:clearkeptobjects href=https://tc39.es/ecma262/#sec-clear-kept-objects data-x-internal=clearkeptobjects>ClearKeptObjects</a>(). When <code id=event-loop-processing-model:weakref.prototype.deref()><a data-x-internal=weakref.prototype.deref() href=https://tc39.es/ecma262/#sec-weak-ref.prototype.deref>WeakRef.prototype.deref()</a></code> returns an object, that object is kept alive until the next invocation of <a id=event-loop-processing-model:clearkeptobjects-2 href=https://tc39.es/ecma262/#sec-clear-kept-objects data-x-internal=clearkeptobjects>ClearKeptObjects</a>(), after which it is again subject to garbage collection. <li>Set the <a href=#event-loop id=event-loop-processing-model:event-loop-22>event loop</a>'s <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-4>performing a microtask checkpoint</a> to false.<li><a id=event-loop-processing-model:record-timing-info-for-microtask-checkpoint href=https://w3c.github.io/long-animation-frames/#record-timing-info-for-microtask-checkpoint data-x-internal=record-timing-info-for-microtask-checkpoint>Record timing info for microtask checkpoint</a>.</ol> <hr> When an algorithm running <a id=event-loop-processing-model:in-parallel-3 href=infrastructure.html#in-parallel>in parallel</a> is to <dfn id=await-a-stable-state>await a stable state</dfn>, the user agent must <a href=#queue-a-microtask id=event-loop-processing-model:queue-a-microtask>queue a microtask</a> that runs the following steps, and must then stop executing (execution of the algorithm resumes when the microtask is run, as described in the following steps): <ol><li>Run the algorithm's <dfn id=synchronous-section>synchronous section</dfn>.<li>Resumes execution of the algorithm <a id=event-loop-processing-model:in-parallel-4 href=infrastructure.html#in-parallel>in parallel</a>, if appropriate, as described in the algorithm's steps.</ol> Steps in <a href=#synchronous-section id=event-loop-processing-model:synchronous-section>synchronous sections</a> are marked with ⌛. <hr> Algorithm steps that say to <dfn id=spin-the-event-loop>spin the event loop</dfn> until a condition <var>goal</var> is met are equivalent to substituting in the following algorithm steps: <ol><li> Let <var>task</var> be the <a href=#event-loop id=event-loop-processing-model:event-loop-23>event loop</a>'s <a href=#currently-running-task id=event-loop-processing-model:currently-running-task-5>currently running task</a>. <var>task</var> could be a <a href=#microtask id=event-loop-processing-model:microtask-2>microtask</a>. <li>Let <var>task source</var> be <var>task</var>'s <a href=#concept-task-source id=event-loop-processing-model:concept-task-source>source</a>.<li>Let <var>old stack</var> be a copy of the <a id=event-loop-processing-model:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li>Empty the <a id=event-loop-processing-model:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li> <a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-4>Perform a microtask checkpoint</a>. If <var>task</var> is a <a href=#microtask id=event-loop-processing-model:microtask-3>microtask</a> this step will be a no-op due to <a href=#performing-a-microtask-checkpoint id=event-loop-processing-model:performing-a-microtask-checkpoint-5>performing a microtask checkpoint</a> being true. <li> <a id=event-loop-processing-model:in-parallel-5 href=infrastructure.html#in-parallel>In parallel</a>: <ol><li>Wait until the condition <var>goal</var> is met.<li> <a href=#queue-a-task id=event-loop-processing-model:queue-a-task>Queue a task</a> on <var>task source</var> to: <ol><li>Replace the <a id=event-loop-processing-model:javascript-execution-context-stack-3 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> with <var>old stack</var>.<li> Perform any steps that appear after this <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-2>spin the event loop</a> instance in the original algorithm. This resumes <var>task</var>. </ol> </ol> <li> Stop <var>task</var>, allowing whatever algorithm that invoked it to resume. This causes the <a href=#event-loop id=event-loop-processing-model:event-loop-24>event loop</a>'s main set of steps or the <a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-5>perform a microtask checkpoint</a> algorithm to continue. </ol> Unlike other algorithms in this and other specifications, which behave similar to programming-language function calls, <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-3>spin the event loop</a> is more like a macro, which saves typing and indentation at the usage site by expanding into a series of steps and operations. <div class=example> An algorithm whose steps are: <ol><li>Do something.<li><a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-4>Spin the event loop</a> until awesomeness happens.<li>Do something else.</ol> is a shorthand which, after "macro expansion", becomes <ol><li>Do something.<li>Let <var>old stack</var> be a copy of the <a id=event-loop-processing-model:javascript-execution-context-stack-4 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li>Empty the <a id=event-loop-processing-model:javascript-execution-context-stack-5 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li><a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-6>Perform a microtask checkpoint</a>.<li> <a id=event-loop-processing-model:in-parallel-6 href=infrastructure.html#in-parallel>In parallel</a>: <ol><li>Wait until awesomeness happens.<li> <a href=#queue-a-task id=event-loop-processing-model:queue-a-task-2>Queue a task</a> on the task source in which "do something" was done to: <ol><li>Replace the <a id=event-loop-processing-model:javascript-execution-context-stack-6 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> with <var>old stack</var>.<li>Do something else.</ol> </ol> </ol> </div> <div class=example> Here is a more full example of the substitution, where the event loop is spun from inside a task that is queued from work in parallel. The version using <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-5>spin the event loop</a>: <ol><li> <a id=event-loop-processing-model:in-parallel-7 href=infrastructure.html#in-parallel>In parallel</a>: <ol><li>Do parallel thing 1.<li> <a href=#queue-a-task id=event-loop-processing-model:queue-a-task-3>Queue a task</a> on the <a href=#dom-manipulation-task-source id=event-loop-processing-model:dom-manipulation-task-source>DOM manipulation task source</a> to: <ol><li>Do task thing 1.<li><a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-6>Spin the event loop</a> until awesomeness happens.<li>Do task thing 2.</ol> <li>Do parallel thing 2.</ol> </ol> The fully expanded version: <ol><li> <a id=event-loop-processing-model:in-parallel-8 href=infrastructure.html#in-parallel>In parallel</a>: <ol><li>Do parallel thing 1.<li>Let <var>old stack</var> be null.<li> <a href=#queue-a-task id=event-loop-processing-model:queue-a-task-4>Queue a task</a> on the <a href=#dom-manipulation-task-source id=event-loop-processing-model:dom-manipulation-task-source-2>DOM manipulation task source</a> to: <ol><li>Do task thing 1.<li>Set <var>old stack</var> to a copy of the <a id=event-loop-processing-model:javascript-execution-context-stack-7 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li>Empty the <a id=event-loop-processing-model:javascript-execution-context-stack-8 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li><a href=#perform-a-microtask-checkpoint id=event-loop-processing-model:perform-a-microtask-checkpoint-7>Perform a microtask checkpoint</a>.</ol> <li>Wait until awesomeness happens.<li> <a href=#queue-a-task id=event-loop-processing-model:queue-a-task-5>Queue a task</a> on the <a href=#dom-manipulation-task-source id=event-loop-processing-model:dom-manipulation-task-source-3>DOM manipulation task source</a> to: <ol><li>Replace the <a id=event-loop-processing-model:javascript-execution-context-stack-9 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a> with <var>old stack</var>.<li>Do task thing 2.</ol> <li>Do parallel thing 2.</ol> </ol> </div> <hr> Some of the algorithms in this specification, for historical reasons, require the user agent to <dfn id=pause data-export="">pause</dfn> while running a <a href=#concept-task id=event-loop-processing-model:concept-task-7>task</a> until a condition <var>goal</var> is met. This means running the following steps: <ol><li>Let <var>global</var> be the <a href=#current-global-object id=event-loop-processing-model:current-global-object>current global object</a>.<li>Let <var>timeBeforePause</var> be the <a id=event-loop-processing-model:current-high-resolution-time-2 href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given <var>global</var>.<li>If necessary, update the rendering or user interface of any <code id=event-loop-processing-model:document-7><a href=dom.html#document>Document</a></code> or <a id=event-loop-processing-model:navigable-8 href=document-sequences.html#navigable>navigable</a> to reflect the current state.<li>Wait until the condition <var>goal</var> is met. While a user agent has a paused <a href=#concept-task id=event-loop-processing-model:concept-task-8>task</a>, the corresponding <a href=#event-loop id=event-loop-processing-model:event-loop-25>event loop</a> must not run further <a href=#concept-task id=event-loop-processing-model:concept-task-9>tasks</a>, and any script in the currently running <a href=#concept-task id=event-loop-processing-model:concept-task-10>task</a> must block. User agents should remain responsive to user input while paused, however, albeit in a reduced capacity since the <a href=#event-loop id=event-loop-processing-model:event-loop-26>event loop</a> will not be doing anything.<li><a id=event-loop-processing-model:record-pause-duration href=https://w3c.github.io/long-animation-frames/#record-pause-duration data-x-internal=record-pause-duration>Record pause duration</a> given the <a id=event-loop-processing-model:duration-from href=https://w3c.github.io/hr-time/#dfn-duration-from data-x-internal=duration-from>duration from</a> <var>timeBeforePause</var> to the <a id=event-loop-processing-model:current-high-resolution-time-3 href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given <var>global</var>.</ol> <div class=warning> <a href=#pause id=event-loop-processing-model:pause>Pausing</a> is highly detrimental to the user experience, especially in scenarios where a single <a href=#event-loop id=event-loop-processing-model:event-loop-27>event loop</a> is shared among multiple documents. User agents are encouraged to experiment with alternatives to <a href=#pause id=event-loop-processing-model:pause-2>pausing</a>, such as <a href=#spin-the-event-loop id=event-loop-processing-model:spin-the-event-loop-7>spinning the event loop</a> or even simply proceeding without any kind of suspended execution at all, insofar as it is possible to do so while preserving compatibility with existing content. This specification will happily change if a less-drastic alternative is discovered to be web-compatible. In the interim, implementers should be aware that the variety of alternatives that user agents might experiment with can change subtle aspects of <a href=#event-loop id=event-loop-processing-model:event-loop-28>event loop</a> behavior, including <a href=#concept-task id=event-loop-processing-model:concept-task-11>task</a> and <a href=#microtask id=event-loop-processing-model:microtask-4>microtask</a> timing. Implementations should continue experimenting even if doing so causes them to violate the exact semantics implied by the <a href=#pause id=event-loop-processing-model:pause-3>pause</a> operation. </div> <h5 id=generic-task-sources>8.1.7.4 Generic task sources<a href=#generic-task-sources class=self-link></a></h5> The following <a href=#task-source id=generic-task-sources:task-source>task sources</a> are used by a number of mostly unrelated features in this and other specifications. <dl><dt>The <dfn id=dom-manipulation-task-source data-export="">DOM manipulation task source</dfn><dd> This <a href=#task-source id=generic-task-sources:task-source-2>task source</a> is used for features that react to DOM manipulations, such as things that happen in a non-blocking fashion when an element is <a href=infrastructure.html#insert-an-element-into-a-document id=generic-task-sources:insert-an-element-into-a-document>inserted into the document</a>. <dt>The <dfn id=user-interaction-task-source data-export="">user interaction task source</dfn><dd> This <a href=#task-source id=generic-task-sources:task-source-3>task source</a> is used for features that react to user interaction, for example keyboard or mouse input. Events sent in response to user input (e.g. <code id=generic-task-sources:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> events) must be fired using <a href=#concept-task id=generic-task-sources:concept-task>tasks</a> <a href=#queue-a-task id=generic-task-sources:queue-a-task>queued</a> with the <a href=#user-interaction-task-source id=generic-task-sources:user-interaction-task-source>user interaction task source</a>. <a href=references.html#refsUIEVENTS>[UIEVENTS]</a> <dt>The <dfn id=networking-task-source data-export="">networking task source</dfn><dd> This <a href=#task-source id=generic-task-sources:task-source-4>task source</a> is used for features that trigger in response to network activity. <dt id=history-traversal-task-source>The <dfn id=navigation-and-traversal-task-source>navigation and traversal task source</dfn><dd> This <a href=#task-source id=generic-task-sources:task-source-5>task source</a> is used to queue tasks involved in <a href=browsing-the-web.html#navigate id=generic-task-sources:navigate>navigation</a> and <a href=browsing-the-web.html#apply-the-traverse-history-step id=generic-task-sources:apply-the-traverse-history-step>history traversal</a>. <dt>The <dfn id=rendering-task-source>rendering task source</dfn><dd> This <a href=#task-source id=generic-task-sources:task-source-6>task source</a> is used solely to <a href=#update-the-rendering id=generic-task-sources:update-the-rendering>update the rendering</a>. </dl> <h5 id=event-loop-for-spec-authors>8.1.7.5 Dealing with the event loop from other specifications<a href=#event-loop-for-spec-authors class=self-link></a></h5> Writing specifications that correctly interact with the <a href=#event-loop id=event-loop-for-spec-authors:event-loop>event loop</a> can be tricky. This is compounded by how this specification uses concurrency-model-independent terminology, so we say things like "<a href=#event-loop id=event-loop-for-spec-authors:event-loop-2>event loop</a>" and "<a id=event-loop-for-spec-authors:in-parallel href=infrastructure.html#in-parallel>in parallel</a>" instead of using more familiar model-specific terms like "main thread" or "on a background thread". By default, specification text generally runs on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-3>event loop</a>. This falls out from the formal <a href=#event-loop-processing-model>event loop processing model</a>, in that you can eventually trace most algorithms back to a <a href=#concept-task id=event-loop-for-spec-authors:concept-task>task</a> <a href=#queue-a-task id=event-loop-for-spec-authors:queue-a-task>queued</a> there. The algorithm steps for any JavaScript method will be invoked by author code calling that method. And author code can only be run via queued tasks, usually originating somewhere in the <a href=scripting.html#script-processing-model><code>script</code> processing model</a>. From this starting point, the overriding guideline is that any work a specification needs to perform that would otherwise block the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-4>event loop</a> must instead be performed <a id=event-loop-for-spec-authors:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a> with it. This includes (but is not limited to): <ul><li>performing heavy computation;<li>displaying a user-facing prompt;<li>performing operations which could require involving outside systems (i.e. "going out of process").</ul> The next complication is that, in algorithm sections that are <a id=event-loop-for-spec-authors:in-parallel-3 href=infrastructure.html#in-parallel>in parallel</a>, you must not create or manipulate objects associated to a specific <a id=event-loop-for-spec-authors:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>, <a href=#global-object id=event-loop-for-spec-authors:global-object>global</a>, or <a href=#environment-settings-object id=event-loop-for-spec-authors:environment-settings-object>environment settings object</a>. (Stated in more familiar terms, you must not directly access main-thread artifacts from a background thread.) Doing so would create data races observable to JavaScript code, since after all, your algorithm steps are running <a id=event-loop-for-spec-authors:in-parallel-4 href=infrastructure.html#in-parallel>in parallel</a> to the JavaScript code. You can, however, manipulate specification-level data structures and values from <cite>Infra</cite>, as those are realm-agnostic. They are never directly exposed to JavaScript without a specific conversion taking place (often <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=event-loop-for-spec-authors:concept-idl-convert data-x-internal=concept-idl-convert>via Web IDL</a>). <a href=references.html#refsINFRA>[INFRA]</a> <a href=references.html#refsWEBIDL>[WEBIDL]</a> To affect the world of observable JavaScript objects, then, you must <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task>queue a global task</a> to perform any such manipulations. This ensures your steps are properly interleaved with respect to other things happening on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-5>event loop</a>. Furthermore, you must choose a <a href=#task-source id=event-loop-for-spec-authors:task-source>task source</a> when <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-2>queuing a global task</a>; this governs the relative order of your steps versus others. If you are unsure which <a href=#task-source id=event-loop-for-spec-authors:task-source-2>task source</a> to use, pick one of the <a href=#generic-task-sources>generic task sources</a> that sounds most applicable. Finally, you must indicate which <a href=#global-object id=event-loop-for-spec-authors:global-object-2>global object</a> your queued task is associated with; this ensures that if that global object is inactive, the task does not run. The base primitive, on which <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-3>queue a global task</a> builds, is the <a href=#queue-a-task id=event-loop-for-spec-authors:queue-a-task-2>queue a task</a> algorithm. In general, <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-4>queue a global task</a> is better because it automatically picks the right <a href=#event-loop id=event-loop-for-spec-authors:event-loop-6>event loop</a> and, where appropriate, <a href=#concept-task-document id=event-loop-for-spec-authors:concept-task-document>document</a>. Older specifications often use <a href=#queue-a-task id=event-loop-for-spec-authors:queue-a-task-3>queue a task</a> combined with the <a href=#implied-event-loop id=event-loop-for-spec-authors:implied-event-loop>implied event loop</a> and <a href=#implied-document id=event-loop-for-spec-authors:implied-document>implied document</a> concepts, but this is discouraged. Putting this all together, we can provide a template for a typical algorithm that needs to do work asynchronously: <ol><li>Do any synchronous setup work, while still on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-7>event loop</a>. This may include converting <a id=event-loop-for-spec-authors:realm-2 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>-specific JavaScript values into realm-agnostic specification-level values.<li>Perform a set of potentially-expensive steps <a id=event-loop-for-spec-authors:in-parallel-5 href=infrastructure.html#in-parallel>in parallel</a>, operating entirely on realm-agnostic values, and producing a realm-agnostic result.<li><a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-5>Queue a global task</a>, on a specified <a href=#task-source id=event-loop-for-spec-authors:task-source-3>task source</a> and given an appropriate <a href=#global-object id=event-loop-for-spec-authors:global-object-3>global object</a>, to convert the realm-agnostic result back into observable effects on the observable world of JavaScript objects on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-8>event loop</a>.</ol> <div id=example-event-loop-using-algorithm class=example> The following is an algorithm that "encrypts" a passed-in <a id=event-loop-for-spec-authors:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=https://infra.spec.whatwg.org/#scalar-value-string id=event-loop-for-spec-authors:scalar-value-string data-x-internal=scalar-value-string>scalar value strings</a> <var>input</var>, after parsing them as URLs: <ol><li>Let <var>urls</var> be an empty <a id=event-loop-for-spec-authors:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li> <a href=https://infra.spec.whatwg.org/#list-iterate id=event-loop-for-spec-authors:list-iterate data-x-internal=list-iterate>For each</a> <var>string</var> of <var>input</var>: <ol><li>Let <var>parsed</var> be the result of <a id=event-loop-for-spec-authors:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given <var>string</var>, relative to the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object>current settings object</a>.<li>If <var>parsed</var> is failure, then return <a id=event-loop-for-spec-authors:a-promise-rejected-with href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> a <a id=event-loop-for-spec-authors:syntaxerror href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a> <code id=event-loop-for-spec-authors:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Let <var>serialized</var> be the result of applying the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=event-loop-for-spec-authors:concept-url-serializer data-x-internal=concept-url-serializer>URL serializer</a> to <var>parsed</var>.<li><a href=https://infra.spec.whatwg.org/#list-append id=event-loop-for-spec-authors:list-append data-x-internal=list-append>Append</a> <var>serialized</var> to <var>urls</var>.</ol> <li>Let <var>realm</var> be the <a id=event-loop-for-spec-authors:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a>.<li>Let <var>p</var> be a new promise.<li> Run the following steps <a id=event-loop-for-spec-authors:in-parallel-6 href=infrastructure.html#in-parallel>in parallel</a>: <ol><li>Let <var>encryptedURLs</var> be an empty <a id=event-loop-for-spec-authors:list-3 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li> <a href=https://infra.spec.whatwg.org/#list-iterate id=event-loop-for-spec-authors:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>url</var> of <var>urls</var>: <ol><li>Wait 100 milliseconds, so that people think we're doing heavy-duty encryption.<li>Let <var>encrypted</var> be a new <a id=event-loop-for-spec-authors:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> derived from <var>url</var>, whose <var>n</var>th <a id=event-loop-for-spec-authors:code-unit href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> is equal to <var>url</var>'s <var>n</var>th <a id=event-loop-for-spec-authors:code-unit-2 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> plus 13.<li><a href=https://infra.spec.whatwg.org/#list-append id=event-loop-for-spec-authors:list-append-2 data-x-internal=list-append>Append</a> <var>encrypted</var> to <var>encryptedURLs</var>. </ol> <li> <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-6>Queue a global task</a> on the <a href=#networking-task-source id=event-loop-for-spec-authors:networking-task-source>networking task source</a>, given <var>realm</var>'s <a href=#concept-realm-global id=event-loop-for-spec-authors:concept-realm-global>global object</a>, to perform the following steps: <ol><li>Let <var>array</var> be the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=event-loop-for-spec-authors:concept-idl-convert-2 data-x-internal=concept-idl-convert>converting</a> <var>encryptedURLs</var> to a JavaScript array, in <var>realm</var>.<li>Resolve <var>p</var> with <var>array</var>.</ol> </ol> <li>Return <var>p</var>.</ol> Here are several things to notice about this algorithm: <ul><li>It does its URL parsing up front, on the <a href=#event-loop id=event-loop-for-spec-authors:event-loop-9>event loop</a>, before going to the <a id=event-loop-for-spec-authors:in-parallel-7 href=infrastructure.html#in-parallel>in parallel</a> steps. This is necessary, since parsing depends on the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object-2>current settings object</a>, which would no longer be current after going <a id=event-loop-for-spec-authors:in-parallel-8 href=infrastructure.html#in-parallel>in parallel</a>.<li>Alternately, it could have saved a reference to the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object-3>current settings object</a>'s <a href=#api-base-url id=event-loop-for-spec-authors:api-base-url>API base URL</a> and used it during the <a id=event-loop-for-spec-authors:in-parallel-9 href=infrastructure.html#in-parallel>in parallel</a> steps; that would have been equivalent. However, we recommend instead doing as much work as possible up front, as this example does. Attempting to save the correct values can be error prone; for example, if we'd saved just the <a href=#current-settings-object id=event-loop-for-spec-authors:current-settings-object-4>current settings object</a>, instead of its <a href=#api-base-url id=event-loop-for-spec-authors:api-base-url-2>API base URL</a>, there would have been a potential race.<li>It implicitly passes a <a id=event-loop-for-spec-authors:list-4 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=https://infra.spec.whatwg.org/#string id=event-loop-for-spec-authors:string-2 data-x-internal=string>strings</a> from the initial steps to the <a id=event-loop-for-spec-authors:in-parallel-10 href=infrastructure.html#in-parallel>in parallel</a> steps. This is OK, as both <a href=https://infra.spec.whatwg.org/#list id=event-loop-for-spec-authors:list-5 data-x-internal=list>lists</a> and <a href=https://infra.spec.whatwg.org/#string id=event-loop-for-spec-authors:string-3 data-x-internal=string>strings</a> are <a id=event-loop-for-spec-authors:realm-3 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>-agnostic.<li>It performs "expensive computation" (waiting for 100 milliseconds per input URL) during the <a id=event-loop-for-spec-authors:in-parallel-11 href=infrastructure.html#in-parallel>in parallel</a> steps, thus not blocking the main <a href=#event-loop id=event-loop-for-spec-authors:event-loop-10>event loop</a>.<li>Promises, as observable JavaScript objects, are never created and manipulated during the <a id=event-loop-for-spec-authors:in-parallel-12 href=infrastructure.html#in-parallel>in parallel</a> steps. <var>p</var> is created before entering those steps, and then is manipulated during a <a href=#concept-task id=event-loop-for-spec-authors:concept-task-2>task</a> that is <a href=#queue-a-global-task id=event-loop-for-spec-authors:queue-a-global-task-7>queued</a> specifically for that purpose.<li>The creation of a JavaScript array object also happens during the queued task, and is careful to specify which realm it creates the array in since that is no longer obvious from context.</ul> (On these last two points, see also <a href=https://github.com/whatwg/webidl/issues/135>whatwg/webidl issue #135</a> and <a href=https://github.com/whatwg/webidl/issues/371>whatwg/webidl issue #371</a>, where we are still mulling over the subtleties of the above promise-resolution pattern.) Another thing to note is that, in the event this algorithm was called from a Web IDL-specified operation taking a <code>sequence</code><<code id=event-loop-for-spec-authors:idl-usvstring><a data-x-internal=idl-usvstring href=https://webidl.spec.whatwg.org/#idl-USVString>USVString</a></code>>, there was an automatic conversion from <a id=event-loop-for-spec-authors:realm-4 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>-specific JavaScript objects provided by the author as input, into the realm-agnostic <code>sequence</code><<code id=event-loop-for-spec-authors:idl-usvstring-2><a data-x-internal=idl-usvstring href=https://webidl.spec.whatwg.org/#idl-USVString>USVString</a></code>> Web IDL type, which we then treat as a <a id=event-loop-for-spec-authors:list-6 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=https://infra.spec.whatwg.org/#scalar-value-string id=event-loop-for-spec-authors:scalar-value-string-2 data-x-internal=scalar-value-string>scalar value strings</a>. So depending on how your specification is structured, there may be other implicit steps happening on the main <a href=#event-loop id=event-loop-for-spec-authors:event-loop-11>event loop</a> that play a part in this whole process of getting you ready to go <a id=event-loop-for-spec-authors:in-parallel-13 href=infrastructure.html#in-parallel>in parallel</a>. </div> <h4 id=events>8.1.8 Events<a href=#events class=self-link></a></h4> <h5 id=event-handler-attributes>8.1.8.1 Event handlers<a href=#event-handler-attributes class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers title="Events are signals fired inside the browser window that notify of changes in the browser or operating system environment. Programmers can create event handler code that will run when an event fires, allowing web pages to respond appropriately to change.">Events/Event_handlers</a></div></div> Many objects can have <dfn id=event-handlers data-lt="event handler" data-export="">event handlers</dfn> specified. These act as non-capture <a href=https://dom.spec.whatwg.org/#concept-event-listener id=event-handler-attributes:event-listener data-x-internal=event-listener>event listeners</a> for the object on which they are specified. <a href=references.html#refsDOM>[DOM]</a> An <a href=#event-handlers id=event-handler-attributes:event-handlers>event handler</a> is a <a id=event-handler-attributes:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with two <a href=https://infra.spec.whatwg.org/#struct-item id=event-handler-attributes:struct-item data-x-internal=struct-item>items</a>: <ul><li>a <dfn data-dfn-for="event handler" id=event-handler-value data-export="">value</dfn>, which is either null, a callback object, or an <a href=#internal-raw-uncompiled-handler id=event-handler-attributes:internal-raw-uncompiled-handler>internal raw uncompiled handler</a>. The <code id=event-handler-attributes:eventhandler><a href=#eventhandler>EventHandler</a></code> callback function type describes how this is exposed to scripts. Initially, an <a href=#event-handlers id=event-handler-attributes:event-handlers-2>event handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value>value</a> must be set to null.<li>a <dfn data-dfn-for="event handler" id=event-handler-listener data-export="">listener</dfn>, which is either null or an <a id=event-handler-attributes:event-listener-2 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> responsible for running <a href=#the-event-handler-processing-algorithm id=event-handler-attributes:the-event-handler-processing-algorithm>the event handler processing algorithm</a>. Initially, an <a href=#event-handlers id=event-handler-attributes:event-handlers-3>event handler</a>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener>listener</a> must be set to null.</ul> Event handlers are exposed in two ways. The first way, common to all event handlers, is as an <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes>event handler IDL attribute</a>. The second way is as an <a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes>event handler content attribute</a>. Event handlers on <a id=event-handler-attributes:html-elements href=infrastructure.html#html-elements>HTML elements</a> and some of the event handlers on <code id=event-handler-attributes:window><a href=nav-history-apis.html#window>Window</a></code> objects are exposed in this way. For both of these two ways, the <a href=#event-handlers id=event-handler-attributes:event-handlers-4>event handler</a> is exposed through a <dfn id=event-handler-name>name</dfn>, which is a string that always starts with "<code>on</code>" and is followed by the name of the event for which the handler is intended. <hr> Most of the time, the object that exposes an <a href=#event-handlers id=event-handler-attributes:event-handlers-5>event handler</a> is the same as the object on which the corresponding <a id=event-handler-attributes:event-listener-3 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> is added. However, the <code id=event-handler-attributes:the-body-element><a href=sections.html#the-body-element>body</a></code> and <code id=event-handler-attributes:frameset><a href=obsolete.html#frameset>frameset</a></code> elements expose several <a href=#event-handlers id=event-handler-attributes:event-handlers-6>event handlers</a> that act upon the element's <code id=event-handler-attributes:window-2><a href=nav-history-apis.html#window>Window</a></code> object, if one exists. In either case, we call the object an <a href=#event-handlers id=event-handler-attributes:event-handlers-7>event handler</a> acts upon the <dfn id=event-handler-target>target</dfn> of that <a href=#event-handlers id=event-handler-attributes:event-handlers-8>event handler</a>. To <dfn id=determining-the-target-of-an-event-handler>determine the target of an event handler</dfn>, given an <code id=event-handler-attributes:eventtarget><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object <var>eventTarget</var> on which the <a href=#event-handlers id=event-handler-attributes:event-handlers-9>event handler</a> is exposed, and an <a href=#event-handler-name id=event-handler-attributes:event-handler-name>event handler name</a> <var>name</var>, the following steps are taken: <ol><li>If <var>eventTarget</var> is not a <code id=event-handler-attributes:the-body-element-2><a href=sections.html#the-body-element>body</a></code> element or a <code id=event-handler-attributes:frameset-2><a href=obsolete.html#frameset>frameset</a></code> element, then return <var>eventTarget</var>.<li>If <var>name</var> is not the name of an attribute member of the <code id=event-handler-attributes:windoweventhandlers><a href=#windoweventhandlers>WindowEventHandlers</a></code> interface mixin and the <a href=#window-reflecting-body-element-event-handler-set id=event-handler-attributes:window-reflecting-body-element-event-handler-set><code>Window</code>-reflecting body element event handler set</a> does not <a href=https://infra.spec.whatwg.org/#list-contain id=event-handler-attributes:list-contains data-x-internal=list-contains>contain</a> <var>name</var>, then return <var>eventTarget</var>.<li> If <var>eventTarget</var>'s <a id=event-handler-attributes:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not an <a id=event-handler-attributes:active-document href=document-sequences.html#active-document>active document</a>, then return null. This could happen if this object is a <code id=event-handler-attributes:the-body-element-3><a href=sections.html#the-body-element>body</a></code> element without a corresponding <code id=event-handler-attributes:window-3><a href=nav-history-apis.html#window>Window</a></code> object, for example. This check does not necessarily prevent <code id=event-handler-attributes:the-body-element-4><a href=sections.html#the-body-element>body</a></code> and <code id=event-handler-attributes:frameset-3><a href=obsolete.html#frameset>frameset</a></code> elements that are not <a id=event-handler-attributes:the-body-element-2-2 href=dom.html#the-body-element-2>the body element</a> of their <a id=event-handler-attributes:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> from reaching the next step. In particular, a <code id=event-handler-attributes:the-body-element-5><a href=sections.html#the-body-element>body</a></code> element created in an <a id=event-handler-attributes:active-document-2 href=document-sequences.html#active-document>active document</a> (perhaps with <code id=event-handler-attributes:dom-document-createelement><a data-x-internal=dom-document-createelement href=https://dom.spec.whatwg.org/#dom-document-createelement>document.createElement()</a></code>) but not <a id=event-handler-attributes:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a> will also have its corresponding <code id=event-handler-attributes:window-4><a href=nav-history-apis.html#window>Window</a></code> object as the <a href=#event-handler-target id=event-handler-attributes:event-handler-target>target</a> of several <a href=#event-handlers id=event-handler-attributes:event-handlers-10>event handlers</a> exposed through it. <li>Return <var>eventTarget</var>'s <a id=event-handler-attributes:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=#concept-relevant-global id=event-handler-attributes:concept-relevant-global>relevant global object</a>.</ol> <hr> Each <code id=event-handler-attributes:eventtarget-2><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object that has one or more <a href=#event-handlers id=event-handler-attributes:event-handlers-11>event handlers</a> specified has an associated <dfn data-dfn-for=EventTarget id=event-handler-map data-export="">event handler map</dfn>, which is a <a href=https://infra.spec.whatwg.org/#ordered-map id=event-handler-attributes:ordered-map data-x-internal=ordered-map>map</a> of strings representing <a href=#event-handler-name id=event-handler-attributes:event-handler-name-2>names</a> of <a href=#event-handlers id=event-handler-attributes:event-handlers-12>event handlers</a> to <a href=#event-handlers id=event-handler-attributes:event-handlers-13>event handlers</a>. When an <code id=event-handler-attributes:eventtarget-3><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object that has one or more <a href=#event-handlers id=event-handler-attributes:event-handlers-14>event handlers</a> specified is created, its <a href=#event-handler-map id=event-handler-attributes:event-handler-map>event handler map</a> must be initialized such that it contains an <a href=https://infra.spec.whatwg.org/#map-entry id=event-handler-attributes:map-entry data-x-internal=map-entry>entry</a> for each <a href=#event-handlers id=event-handler-attributes:event-handlers-15>event handler</a> that has that object as <a href=#event-handler-target id=event-handler-attributes:event-handler-target-2>target</a>, with <a href=https://infra.spec.whatwg.org/#struct-item id=event-handler-attributes:struct-item-2 data-x-internal=struct-item>items</a> in those <a href=#event-handlers id=event-handler-attributes:event-handlers-16>event handlers</a> set to their initial values. The order of the <a href=https://infra.spec.whatwg.org/#map-entry id=event-handler-attributes:map-entry-2 data-x-internal=map-entry>entries</a> of <a href=#event-handler-map id=event-handler-attributes:event-handler-map-2>event handler map</a> could be arbitrary. It is not observable through any algorithms that operate on the map. <a href=https://infra.spec.whatwg.org/#map-entry id=event-handler-attributes:map-entry-3 data-x-internal=map-entry>Entries</a> are not created in the <a href=#event-handler-map id=event-handler-attributes:event-handler-map-3>event handler map</a> of an object for <a href=#event-handlers id=event-handler-attributes:event-handlers-17>event handlers</a> that are merely exposed on that object, but have some other object as their <a href=#event-handler-target id=event-handler-attributes:event-handler-target-3>targets</a>. <hr> An <dfn id=event-handler-idl-attributes data-export="">event handler IDL attribute</dfn> is an IDL attribute for a specific <a href=#event-handlers id=event-handler-attributes:event-handlers-18>event handler</a>. The name of the IDL attribute is the same as the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-3>name</a> of the <a href=#event-handlers id=event-handler-attributes:event-handlers-19>event handler</a>. The getter of an <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-2>event handler IDL attribute</a> with name <var>name</var>, when called, must run these steps: <ol><li>Let <var>eventTarget</var> be the result of <a href=#determining-the-target-of-an-event-handler id=event-handler-attributes:determining-the-target-of-an-event-handler>determining the target of an event handler</a> given this object and <var>name</var>.<li>If <var>eventTarget</var> is null, then return null.<li>Return the result of <a href=#getting-the-current-value-of-the-event-handler id=event-handler-attributes:getting-the-current-value-of-the-event-handler>getting the current value of the event handler</a> given <var>eventTarget</var> and <var>name</var>. </ol> The setter of an <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-3>event handler IDL attribute</a> with name <var>name</var>, when called, must run these steps: <ol><li>Let <var>eventTarget</var> be the result of <a href=#determining-the-target-of-an-event-handler id=event-handler-attributes:determining-the-target-of-an-event-handler-2>determining the target of an event handler</a> given this object and <var>name</var>.<li>If <var>eventTarget</var> is null, then return.<li>If the given value is null, then <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler>deactivate an event handler</a> given <var>eventTarget</var> and <var>name</var>.<li> Otherwise: <ol><li>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-4>event handler map</a>.<li>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-2>value</a> to the given value.<li><a href=#activate-an-event-handler id=event-handler-attributes:activate-an-event-handler>Activate an event handler</a> given <var>eventTarget</var> and <var>name</var>.</ol> </ol> Certain <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-4>event handler IDL attributes</a> have additional requirements, in particular the <code id=event-handler-attributes:handler-messageeventtarget-onmessage><a href=web-messaging.html#handler-messageeventtarget-onmessage>onmessage</a></code> attribute of <code id=event-handler-attributes:messageport><a href=web-messaging.html#messageport>MessagePort</a></code> objects. <hr> An <dfn id=event-handler-content-attributes data-export="">event handler content attribute</dfn> is a content attribute for a specific <a href=#event-handlers id=event-handler-attributes:event-handlers-20>event handler</a>. The name of the content attribute is the same as the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-4>name</a> of the <a href=#event-handlers id=event-handler-attributes:event-handlers-21>event handler</a>. <a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes-2>Event handler content attributes</a>, when specified, must contain valid JavaScript code which, when parsed, would match the <a data-x-internal=js-prod-functionbody href=https://tc39.es/ecma262/#prod-FunctionBody>FunctionBody</a> production after <a id=event-handler-attributes:automatic-semicolon-insertion href=https://tc39.es/ecma262/#sec-automatic-semicolon-insertion data-x-internal=automatic-semicolon-insertion>automatic semicolon insertion</a>. The following <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=event-handler-attributes:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change steps</a> are used to synchronize between <a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes-3>event handler content attributes</a> and <a href=#event-handlers id=event-handler-attributes:event-handlers-22>event handlers</a>: <a href=references.html#refsDOM>[DOM]</a> <ol><li>If <var>namespace</var> is not null, or <var>localName</var> is not the name of an <a href=#event-handler-content-attributes id=event-handler-attributes:event-handler-content-attributes-4>event handler content attribute</a> on <var>element</var>, then return.<li>Let <var>eventTarget</var> be the result of <a href=#determining-the-target-of-an-event-handler id=event-handler-attributes:determining-the-target-of-an-event-handler-3>determining the target of an event handler</a> given <var>element</var> and <var>localName</var>.<li>If <var>eventTarget</var> is null, then return.<li>If <var>value</var> is null, then <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-2>deactivate an event handler</a> given <var>eventTarget</var> and <var>localName</var>.<li> Otherwise: <ol><li>If the <a id="event-handler-attributes:should-element's-inline-behavior-be-blocked-by-content-security-policy" href=https://w3c.github.io/webappsec-csp/#should-block-inline data-x-internal="should-element's-inline-behavior-be-blocked-by-content-security-policy">Should element's inline behavior be blocked by Content Security Policy?</a> algorithm returns "<code>Blocked</code>" when executed upon <var>element</var>, "<code>script attribute</code>", and <var>value</var>, then return. <a href=references.html#refsCSP>[CSP]</a><li>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-5>event handler map</a>.<li>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>localName</var>].<li>Let <var>location</var> be the script location that triggered the execution of these steps.<li>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-3>value</a> to the <a href=#internal-raw-uncompiled-handler id=event-handler-attributes:internal-raw-uncompiled-handler-2>internal raw uncompiled handler</a> <var>value</var>/<var>location</var>.<li><a href=#activate-an-event-handler id=event-handler-attributes:activate-an-event-handler-2>Activate an event handler</a> given <var>eventTarget</var> and <var>localName</var>.</ol> </ol> Per the DOM Standard, these steps are run even if <var>oldValue</var> and <var>value</var> are identical (setting an attribute to its current value), but not if <var>oldValue</var> and <var>value</var> are both null (removing an attribute that doesn't currently exist). <a href=references.html#refsDOM>[DOM]</a> <hr> To <dfn id=deactivate-an-event-handler>deactivate an event handler</dfn> given an <code id=event-handler-attributes:eventtarget-4><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object <var>eventTarget</var> and a string <var>name</var> that is the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-5>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-23>event handler</a>, run these steps: <ol><li>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-6>event handler map</a>.<li>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-4>value</a> to null.<li>Let <var>listener</var> be <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-2>listener</a>.<li>If <var>listener</var> is not null, then <a id=event-handler-attributes:remove-an-event-listener href=https://dom.spec.whatwg.org/#remove-an-event-listener data-x-internal=remove-an-event-listener>remove an event listener</a> with <var>eventTarget</var> and <var>listener</var>.<li>Set <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-3>listener</a> to null.</ol> To <dfn id=erase-all-event-listeners-and-handlers>erase all event listeners and handlers</dfn> given an <code id=event-handler-attributes:eventtarget-5><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object <var>eventTarget</var>, run these steps: <ol><li>If <var>eventTarget</var> has an associated <a href=#event-handler-map id=event-handler-attributes:event-handler-map-7>event handler map</a>, then for each <var>name</var> → <var>eventHandler</var> of <var>eventTarget</var>'s associated <a href=#event-handler-map id=event-handler-attributes:event-handler-map-8>event handler map</a>, <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-3>deactivate an event handler</a> given <var>eventTarget</var> and <var>name</var>.<li><a id=event-handler-attributes:remove-all-event-listeners href=https://dom.spec.whatwg.org/#remove-all-event-listeners data-x-internal=remove-all-event-listeners>Remove all event listeners</a> given <var>eventTarget</var>.</ol> This algorithm is used to define <code id=event-handler-attributes:dom-document-open><a href=dynamic-markup-insertion.html#dom-document-open>document.open()</a></code>. To <dfn id=activate-an-event-handler>activate an event handler</dfn> given an <code id=event-handler-attributes:eventtarget-6><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object <var>eventTarget</var> and a string <var>name</var> that is the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-6>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-24>event handler</a>, run these steps: <ol><li>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-9>event handler map</a>.<li>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li>If <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-4>listener</a> is not null, then return.<li> Let <var>callback</var> be the result of creating a Web IDL <code id=event-handler-attributes:dom-eventlistener><a data-x-internal=dom-eventlistener href=https://dom.spec.whatwg.org/#callbackdef-eventlistener>EventListener</a></code> instance representing a reference to a function of one argument that executes the steps of <a href=#the-event-handler-processing-algorithm id=event-handler-attributes:the-event-handler-processing-algorithm-2>the event handler processing algorithm</a>, given <var>eventTarget</var>, <var>name</var>, and its argument. The <code id=event-handler-attributes:dom-eventlistener-2><a data-x-internal=dom-eventlistener href=https://dom.spec.whatwg.org/#callbackdef-eventlistener>EventListener</a></code>'s <a id=event-handler-attributes:callback-context href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a> can be arbitrary; it does not impact the steps of <a href=#the-event-handler-processing-algorithm id=event-handler-attributes:the-event-handler-processing-algorithm-3>the event handler processing algorithm</a>. <a href=references.html#refsDOM>[DOM]</a> The callback is emphatically not the <a href=#event-handlers id=event-handler-attributes:event-handlers-25>event handler</a> itself. Every event handler ends up registering the same callback, the algorithm defined below, which takes care of invoking the right code, and processing the code's return value. <li> Let <var>listener</var> be a new <a id=event-handler-attributes:event-listener-4 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> whose <a href=https://dom.spec.whatwg.org/#event-listener-type id=event-handler-attributes:event-listener-type data-x-internal=event-listener-type>type</a> is the <dfn id=event-handler-event-type data-export="">event handler event type</dfn> corresponding to <var>eventHandler</var> and <a href=https://dom.spec.whatwg.org/#event-listener-callback id=event-handler-attributes:event-listener-callback data-x-internal=event-listener-callback>callback</a> is <var>callback</var>. To be clear, an <a id=event-handler-attributes:event-listener-5 href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> is different from an <code id=event-handler-attributes:dom-eventlistener-3><a data-x-internal=dom-eventlistener href=https://dom.spec.whatwg.org/#callbackdef-eventlistener>EventListener</a></code>. <li><a id=event-handler-attributes:add-an-event-listener href=https://dom.spec.whatwg.org/#add-an-event-listener data-x-internal=add-an-event-listener>Add an event listener</a> with <var>eventTarget</var> and <var>listener</var>.<li>Set <var>eventHandler</var>'s <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-5>listener</a> to <var>listener</var>.</ol> <div class=note> The event listener registration happens only if the <a href=#event-handlers id=event-handler-attributes:event-handlers-26>event handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-5>value</a> is being set to non-null, and the <a href=#event-handlers id=event-handler-attributes:event-handlers-27>event handler</a> is not already activated. Since listeners are called in the order they were registered, assuming no <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-4>deactivation</a> occurred, the order of event listeners for a particular event type will always be: <ol><li>the event listeners registered with <code id=event-handler-attributes:dom-eventtarget-addeventlistener><a data-x-internal=dom-eventtarget-addeventlistener href=https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener>addEventListener()</a></code> before the first time the <a href=#event-handlers id=event-handler-attributes:event-handlers-28>event handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-6>value</a> was set to non-null<li>then the callback to which it is currently set, if any<li>and finally the event listeners registered with <code id=event-handler-attributes:dom-eventtarget-addeventlistener-2><a data-x-internal=dom-eventtarget-addeventlistener href=https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener>addEventListener()</a></code> after the first time the <a href=#event-handlers id=event-handler-attributes:event-handlers-29>event handler</a>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-7>value</a> was set to non-null.</ol> </div> <div class=example> This example demonstrates the order in which event listeners are invoked. If the button in this example is clicked by the user, the page will show four alerts, with the text "ONE", "TWO", "THREE", and "FOUR" respectively. <pre><code class='html'><c- p><</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>"test"</c-><c- p>></c->Start Demo<c- p></</c-><c- f>button</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>var</c-> button <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'test'</c-><c- p>);</c-> button<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'ONE'</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c-> button<c- p>.</c->setAttribute<c- p>(</c-><c- t>'onclick'</c-><c- p>,</c-> <c- u>"alert('NOT CALLED')"</c-><c- p>);</c-> <c- c1>// event handler listener is registered here</c-> button<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'THREE'</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c-> button<c- p>.</c->onclick <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'TWO'</c-><c- p>);</c-> <c- p>};</c-> button<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'FOUR'</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> However, in the following example, the event handler is <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-5>deactivated</a> after its initial activation (and its event listener is removed), before being reactivated at a later time. The page will show five alerts with "ONE", "TWO", "THREE", "FOUR", and "FIVE" respectively, in order. <pre><code class='html'><c- p><</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>"test"</c-><c- p>></c->Start Demo<c- p></</c-><c- f>button</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>var</c-> button <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'test'</c-><c- p>);</c-> button<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'ONE'</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c-> button<c- p>.</c->setAttribute<c- p>(</c-><c- t>'onclick'</c-><c- p>,</c-> <c- u>"alert('NOT CALLED')"</c-><c- p>);</c-> <c- c1>// event handler is activated here</c-> button<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'TWO'</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c-> button<c- p>.</c->onclick <c- o>=</c-> <c- kc>null</c-><c- p>;</c-> <c- c1>// but deactivated here</c-> button<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'THREE'</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c-> button<c- p>.</c->onclick <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'FOUR'</c-><c- p>);</c-> <c- p>};</c-> <c- c1>// and re-activated here</c-> button<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> alert<c- p>(</c-><c- t>'FIVE'</c-><c- p>)</c-> <c- p>},</c-> <c- kc>false</c-><c- p>);</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> </div> The interfaces implemented by the event object do not influence whether an <a href=#event-handlers id=event-handler-attributes:event-handlers-30>event handler</a> is triggered or not. <dfn id=the-event-handler-processing-algorithm>The event handler processing algorithm</dfn> for an <code id=event-handler-attributes:eventtarget-7><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object <var>eventTarget</var>, a string <var>name</var> representing the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-7>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-31>event handler</a>, and an <code id=event-handler-attributes:event><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code> object <var>event</var> is as follows: <ol><li>Let <var>callback</var> be the result of <a href=#getting-the-current-value-of-the-event-handler id=event-handler-attributes:getting-the-current-value-of-the-event-handler-2>getting the current value of the event handler</a> given <var>eventTarget</var> and <var>name</var>.<li>If <var>callback</var> is null, then return.<li>Let <var>special error event handling</var> be true if <var>event</var> is an <code id=event-handler-attributes:errorevent><a href=#errorevent>ErrorEvent</a></code> object, <var>event</var>'s <code id=event-handler-attributes:dom-event-type><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is "<code id=event-handler-attributes:event-error><a href=indices.html#event-error>error</a></code>", and <var>event</var>'s <code id=event-handler-attributes:dom-event-currenttarget><a data-x-internal=dom-event-currenttarget href=https://dom.spec.whatwg.org/#dom-event-currenttarget>currentTarget</a></code> implements the <code id=event-handler-attributes:windoworworkerglobalscope><a href=#windoworworkerglobalscope>WindowOrWorkerGlobalScope</a></code> mixin. Otherwise, let <var>special error event handling</var> be false.<li> Process the <code id=event-handler-attributes:event-2><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code> object <var>event</var> as follows: <dl class=switch><dt>If <var>special error event handling</var> is true<dd> Let <var>return value</var> be the result of <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=event-handler-attributes:es-invoking-callback-functions data-x-internal=es-invoking-callback-functions>invoking</a> <var>callback</var> with « <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-message><a href=#dom-errorevent-message>message</a></code>, <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-filename><a href=#dom-errorevent-filename>filename</a></code>, <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-lineno><a href=#dom-errorevent-lineno>lineno</a></code>, <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-colno><a href=#dom-errorevent-colno>colno</a></code>, <var>event</var>'s <code id=event-handler-attributes:dom-errorevent-error><a href=#dom-errorevent-error>error</a></code> », "<code>rethrow</code>", and with <a data-x-internal=dfn-callback-this-value href=https://webidl.spec.whatwg.org/#dfn-callback-this-value>callback this value</a> set to <var>event</var>'s <code id=event-handler-attributes:dom-event-currenttarget-2><a data-x-internal=dom-event-currenttarget href=https://dom.spec.whatwg.org/#dom-event-currenttarget>currentTarget</a></code>. <dt>Otherwise<dd> Let <var>return value</var> be the result of <a href=https://webidl.spec.whatwg.org/#invoke-a-callback-function id=event-handler-attributes:es-invoking-callback-functions-2 data-x-internal=es-invoking-callback-functions>invoking</a> <var>callback</var> with « <var>event</var> », "<code>rethrow</code>", and with <a data-x-internal=dfn-callback-this-value href=https://webidl.spec.whatwg.org/#dfn-callback-this-value>callback this value</a> set to <var>event</var>'s <code id=event-handler-attributes:dom-event-currenttarget-3><a data-x-internal=dom-event-currenttarget href=https://dom.spec.whatwg.org/#dom-event-currenttarget>currentTarget</a></code>. </dl> If an exception gets thrown by the callback, it will be rethrown, ending these steps. The exception will propagate to the <a href=https://dom.spec.whatwg.org/#concept-event-dispatch id=event-handler-attributes:concept-event-dispatch data-x-internal=concept-event-dispatch>DOM event dispatch logic</a>, which will then <a href=#report-an-exception id=event-handler-attributes:report-an-exception>report</a> it. <li> Process <var>return value</var> as follows: <dl class=switch><dt>If <var>event</var> is a <code id=event-handler-attributes:beforeunloadevent><a href=nav-history-apis.html#beforeunloadevent>BeforeUnloadEvent</a></code> object and <var>event</var>'s <code id=event-handler-attributes:dom-event-type-2><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is "<code id=event-handler-attributes:event-beforeunload><a href=indices.html#event-beforeunload>beforeunload</a></code>"<dd> In this case, the <a href=#event-handler-idl-attributes id=event-handler-attributes:event-handler-idl-attributes-5>event handler IDL attribute</a>'s type will be <code id=event-handler-attributes:onbeforeunloadeventhandler><a href=#onbeforeunloadeventhandler>OnBeforeUnloadEventHandler</a></code>, so <var>return value</var> will have been coerced into either null or a <code id=event-handler-attributes:idl-domstring><a data-x-internal=idl-domstring href=https://webidl.spec.whatwg.org/#idl-DOMString>DOMString</a></code>. If <var>return value</var> is not null, then: <ol><li>Set <var>event</var>'s <a id=event-handler-attributes:canceled-flag href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled flag</a>.<li>If <var>event</var>'s <code id=event-handler-attributes:dom-beforeunloadevent-returnvalue><a href=nav-history-apis.html#dom-beforeunloadevent-returnvalue>returnValue</a></code> attribute's value is the empty string, then set <var>event</var>'s <code id=event-handler-attributes:dom-beforeunloadevent-returnvalue-2><a href=nav-history-apis.html#dom-beforeunloadevent-returnvalue>returnValue</a></code> attribute's value to <var>return value</var>.</ol> <dt>If <var>special error event handling</var> is true<dd>If <var>return value</var> is true, then set <var>event</var>'s <a id=event-handler-attributes:canceled-flag-2 href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled flag</a>.<dt>Otherwise<dd> If <var>return value</var> is false, then set <var>event</var>'s <a id=event-handler-attributes:canceled-flag-3 href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled flag</a>. If we've gotten to this "Otherwise" clause because <var>event</var>'s <code id=event-handler-attributes:dom-event-type-3><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is "<code id=event-handler-attributes:event-beforeunload-2><a href=indices.html#event-beforeunload>beforeunload</a></code>" but <var>event</var> is not a <code id=event-handler-attributes:beforeunloadevent-2><a href=nav-history-apis.html#beforeunloadevent>BeforeUnloadEvent</a></code> object, then <var>return value</var> will never be false, since in such cases <var>return value</var> will have been coerced into either null or a <code id=event-handler-attributes:idl-domstring-2><a data-x-internal=idl-domstring href=https://webidl.spec.whatwg.org/#idl-DOMString>DOMString</a></code>. </dl> </ol> <hr> The <code id=event-handler-attributes:eventhandler-2><a href=#eventhandler>EventHandler</a></code> callback function type represents a callback used for event handlers. It is represented in Web IDL as follows: <pre><code class='idl'>[<a id='event-handler-attributes:legacytreatnonobjectasnull' href='https://webidl.spec.whatwg.org/#LegacyTreatNonObjectAsNull' data-x-internal='legacytreatnonobjectasnull'><c- g>LegacyTreatNonObjectAsNull</c-></a>] <c- b>callback</c-> <dfn id='eventhandlernonnull' data-dfn-type='callback'><c- g>EventHandlerNonNull</c-></dfn> = <c- b>any</c-> (<a id='event-handler-attributes:event-3' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> <c- g>event</c->); <c- b>typedef</c-> <a href='#eventhandlernonnull' id='event-handler-attributes:eventhandlernonnull'><c- n>EventHandlerNonNull</c-></a>? <dfn id='eventhandler' data-dfn-type='typedef'><c- g>EventHandler</c-></dfn>;</code></pre> In JavaScript, any <code id=event-handler-attributes:idl-function><a data-x-internal=idl-function href=https://webidl.spec.whatwg.org/#common-Function>Function</a></code> object implements this interface. <div class=example> For example, the following document fragment: <pre><code class='html'><c- p><</c-><c- f>body</c-> <c- e>onload</c-><c- o>=</c-><c- s>"alert(this)"</c-> <c- e>onclick</c-><c- o>=</c-><c- s>"alert(this)"</c-><c- p>></c-></code></pre> ...leads to an alert saying "<code>[object Window]</code>" when the document is loaded, and an alert saying "<code>[object HTMLBodyElement]</code>" whenever the user clicks something in the page. </div> <div class=note> The return value of the function affects whether the event is canceled or not: as described above, if the return value is false, the event is canceled. There are two exceptions in the platform, for historical reasons: <ul><li>The <code id=event-handler-attributes:handler-onerror><a href=#handler-onerror>onerror</a></code> handlers on global objects, where returning true cancels the event.<li>The <code id=event-handler-attributes:handler-window-onbeforeunload><a href=#handler-window-onbeforeunload>onbeforeunload</a></code> handler, where returning any non-null and non-undefined value will cancel the event.</ul> </div> For historical reasons, the <code id=event-handler-attributes:handler-onerror-2><a href=#handler-onerror>onerror</a></code> handler has different arguments: <pre><code class='idl'>[<a id='event-handler-attributes:legacytreatnonobjectasnull-2' href='https://webidl.spec.whatwg.org/#LegacyTreatNonObjectAsNull' data-x-internal='legacytreatnonobjectasnull'><c- g>LegacyTreatNonObjectAsNull</c-></a>] <c- b>callback</c-> <dfn id='onerroreventhandlernonnull' data-dfn-type='callback'><c- g>OnErrorEventHandlerNonNull</c-></dfn> = <c- b>any</c-> ((<a id='event-handler-attributes:event-4' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> <c- b>or</c-> <c- b>DOMString</c->) <c- g>event</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>source</c->, <c- b>optional</c-> <c- b>unsigned</c-> <c- b>long</c-> <c- g>lineno</c->, <c- b>optional</c-> <c- b>unsigned</c-> <c- b>long</c-> <c- g>colno</c->, <c- b>optional</c-> <c- b>any</c-> <c- g>error</c->); <c- b>typedef</c-> <a href='#onerroreventhandlernonnull' id='event-handler-attributes:onerroreventhandlernonnull'><c- n>OnErrorEventHandlerNonNull</c-></a>? <dfn id='onerroreventhandler' data-dfn-type='typedef'><c- g>OnErrorEventHandler</c-></dfn>;</code></pre> <div class=example> <pre><code class='js'>window<c- p>.</c->onerror <c- o>=</c-> <c- p>(</c->message<c- p>,</c-> source<c- p>,</c-> lineno<c- p>,</c-> colno<c- p>,</c-> error<c- p>)</c-> <c- p>=></c-> <c- p>{</c-> … <c- p>};</c-></code></pre> </div> Similarly, the <code id=event-handler-attributes:handler-window-onbeforeunload-2><a href=#handler-window-onbeforeunload>onbeforeunload</a></code> handler has a different return value: <pre><code class='idl'>[<a id='event-handler-attributes:legacytreatnonobjectasnull-3' href='https://webidl.spec.whatwg.org/#LegacyTreatNonObjectAsNull' data-x-internal='legacytreatnonobjectasnull'><c- g>LegacyTreatNonObjectAsNull</c-></a>] <c- b>callback</c-> <dfn id='onbeforeunloadeventhandlernonnull' data-dfn-type='callback'><c- g>OnBeforeUnloadEventHandlerNonNull</c-></dfn> = <c- b>DOMString</c->? (<a id='event-handler-attributes:event-5' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> <c- g>event</c->); <c- b>typedef</c-> <a href='#onbeforeunloadeventhandlernonnull' id='event-handler-attributes:onbeforeunloadeventhandlernonnull'><c- n>OnBeforeUnloadEventHandlerNonNull</c-></a>? <dfn id='onbeforeunloadeventhandler' data-dfn-type='typedef'><c- g>OnBeforeUnloadEventHandler</c-></dfn>;</code></pre> <hr> An <dfn id=internal-raw-uncompiled-handler>internal raw uncompiled handler</dfn> is a tuple with the following information: <ul><li>An uncompiled script body<li>A location where the script body originated, in case an error needs to be reported</ul> When the user agent is to <dfn id=getting-the-current-value-of-the-event-handler>get the current value of the event handler</dfn> given an <code id=event-handler-attributes:eventtarget-8><a data-x-internal=eventtarget href=https://dom.spec.whatwg.org/#interface-eventtarget>EventTarget</a></code> object <var>eventTarget</var> and a string <var>name</var> that is the <a href=#event-handler-name id=event-handler-attributes:event-handler-name-8>name</a> of an <a href=#event-handlers id=event-handler-attributes:event-handlers-32>event handler</a>, it must run these steps: <ol><li>Let <var>handlerMap</var> be <var>eventTarget</var>'s <a href=#event-handler-map id=event-handler-attributes:event-handler-map-10>event handler map</a>.<li>Let <var>eventHandler</var> be <var>handlerMap</var>[<var>name</var>].<li> If <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-8>value</a> is an <a href=#internal-raw-uncompiled-handler id=event-handler-attributes:internal-raw-uncompiled-handler-3>internal raw uncompiled handler</a>, then: <ol><li>If <var>eventTarget</var> is an element, then let <var>element</var> be <var>eventTarget</var>, and <var>document</var> be <var>element</var>'s <a id=event-handler-attributes:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>. Otherwise, <var>eventTarget</var> is a <code id=event-handler-attributes:window-5><a href=nav-history-apis.html#window>Window</a></code> object, let <var>element</var> be null, and <var>document</var> be <var>eventTarget</var>'s <a href=nav-history-apis.html#concept-document-window id=event-handler-attributes:concept-document-window>associated <code>Document</code></a>.<li>If <a href=#concept-n-noscript id=event-handler-attributes:concept-n-noscript>scripting is disabled</a> for <var>document</var>, then return null.<li>Let <var>body</var> be the uncompiled script body in <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-9>value</a>.<li>Let <var>location</var> be the location where the script body originated, as given by <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-10>value</a>.<li>If <var>element</var> is not null and <var>element</var> has a <a id=event-handler-attributes:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>, let <var>form owner</var> be that <a id=event-handler-attributes:form-owner-2 href=form-control-infrastructure.html#form-owner>form owner</a>. Otherwise, let <var>form owner</var> be null.<li>Let <var>settings object</var> be the <a href=#relevant-settings-object id=event-handler-attributes:relevant-settings-object>relevant settings object</a> of <var>document</var>.<li> If <var>body</var> is not parsable as <a data-x-internal=js-prod-functionbody href=https://tc39.es/ecma262/#prod-FunctionBody>FunctionBody</a> or if parsing detects an <a id=event-handler-attributes:early-error href=https://tc39.es/ecma262/#early-error-rule data-x-internal=early-error>early error</a>, then follow these substeps: <ol><li> Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-11>value</a> to null. This does not <a href=#deactivate-an-event-handler id=event-handler-attributes:deactivate-an-event-handler-6>deactivate</a> the event handler, which additionally <a href=https://dom.spec.whatwg.org/#remove-an-event-listener id=event-handler-attributes:remove-an-event-listener-2 data-x-internal=remove-an-event-listener>removes</a> the event handler's <a href=#event-handler-listener id=event-handler-attributes:event-handler-listener-6>listener</a> (if present). <li>Let <var>syntaxError</var> be a new <code id=event-handler-attributes:syntaxerror-2><a data-x-internal=syntaxerror-2 href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-syntaxerror>SyntaxError</a></code> exception associated with <var>settings object</var>'s <a href="#environment-settings-object's-realm" id="event-handler-attributes:environment-settings-object's-realm">realm</a> which describes the error while parsing. It should be based on <var>location</var>, where the script body originated.<li><a href=#report-an-exception id=event-handler-attributes:report-an-exception-2>Report an exception</a> with <var>syntaxError</var> for <var>settings object</var>'s <a href=#concept-settings-object-global id=event-handler-attributes:concept-settings-object-global>global object</a>.<li>Return null.</ol> <li> Push <var>settings object</var>'s <a href=#realm-execution-context id=event-handler-attributes:realm-execution-context>realm execution context</a> onto the <a id=event-handler-attributes:javascript-execution-context-stack href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>; it is now the <a id=event-handler-attributes:running-javascript-execution-context href=https://tc39.es/ecma262/#running-execution-context data-x-internal=running-javascript-execution-context>running JavaScript execution context</a>. This is necessary so the subsequent invocation of <a href=https://tc39.es/ecma262/#sec-ordinaryfunctioncreate id=event-handler-attributes:js-ordinaryfunctioncreate data-x-internal=js-ordinaryfunctioncreate>OrdinaryFunctionCreate</a> takes place in the correct <a id=event-handler-attributes:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a>. <li> Let <var>function</var> be the result of calling <a href=https://tc39.es/ecma262/#sec-ordinaryfunctioncreate id=event-handler-attributes:js-ordinaryfunctioncreate-2 data-x-internal=js-ordinaryfunctioncreate>OrdinaryFunctionCreate</a>, with arguments: <dl><dt><var>functionPrototype</var><dd><a id=event-handler-attributes:function.prototype href=https://tc39.es/ecma262/#sec-properties-of-the-function-prototype-object data-x-internal=function.prototype>%Function.prototype%</a><dt><var>sourceText</var><dd> <dl class=switch><dt>If <var>name</var> is <code id=event-handler-attributes:handler-onerror-3><a href=#handler-onerror>onerror</a></code> and <var>eventTarget</var> is a <code id=event-handler-attributes:window-6><a href=nav-history-apis.html#window>Window</a></code> object<dd>The string formed by concatenating "<code>function </code>", <var>name</var>, "<code>(event, source, lineno, colno, error) {</code>", U+000A LF, <var>body</var>, U+000A LF, and "<code>}</code>".<dt>Otherwise<dd>The string formed by concatenating "<code>function </code>", <var>name</var>, "<code>(event) {</code>", U+000A LF, <var>body</var>, U+000A LF, and "<code>}</code>".</dl> <dt><var>ParameterList</var><dd> <dl class=switch><dt>If <var>name</var> is <code id=event-handler-attributes:handler-onerror-4><a href=#handler-onerror>onerror</a></code> and <var>eventTarget</var> is a <code id=event-handler-attributes:window-7><a href=nav-history-apis.html#window>Window</a></code> object<dd>Let the function have five arguments, named <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code>.<dt>Otherwise<dd>Let the function have a single argument called <code>event</code>.</dl> <dt><var>body</var><dd>The result of parsing <var>body</var> above.<dt><var>thisMode</var><dd>non-lexical-this<dt><var>scope</var><dd> <ol><li>Let <var>realm</var> be <var>settings object</var>'s <a href="#environment-settings-object's-realm" id="event-handler-attributes:environment-settings-object's-realm-2">realm</a>.<li>Let <var>scope</var> be <var>realm</var>.[[GlobalEnv]].<li> If <var>eventHandler</var> is an element's <a href=#event-handlers id=event-handler-attributes:event-handlers-33>event handler</a>, then set <var>scope</var> to <a href=https://tc39.es/ecma262/#sec-newobjectenvironment id=event-handler-attributes:js-newobjectenvironment data-x-internal=js-newobjectenvironment>NewObjectEnvironment</a>(<var>document</var>, true, <var>scope</var>). (Otherwise, <var>eventHandler</var> is a <code id=event-handler-attributes:window-8><a href=nav-history-apis.html#window>Window</a></code> object's <a href=#event-handlers id=event-handler-attributes:event-handlers-34>event handler</a>.) <li>If <var>form owner</var> is not null, then set <var>scope</var> to <a href=https://tc39.es/ecma262/#sec-newobjectenvironment id=event-handler-attributes:js-newobjectenvironment-2 data-x-internal=js-newobjectenvironment>NewObjectEnvironment</a>(<var>form owner</var>, true, <var>scope</var>).<li>If <var>element</var> is not null, then set <var>scope</var> to <a href=https://tc39.es/ecma262/#sec-newobjectenvironment id=event-handler-attributes:js-newobjectenvironment-3 data-x-internal=js-newobjectenvironment>NewObjectEnvironment</a>(<var>element</var>, true, <var>scope</var>).<li>Return <var>scope</var>.</ol> </dl> <li>Remove <var>settings object</var>'s <a href=#realm-execution-context id=event-handler-attributes:realm-execution-context-2>realm execution context</a> from the <a id=event-handler-attributes:javascript-execution-context-stack-2 href=https://tc39.es/ecma262/#execution-context-stack data-x-internal=javascript-execution-context-stack>JavaScript execution context stack</a>.<li> Set <var>function</var>.[[ScriptOrModule]] to null. <div class=note> This is done because the default behavior, of associating the created function with the nearest <a href=#concept-script id=event-handler-attributes:concept-script>script</a> on the stack, can lead to path-dependent results. For example, an event handler which is first invoked by user interaction would end up with null [[ScriptOrModule]] (since then this algorithm would be first invoked when the <a href=#active-script id=event-handler-attributes:active-script>active script</a> is null), whereas one that is first invoked by dispatching an event from script would have its [[ScriptOrModule]] set to that script. Instead, we just always set [[ScriptOrModule]] to null. This is more intuitive anyway; the idea that the first script which dispatches an event is somehow responsible for the event handler code is dubious. In practice, this only affects the resolution of relative URLs via <code id=event-handler-attributes:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code>, which consult the <a href=#concept-script-base-url id=event-handler-attributes:concept-script-base-url>base URL</a> of the associated script. Nulling out [[ScriptOrModule]] means that <a href=#hostloadimportedmodule id=event-handler-attributes:hostloadimportedmodule>HostLoadImportedModule</a> will fall back to the <a href=#current-settings-object id=event-handler-attributes:current-settings-object>current settings object</a>'s <a href=#api-base-url id=event-handler-attributes:api-base-url>API base URL</a>. </div> <li>Set <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-12>value</a> to the result of creating a Web IDL <code id=event-handler-attributes:eventhandler-3><a href=#eventhandler>EventHandler</a></code> callback function object whose object reference is <var>function</var> and whose <a id=event-handler-attributes:callback-context-2 href=https://webidl.spec.whatwg.org/#dfn-callback-context data-x-internal=callback-context>callback context</a> is <var>settings object</var>.</ol> <li>Return <var>eventHandler</var>'s <a href=#event-handler-value id=event-handler-attributes:event-handler-value-13>value</a>.</ol> <h5 id=event-handlers-on-elements,-document-objects,-and-window-objects>8.1.8.2 Event handlers on elements, <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document><a href=dom.html#document>Document</a></code> objects, and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window><a href=nav-history-apis.html#window>Window</a></code> objects<a href=#event-handlers-on-elements,-document-objects,-and-window-objects class=self-link></a></h5> The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type>event handler event types</a>) that must be supported by all <a id=event-handlers-on-elements,-document-objects,-and-window-objects:html-elements href=infrastructure.html#html-elements>HTML elements</a>, as both <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes>event handler content attributes</a> and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes>event handler IDL attributes</a>; and that must be supported by all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document-2><a href=dom.html#document>Document</a></code> and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-2><a href=nav-history-apis.html#window>Window</a></code> objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-2>event handler IDL attributes</a>: <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-2>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-2>Event handler event type</a> <tbody><tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onabort data-dfn-type=attribute><code>onabort</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event title="The abort event is fired when the resource was not fully loaded, but not as the result of an error.">HTMLMediaElement/abort_event</a>Support in all current engines.<div class=support>Firefox9+Safari3.1+Chrome3+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code>abort</code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onauxclick data-dfn-type=attribute><code>onauxclick</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event title="The auxclick event is fired at an Element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element.">Element/auxclick_event</a><div class=support>Firefox53+SafariNoChrome55+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android53+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-auxclick><a data-x-internal=event-auxclick href=https://w3c.github.io/uievents/#event-type-auxclick>auxclick</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onbeforeinput data-dfn-type=attribute><code>onbeforeinput</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforeinput><a data-x-internal=event-beforeinput href=https://w3c.github.io/uievents/#event-type-beforeinput>beforeinput</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onbeforematch data-dfn-type=attribute><code>onbeforematch</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforematch><a href=indices.html#event-beforematch>beforematch</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onbeforetoggle data-dfn-type=attribute><code>onbeforetoggle</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforetoggle><a href=indices.html#event-beforetoggle>beforetoggle</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncancel data-dfn-type=attribute><code>oncancel</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event title="The cancel event fires on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the Esc key.">HTMLDialogElement/cancel_event</a>Support in all current engines.<div class=support>Firefox98+Safari15.4+Chrome37+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-cancel><a href=indices.html#event-cancel>cancel</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncanplay data-dfn-type=attribute><code>oncanplay</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event title="The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplay_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-canplay><a href=media.html#event-media-canplay>canplay</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncanplaythrough data-dfn-type=attribute><code>oncanplaythrough</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event title="The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplaythrough_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-canplaythrough><a href=media.html#event-media-canplaythrough>canplaythrough</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onchange data-dfn-type=attribute><code>onchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event title="The change event is fired for <input>, <select>, and <textarea> elements when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.">HTMLElement/change_event</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera9+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-change><a href=indices.html#event-change>change</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onclick data-dfn-type=attribute><code>onclick</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event title="An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.">Element/click_event</a>Support in all current engines.<div class=support>Firefox6+Safari3+Chrome1+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android6+Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onclose data-dfn-type=attribute><code>onclose</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-close><a href=indices.html#event-close>close</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncontextlost data-dfn-type=attribute><code>oncontextlost</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-contextlost><a href=indices.html#event-contextlost>contextlost</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncontextmenu data-dfn-type=attribute><code>oncontextmenu</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-contextmenu><a data-x-internal=event-contextmenu href=https://w3c.github.io/uievents/#event-type-contextmenu>contextmenu</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncontextrestored data-dfn-type=attribute><code>oncontextrestored</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-contextrestored><a href=indices.html#event-contextrestored>contextrestored</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncopy data-dfn-type=attribute><code>oncopy</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event title="The copy event fires when the user initiates a copy action through the browser's user interface.">Element/copy_event</a>Support in all current engines.<div class=support>Firefox22+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-copy><a data-x-internal=event-copy href=https://w3c.github.io/clipboard-apis/#clipboard-event-copy>copy</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncuechange data-dfn-type=attribute><code>oncuechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement/cuechange_event title="The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.">HTMLTrackElement/cuechange_event</a>Support in all current engines.<div class=support>Firefox68+Safari10+Chrome32+<hr>Opera19+Edge79+<hr>Edge (Legacy)14+Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-cuechange><a href=media.html#event-media-cuechange>cuechange</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oncut data-dfn-type=attribute><code>oncut</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event title="The cut event is fired when the user has initiated a "cut" action through the browser's user interface.">Element/cut_event</a>Support in all current engines.<div class=support>Firefox22+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-cut><a data-x-internal=event-cut href=https://w3c.github.io/clipboard-apis/#clipboard-event-cut>cut</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondblclick data-dfn-type=attribute><code>ondblclick</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event title="The dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time.">Element/dblclick_event</a>Support in all current engines.<div class=support>Firefox6+Safari3+Chrome1+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer8+<hr>Firefox Android6+Safari iOS1+Chrome AndroidNoWebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dblclick><a data-x-internal=event-dblclick href=https://w3c.github.io/uievents/#event-type-dblclick>dblclick</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondrag data-dfn-type=attribute><code>ondrag</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-drag><a href=dnd.html#event-dnd-drag>drag</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragend data-dfn-type=attribute><code>ondragend</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragend><a href=dnd.html#event-dnd-dragend>dragend</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragenter data-dfn-type=attribute><code>ondragenter</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragenter><a href=dnd.html#event-dnd-dragenter>dragenter</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragleave data-dfn-type=attribute><code>ondragleave</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragleave><a href=dnd.html#event-dnd-dragleave>dragleave</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragover data-dfn-type=attribute><code>ondragover</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragover><a href=dnd.html#event-dnd-dragover>dragover</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondragstart data-dfn-type=attribute><code>ondragstart</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-dragstart><a href=dnd.html#event-dnd-dragstart>dragstart</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondrop data-dfn-type=attribute><code>ondrop</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-dnd-drop><a href=dnd.html#event-dnd-drop>drop</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ondurationchange data-dfn-type=attribute><code>ondurationchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event title="The durationchange event is fired when the duration attribute has been updated.">HTMLMediaElement/durationchange_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-durationchange><a href=media.html#event-media-durationchange>durationchange</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onemptied data-dfn-type=attribute><code>onemptied</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event title="The emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.">HTMLMediaElement/emptied_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-emptied><a href=media.html#event-media-emptied>emptied</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onended data-dfn-type=attribute><code>onended</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event title="The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.">HTMLMediaElement/ended_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-ended><a href=media.html#event-media-ended>ended</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onformdata data-dfn-type=attribute><code>onformdata</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-formdata><a href=indices.html#event-formdata>formdata</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oninput data-dfn-type=attribute><code>oninput</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event title="The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.">HTMLElement/input_event</a>Support in all current engines.<div class=support>Firefox6+Safari3.1+Chrome1+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)NoInternet Explorer🔰 9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-oninvalid data-dfn-type=attribute><code>oninvalid</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-invalid><a href=indices.html#event-invalid>invalid</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onkeydown data-dfn-type=attribute><code>onkeydown</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event title="The keydown event is fired when a key is pressed.">Element/keydown_event</a>Support in all current engines.<div class=support>Firefox6+Safari1.2+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-keydown><a data-x-internal=event-keydown href=https://w3c.github.io/uievents/#event-type-keydown>keydown</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onkeypress data-dfn-type=attribute><code>onkeypress</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-keypress><a data-x-internal=event-keypress href=https://w3c.github.io/uievents/#event-type-keypress>keypress</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onkeyup data-dfn-type=attribute><code>onkeyup</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event title="The keyup event is fired when a key is released.">Element/keyup_event</a>Support in all current engines.<div class=support>Firefox6+Safari1.2+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-keyup><a data-x-internal=event-keyup href=https://w3c.github.io/uievents/#event-type-keyup>keyup</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onloadeddata data-dfn-type=attribute><code>onloadeddata</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event title="The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.">HTMLMediaElement/loadeddata_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-loadeddata><a href=media.html#event-media-loadeddata>loadeddata</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onloadedmetadata data-dfn-type=attribute><code>onloadedmetadata</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event title="The loadedmetadata event is fired when the metadata has been loaded.">HTMLMediaElement/loadedmetadata_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-loadedmetadata><a href=media.html#event-media-loadedmetadata>loadedmetadata</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onloadstart data-dfn-type=attribute><code>onloadstart</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event title="The loadstart event is fired when the browser has started to load a resource.">HTMLMediaElement/loadstart_event</a>Support in all current engines.<div class=support>Firefox6+Safari4+Chrome3+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-loadstart><a href=media.html#event-media-loadstart>loadstart</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmousedown data-dfn-type=attribute><code>onmousedown</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event title="The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element.">Element/mousedown_event</a>Support in all current engines.<div class=support>Firefox6+Safari4+Chrome2+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mousedown><a data-x-internal=event-mousedown href=https://w3c.github.io/uievents/#event-type-mousedown>mousedown</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseenter data-dfn-type=attribute><code>onmouseenter</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event title="The mouseenter event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.">Element/mouseenter_event</a>Support in all current engines.<div class=support>Firefox10+Safari7+Chrome30+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseenter><a data-x-internal=event-mouseenter href=https://w3c.github.io/uievents/#event-type-mouseenter>mouseenter</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseleave data-dfn-type=attribute><code>onmouseleave</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event title="The mouseleave event is fired at an Element when the cursor of a pointing device (usually a mouse) is moved out of it.">Element/mouseleave_event</a>Support in all current engines.<div class=support>Firefox10+Safari7+Chrome30+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseleave><a data-x-internal=event-mouseleave href=https://w3c.github.io/uievents/#event-type-mouseleave>mouseleave</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmousemove data-dfn-type=attribute><code>onmousemove</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event title="The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.">Element/mousemove_event</a>Support in all current engines.<div class=support>Firefox6+Safari4+Chrome2+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mousemove><a data-x-internal=event-mousemove href=https://w3c.github.io/uievents/#event-type-mousemove>mousemove</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseout data-dfn-type=attribute><code>onmouseout</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event title="The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.">Element/mouseout_event</a>Support in all current engines.<div class=support>Firefox6+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseout><a data-x-internal=event-mouseout href=https://w3c.github.io/uievents/#event-type-mouseout>mouseout</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseover data-dfn-type=attribute><code>onmouseover</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event title="The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.">Element/mouseover_event</a>Support in all current engines.<div class=support>Firefox6+Safari4+Chrome2+<hr>Opera9.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseover><a data-x-internal=event-mouseover href=https://w3c.github.io/uievents/#event-type-mouseover>mouseover</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onmouseup data-dfn-type=attribute><code>onmouseup</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event title="The mouseup event is fired at an Element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it.">Element/mouseup_event</a>Support in all current engines.<div class=support>Firefox6+Safari4+Chrome2+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-mouseup><a data-x-internal=event-mouseup href=https://w3c.github.io/uievents/#event-type-mouseup>mouseup</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onpaste data-dfn-type=attribute><code>onpaste</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event title="The paste event is fired when the user has initiated a "paste" action through the browser's user interface.">Element/paste_event</a>Support in all current engines.<div class=support>Firefox22+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-paste><a data-x-internal=event-paste href=https://w3c.github.io/clipboard-apis/#clipboard-event-paste>paste</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onpause data-dfn-type=attribute><code>onpause</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event title="The pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method.">HTMLMediaElement/pause_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-pause><a href=media.html#event-media-pause>pause</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onplay data-dfn-type=attribute><code>onplay</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event title="The play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.">HTMLMediaElement/play_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-play><a href=media.html#event-media-play>play</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onplaying data-dfn-type=attribute><code>onplaying</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event title="The playing event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to lack of data.">HTMLMediaElement/playing_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-playing><a href=media.html#event-media-playing>playing</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onprogress data-dfn-type=attribute><code>onprogress</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event title="The progress event is fired periodically as the browser loads a resource.">HTMLMediaElement/progress_event</a>Support in all current engines.<div class=support>Firefox6+Safari3.1+Chrome3+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-progress><a href=media.html#event-media-progress>progress</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onratechange data-dfn-type=attribute><code>onratechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event title="The ratechange event is fired when the playback rate has changed.">HTMLMediaElement/ratechange_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-ratechange><a href=media.html#event-media-ratechange>ratechange</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onreset data-dfn-type=attribute><code>onreset</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-reset><a href=indices.html#event-reset>reset</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onscrollend data-dfn-type=attribute><code>onscrollend</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event title="The scrollend event fires when the document view has completed scrolling. Scrolling is considered completed when the scroll position has no more pending updates and the user has completed their gesture.">Document/scrollend_event</a><div class=support>Firefox109+SafariNoChrome114+<hr>Opera?Edge114+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event title="The scrollend event fires when element scrolling has completed. Scrolling is considered completed when the scroll position has no more pending updates and the user has completed their gesture.">Element/scrollend_event</a><div class=support>Firefox109+SafariNoChrome114+<hr>Opera?Edge114+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-scrollend><a data-x-internal=event-scrollend href=https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend>scrollend</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onsecuritypolicyviolation data-dfn-type=attribute><code>onsecuritypolicyviolation</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/securitypolicyviolation_event title="The securitypolicyviolation event is fired when a Content Security Policy is violated.">Element/securitypolicyviolation_event</a>Support in all current engines.<div class=support>Firefox63+Safari10+Chrome41+<hr>Opera?Edge79+<hr>Edge (Legacy)15+Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-securitypolicyviolation><a data-x-internal=event-securitypolicyviolation href=https://w3c.github.io/webappsec-csp/#eventdef-globaleventhandlers-securitypolicyviolation>securitypolicyviolation</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onseeked data-dfn-type=attribute><code>onseeked</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event title="The seeked event is fired when a seek operation completed, the current playback position has changed, and the Boolean seeking attribute is changed to false.">HTMLMediaElement/seeked_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-seeked><a href=media.html#event-media-seeked>seeked</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onseeking data-dfn-type=attribute><code>onseeking</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event title="The seeking event is fired when a seek operation starts, meaning the Boolean seeking attribute has changed to true and the media is seeking a new position.">HTMLMediaElement/seeking_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-seeking><a href=media.html#event-media-seeking>seeking</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onselect data-dfn-type=attribute><code>onselect</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event title="The select event fires when some text has been selected.">HTMLInputElement/select_event</a>Support in all current engines.<div class=support>Firefox6+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event title="The select event fires when some text has been selected.">HTMLTextAreaElement/select_event</a>Support in all current engines.<div class=support>Firefox6+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-select><a href=indices.html#event-select>select</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onslotchange data-dfn-type=attribute><code>onslotchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event title="The slotchange event is fired on an HTMLSlotElement instance (<slot> element) when the node(s) contained in that slot change.">HTMLSlotElement/slotchange_event</a>Support in all current engines.<div class=support>Firefox63+Safari10.1+Chrome53+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-slotchange><a data-x-internal=event-slotchange href=https://dom.spec.whatwg.org/#eventdef-htmlslotelement-slotchange>slotchange</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onstalled data-dfn-type=attribute><code>onstalled</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event title="The stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.">HTMLMediaElement/stalled_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-stalled><a href=media.html#event-media-stalled>stalled</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onsubmit data-dfn-type=attribute><code>onsubmit</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event title="The submit event fires when a <form> is submitted.">HTMLFormElement/submit_event</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera8+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-submit><a href=indices.html#event-submit>submit</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onsuspend data-dfn-type=attribute><code>onsuspend</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event title="The suspend event is fired when media data loading has been suspended.">HTMLMediaElement/suspend_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-suspend><a href=media.html#event-media-suspend>suspend</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ontimeupdate data-dfn-type=attribute><code>ontimeupdate</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event title="The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.">HTMLMediaElement/timeupdate_event</a>Support in all current engines.<div class=support>Firefox3.5+Safari3.1+Chrome3+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-timeupdate><a href=media.html#event-media-timeupdate>timeupdate</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-ontoggle data-dfn-type=attribute><code>ontoggle</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-toggle><a href=indices.html#event-toggle>toggle</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onvolumechange data-dfn-type=attribute><code>onvolumechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event title="The volumechange event is fired when either the volume attribute or the muted attribute has changed.">HTMLMediaElement/volumechange_event</a>Support in all current engines.<div class=support>Firefox6+Safari3.1+Chrome3+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-volumechange><a href=media.html#event-media-volumechange>volumechange</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwaiting data-dfn-type=attribute><code>onwaiting</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event title="The waiting event is fired when playback has stopped because of a temporary lack of data.">HTMLMediaElement/waiting_event</a>Support in all current engines.<div class=support>Firefox6+Safari3.1+Chrome3+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-media-waiting><a href=media.html#event-media-waiting>waiting</a></code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkitanimationend data-dfn-type=attribute><code>onwebkitanimationend</code></dfn> <td> <code>webkitAnimationEnd</code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkitanimationiteration data-dfn-type=attribute><code>onwebkitanimationiteration</code></dfn> <td> <code>webkitAnimationIteration</code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkitanimationstart data-dfn-type=attribute><code>onwebkitanimationstart</code></dfn> <td> <code>webkitAnimationStart</code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwebkittransitionend data-dfn-type=attribute><code>onwebkittransitionend</code></dfn> <td> <code>webkitTransitionEnd</code> <tr><td><dfn data-dfn-for=HTMLElement,Document,Window,GlobalEventHandlers id=handler-onwheel data-dfn-type=attribute><code>onwheel</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event title="The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse).">Element/wheel_event</a>Support in all current engines.<div class=support>Firefox17+Safari7+Chrome31+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOSNoChrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-wheel><a data-x-internal=event-wheel href=https://w3c.github.io/uievents/#event-type-wheel>wheel</a></code> </table> <hr> The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-3>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-3>event handler event types</a>) that must be supported by all <a id=event-handlers-on-elements,-document-objects,-and-window-objects:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> other than <code id=event-handlers-on-elements,-document-objects,-and-window-objects:the-body-element><a href=sections.html#the-body-element>body</a></code> and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:frameset><a href=obsolete.html#frameset>frameset</a></code> elements, as both <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes-2>event handler content attributes</a> and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-3>event handler IDL attributes</a>; that must be supported by all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document-3><a href=dom.html#document>Document</a></code> objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-4>event handler IDL attributes</a>; and that must be supported by all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-3><a href=nav-history-apis.html#window>Window</a></code> objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-5>event handler IDL attributes</a> on the <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-4><a href=nav-history-apis.html#window>Window</a></code> objects themselves, and with corresponding <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes-3>event handler content attributes</a> and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-6>event handler IDL attributes</a> exposed on all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:the-body-element-2><a href=sections.html#the-body-element>body</a></code> and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:frameset-2><a href=obsolete.html#frameset>frameset</a></code> elements that are owned by that <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-5><a href=nav-history-apis.html#window>Window</a></code> object's <a href=nav-history-apis.html#concept-document-window id=event-handlers-on-elements,-document-objects,-and-window-objects:concept-document-window>associated <code>Document</code></a>: <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-4>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-4>Event handler event type</a> <tbody><tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onblur data-dfn-type=attribute><code>onblur</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event title="The blur event fires when an element has lost focus. The event does not bubble, but the related focusout event that follows does bubble.">Element/blur_event</a>Support in all current engines.<div class=support>Firefox24+Safari3.1+Chrome1+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/blur_event title="The blur event fires when an element has lost focus.">Window/blur_event</a>Support in all current engines.<div class=support>Firefox6+Safari5.1+Chrome5+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer11<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-blur><a href=indices.html#event-blur>blur</a></code> <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onerror data-dfn-type=attribute><code>onerror</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event title="The error event is fired on a Window object when a resource failed to load or couldn't be used — for example if a script has an execution error.">Window/error_event</a>Support in all current engines.<div class=support>Firefox6+Safari5.1+Chrome10+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-error><a href=indices.html#event-error>error</a></code> <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onfocus data-dfn-type=attribute><code>onfocus</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event title="The focus event fires when an element has received focus. The event does not bubble, but the related focusin event that follows does bubble.">Element/focus_event</a>Support in all current engines.<div class=support>Firefox24+Safari3.1+Chrome1+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event title="The focus event fires when an element has received focus.">Window/focus_event</a>Support in all current engines.<div class=support>Firefox6+Safari5.1+Chrome5+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer11<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-focus><a href=indices.html#event-focus>focus</a></code> <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onload data-dfn-type=attribute><code>onload</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-load><a href=indices.html#event-load>load</a></code> <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onresize data-dfn-type=attribute><code>onresize</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-resize><a data-x-internal=event-resize href=https://drafts.csswg.org/cssom-view/#eventdef-window-resize>resize</a></code> <tr><td><dfn data-dfn-for=GlobalEventHandlers id=handler-onscroll data-dfn-type=attribute><code>onscroll</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event title="The scroll event fires when the document view has been scrolled. To detect when scrolling has completed, see the Document: scrollend event. For element scrolling, see Element: scroll event.">Document/scroll_event</a>Support in all current engines.<div class=support>Firefox6+Safari2+Chrome1+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event title="The scroll event fires when an element has been scrolled. To detect when scrolling has completed, see the Element: scrollend event.">Element/scroll_event</a>Support in all current engines.<div class=support>Firefox6+Safari1.3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-scroll><a data-x-internal=event-scroll href=https://drafts.csswg.org/cssom-view/#eventdef-document-scroll>scroll</a></code> </table> We call the <a id=event-handlers-on-elements,-document-objects,-and-window-objects:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of the <a href=#event-handler-name id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-name>names</a> of the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-5>event handlers</a> listed in the first column of this table the <dfn id=window-reflecting-body-element-event-handler-set><code>Window</code>-reflecting body element event handler set</dfn>. <hr> The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-6>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-5>event handler event types</a>) that must be supported by <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-6><a href=nav-history-apis.html#window>Window</a></code> objects, as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-7>event handler IDL attributes</a> on the <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-7><a href=nav-history-apis.html#window>Window</a></code> objects themselves, and with corresponding <a href=#event-handler-content-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-content-attributes-4>event handler content attributes</a> and <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-8>event handler IDL attributes</a> exposed on all <code id=event-handlers-on-elements,-document-objects,-and-window-objects:the-body-element-3><a href=sections.html#the-body-element>body</a></code> and <code id=event-handlers-on-elements,-document-objects,-and-window-objects:frameset-3><a href=obsolete.html#frameset>frameset</a></code> elements that are owned by that <code id=event-handlers-on-elements,-document-objects,-and-window-objects:window-8><a href=nav-history-apis.html#window>Window</a></code> object's <a href=nav-history-apis.html#concept-document-window id=event-handlers-on-elements,-document-objects,-and-window-objects:concept-document-window-2>associated <code>Document</code></a>: <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-7>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-6>Event handler event type</a> <tbody><tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onafterprint data-dfn-type=attribute><code>onafterprint</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/afterprint_event title="The afterprint event is fired after the associated document has started printing or the print preview has been closed.">Window/afterprint_event</a>Support in all current engines.<div class=support>Firefox6+Safari13+Chrome63+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-afterprint><a href=indices.html#event-afterprint>afterprint</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onbeforeprint data-dfn-type=attribute><code>onbeforeprint</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeprint_event title="The beforeprint event is fired when the associated document is about to be printed or previewed for printing.">Window/beforeprint_event</a>Support in all current engines.<div class=support>Firefox6+Safari13+Chrome63+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforeprint><a href=indices.html#event-beforeprint>beforeprint</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onbeforeunload data-dfn-type=attribute><code>onbeforeunload</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event title="The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.">Window/beforeunload_event</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-beforeunload><a href=indices.html#event-beforeunload>beforeunload</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onhashchange data-dfn-type=attribute><code>onhashchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event title="The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).">Window/hashchange_event</a>Support in all current engines.<div class=support>Firefox3.6+Safari5+Chrome8+<hr>Opera10.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer8+<hr>Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-hashchange><a href=indices.html#event-hashchange>hashchange</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onlanguagechange data-dfn-type=attribute><code>onlanguagechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/languagechange_event title="The languagechange event is fired at the global scope object when the user's preferred language changes.">Window/languagechange_event</a>Support in all current engines.<div class=support>Firefox32+Safari10.1+Chrome37+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-languagechange><a href=indices.html#event-languagechange>languagechange</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onmessage data-dfn-type=attribute><code>onmessage</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event title="The message event is fired on a Window object when the window receives a message, for example from a call to Window.postMessage() from another browsing context.">Window/message_event</a>Support in all current engines.<div class=support>Firefox9+Safari4+Chrome60+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer8+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android47+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-message><a href=indices.html#event-message>message</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onmessageerror data-dfn-type=attribute><code>onmessageerror</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event title="The error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).">HTMLMediaElement/error_event</a>Support in all current engines.<div class=support>Firefox6+Safari3.1+Chrome3+<hr>Opera11.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/messageerror_event title="The messageerror event is fired on a Window object when it receives a message that can't be deserialized.">Window/messageerror_event</a>Support in all current engines.<div class=support>Firefox57+Safari16.4+Chrome60+<hr>Opera?Edge79+<hr>Edge (Legacy)18Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-messageerror><a href=indices.html#event-messageerror>messageerror</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onoffline data-dfn-type=attribute><code>onoffline</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event title="The offline event of the Window interface is fired when the browser has lost access to the network and the value of Navigator.onLine switches to false.">Window/offline_event</a>Support in all current engines.<div class=support>Firefox9+Safari4+Chrome3+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-offline><a href=indices.html#event-offline>offline</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-ononline data-dfn-type=attribute><code>ononline</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event title="The online event of the Window interface is fired when the browser has gained access to the network and the value of Navigator.onLine switches to true.">Window/online_event</a>Support in all current engines.<div class=support>Firefox9+Safari4+Chrome3+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-online><a href=indices.html#event-online>online</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpageswap data-dfn-type=attribute><code>onpageswap</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pageswap><a href=indices.html#event-pageswap>pageswap</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpagehide data-dfn-type=attribute><code>onpagehide</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pagehide><a href=indices.html#event-pagehide>pagehide</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpagereveal data-dfn-type=attribute><code>onpagereveal</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pagereveal><a href=indices.html#event-pagereveal>pagereveal</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpageshow data-dfn-type=attribute><code>onpageshow</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-pageshow><a href=indices.html#event-pageshow>pageshow</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onpopstate data-dfn-type=attribute><code>onpopstate</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event title="The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited or, if history.pushState() has been used to add a history entry to the history stack, that history entry is used instead.">Window/popstate_event</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome5+<hr>Opera11.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android11.5+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-popstate><a href=indices.html#event-popstate>popstate</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onrejectionhandled data-dfn-type=attribute><code>onrejectionhandled</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/rejectionhandled_event title="The rejectionhandled event is sent to the script's global scope (usually window but also Worker) whenever a rejected JavaScript Promise is handled late, i.e. when a handler is attached to the promise after its rejection had caused an unhandledrejection event.">Window/rejectionhandled_event</a>Support in all current engines.<div class=support>Firefox69+Safari11+Chrome49+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-rejectionhandled><a href=indices.html#event-rejectionhandled>rejectionhandled</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onstorage data-dfn-type=attribute><code>onstorage</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event title="The storage event of the Window interface fires when a storage area (localStorage) has been modified in the context of another document.">Window/storage_event</a>Support in all current engines.<div class=support>Firefox45+Safari4+Chrome1+<hr>Opera?Edge79+<hr>Edge (Legacy)15+Internet Explorer9+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-storage><a href=indices.html#event-storage>storage</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onunhandledrejection data-dfn-type=attribute><code>onunhandledrejection</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event title="The unhandledrejection event is sent to the global scope of a script when a JavaScript Promise that has no rejection handler is rejected; typically, this is the window, but may also be a Worker.">Window/unhandledrejection_event</a>Support in all current engines.<div class=support>Firefox69+Safari11+Chrome49+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-unhandledrejection><a href=indices.html#event-unhandledrejection>unhandledrejection</a></code> <tr><td><dfn data-dfn-for=WindowEventHandlers id=handler-window-onunload data-dfn-type=attribute><code>onunload</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event title="The unload event is fired when the document or a child resource is being unloaded.">Window/unload_event</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera4+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-unload><a href=indices.html#event-unload>unload</a></code> </table> This list of <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-8>event handlers</a> is reified as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-9>event handler IDL attributes</a> through the <code id=event-handlers-on-elements,-document-objects,-and-window-objects:windoweventhandlers><a href=#windoweventhandlers>WindowEventHandlers</a></code> interface mixin. <hr> The following are the <a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-9>event handlers</a> (and their corresponding <a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-7>event handler event types</a>) that must be supported on <code id=event-handlers-on-elements,-document-objects,-and-window-objects:document-4><a href=dom.html#document>Document</a></code> objects as <a href=#event-handler-idl-attributes id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-idl-attributes-10>event handler IDL attributes</a>: <table><thead><tr><th><a href=#event-handlers id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handlers-10>Event handler</a> <th><a href=#event-handler-event-type id=event-handlers-on-elements,-document-objects,-and-window-objects:event-handler-event-type-8>Event handler event type</a> <tbody><tr><td><dfn data-dfn-for=Document id=handler-onreadystatechange data-dfn-type=attribute><code>onreadystatechange</code></dfn> <td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-readystatechange><a href=indices.html#event-readystatechange>readystatechange</a></code> <tr><td><dfn data-dfn-for=Document id=handler-onvisibilitychange data-dfn-type=attribute><code>onvisibilitychange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event title="The visibilitychange event is fired at the document when the contents of its tab have become visible or have been hidden.">Document/visibilitychange_event</a>Support in all current engines.<div class=support>Firefox56+Safari14.1+Chrome62+<hr>Opera49+Edge79+<hr>Edge (Legacy)18Internet Explorer🔰 10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android62+Samsung Internet?Opera Android46+</div></div></div><td> <code id=event-handlers-on-elements,-document-objects,-and-window-objects:event-visibilitychange><a href=indices.html#event-visibilitychange>visibilitychange</a></code> </table> <h6 id=idl-definitions>8.1.8.2.1 IDL definitions<a href=#idl-definitions class=self-link></a></h6> <pre><code class='idl'><c- b>interface</c-> <c- b>mixin</c-> <dfn id='globaleventhandlers' data-dfn-type='interface'><c- g>GlobalEventHandlers</c-></dfn> { <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-onabort' id='idl-definitions:handler-onabort'><c- g>onabort</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-2'><c- n>EventHandler</c-></a> <a href='#handler-onauxclick' id='idl-definitions:handler-onauxclick'><c- g>onauxclick</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-3'><c- n>EventHandler</c-></a> <a href='#handler-onbeforeinput' id='idl-definitions:handler-onbeforeinput'><c- g>onbeforeinput</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-4'><c- n>EventHandler</c-></a> <a href='#handler-onbeforematch' id='idl-definitions:handler-onbeforematch'><c- g>onbeforematch</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-5'><c- n>EventHandler</c-></a> <a href='#handler-onbeforetoggle' id='idl-definitions:handler-onbeforetoggle'><c- g>onbeforetoggle</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-6'><c- n>EventHandler</c-></a> <a href='#handler-onblur' id='idl-definitions:handler-onblur'><c- g>onblur</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-7'><c- n>EventHandler</c-></a> <a href='#handler-oncancel' id='idl-definitions:handler-oncancel'><c- g>oncancel</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-8'><c- n>EventHandler</c-></a> <a href='#handler-oncanplay' id='idl-definitions:handler-oncanplay'><c- g>oncanplay</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-9'><c- n>EventHandler</c-></a> <a href='#handler-oncanplaythrough' id='idl-definitions:handler-oncanplaythrough'><c- g>oncanplaythrough</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-10'><c- n>EventHandler</c-></a> <a href='#handler-onchange' id='idl-definitions:handler-onchange'><c- g>onchange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-11'><c- n>EventHandler</c-></a> <a href='#handler-onclick' id='idl-definitions:handler-onclick'><c- g>onclick</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-12'><c- n>EventHandler</c-></a> <a href='#handler-onclose' id='idl-definitions:handler-onclose'><c- g>onclose</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-13'><c- n>EventHandler</c-></a> <a href='#handler-oncontextlost' id='idl-definitions:handler-oncontextlost'><c- g>oncontextlost</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-14'><c- n>EventHandler</c-></a> <a href='#handler-oncontextmenu' id='idl-definitions:handler-oncontextmenu'><c- g>oncontextmenu</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-15'><c- n>EventHandler</c-></a> <a href='#handler-oncontextrestored' id='idl-definitions:handler-oncontextrestored'><c- g>oncontextrestored</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-16'><c- n>EventHandler</c-></a> <a href='#handler-oncopy' id='idl-definitions:handler-oncopy'><c- g>oncopy</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-17'><c- n>EventHandler</c-></a> <a href='#handler-oncuechange' id='idl-definitions:handler-oncuechange'><c- g>oncuechange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-18'><c- n>EventHandler</c-></a> <a href='#handler-oncut' id='idl-definitions:handler-oncut'><c- g>oncut</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-19'><c- n>EventHandler</c-></a> <a href='#handler-ondblclick' id='idl-definitions:handler-ondblclick'><c- g>ondblclick</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-20'><c- n>EventHandler</c-></a> <a href='#handler-ondrag' id='idl-definitions:handler-ondrag'><c- g>ondrag</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-21'><c- n>EventHandler</c-></a> <a href='#handler-ondragend' id='idl-definitions:handler-ondragend'><c- g>ondragend</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-22'><c- n>EventHandler</c-></a> <a href='#handler-ondragenter' id='idl-definitions:handler-ondragenter'><c- g>ondragenter</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-23'><c- n>EventHandler</c-></a> <a href='#handler-ondragleave' id='idl-definitions:handler-ondragleave'><c- g>ondragleave</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-24'><c- n>EventHandler</c-></a> <a href='#handler-ondragover' id='idl-definitions:handler-ondragover'><c- g>ondragover</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-25'><c- n>EventHandler</c-></a> <a href='#handler-ondragstart' id='idl-definitions:handler-ondragstart'><c- g>ondragstart</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-26'><c- n>EventHandler</c-></a> <a href='#handler-ondrop' id='idl-definitions:handler-ondrop'><c- g>ondrop</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-27'><c- n>EventHandler</c-></a> <a href='#handler-ondurationchange' id='idl-definitions:handler-ondurationchange'><c- g>ondurationchange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-28'><c- n>EventHandler</c-></a> <a href='#handler-onemptied' id='idl-definitions:handler-onemptied'><c- g>onemptied</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-29'><c- n>EventHandler</c-></a> <a href='#handler-onended' id='idl-definitions:handler-onended'><c- g>onended</c-></a>; <c- b>attribute</c-> <a href='#onerroreventhandler' id='idl-definitions:onerroreventhandler'><c- n>OnErrorEventHandler</c-></a> <a href='#handler-onerror' id='idl-definitions:handler-onerror'><c- g>onerror</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-30'><c- n>EventHandler</c-></a> <a href='#handler-onfocus' id='idl-definitions:handler-onfocus'><c- g>onfocus</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-31'><c- n>EventHandler</c-></a> <a href='#handler-onformdata' id='idl-definitions:handler-onformdata'><c- g>onformdata</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-32'><c- n>EventHandler</c-></a> <a href='#handler-oninput' id='idl-definitions:handler-oninput'><c- g>oninput</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-33'><c- n>EventHandler</c-></a> <a href='#handler-oninvalid' id='idl-definitions:handler-oninvalid'><c- g>oninvalid</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-34'><c- n>EventHandler</c-></a> <a href='#handler-onkeydown' id='idl-definitions:handler-onkeydown'><c- g>onkeydown</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-35'><c- n>EventHandler</c-></a> <a href='#handler-onkeypress' id='idl-definitions:handler-onkeypress'><c- g>onkeypress</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-36'><c- n>EventHandler</c-></a> <a href='#handler-onkeyup' id='idl-definitions:handler-onkeyup'><c- g>onkeyup</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-37'><c- n>EventHandler</c-></a> <a href='#handler-onload' id='idl-definitions:handler-onload'><c- g>onload</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-38'><c- n>EventHandler</c-></a> <a href='#handler-onloadeddata' id='idl-definitions:handler-onloadeddata'><c- g>onloadeddata</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-39'><c- n>EventHandler</c-></a> <a href='#handler-onloadedmetadata' id='idl-definitions:handler-onloadedmetadata'><c- g>onloadedmetadata</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-40'><c- n>EventHandler</c-></a> <a href='#handler-onloadstart' id='idl-definitions:handler-onloadstart'><c- g>onloadstart</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-41'><c- n>EventHandler</c-></a> <a href='#handler-onmousedown' id='idl-definitions:handler-onmousedown'><c- g>onmousedown</c-></a>; [<a id='idl-definitions:legacylenientthis' href='https://webidl.spec.whatwg.org/#LegacyLenientThis' data-x-internal='legacylenientthis'><c- g>LegacyLenientThis</c-></a>] <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-42'><c- n>EventHandler</c-></a> <a href='#handler-onmouseenter' id='idl-definitions:handler-onmouseenter'><c- g>onmouseenter</c-></a>; [<a id='idl-definitions:legacylenientthis-2' href='https://webidl.spec.whatwg.org/#LegacyLenientThis' data-x-internal='legacylenientthis'><c- g>LegacyLenientThis</c-></a>] <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-43'><c- n>EventHandler</c-></a> <a href='#handler-onmouseleave' id='idl-definitions:handler-onmouseleave'><c- g>onmouseleave</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-44'><c- n>EventHandler</c-></a> <a href='#handler-onmousemove' id='idl-definitions:handler-onmousemove'><c- g>onmousemove</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-45'><c- n>EventHandler</c-></a> <a href='#handler-onmouseout' id='idl-definitions:handler-onmouseout'><c- g>onmouseout</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-46'><c- n>EventHandler</c-></a> <a href='#handler-onmouseover' id='idl-definitions:handler-onmouseover'><c- g>onmouseover</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-47'><c- n>EventHandler</c-></a> <a href='#handler-onmouseup' id='idl-definitions:handler-onmouseup'><c- g>onmouseup</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-48'><c- n>EventHandler</c-></a> <a href='#handler-onpaste' id='idl-definitions:handler-onpaste'><c- g>onpaste</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-49'><c- n>EventHandler</c-></a> <a href='#handler-onpause' id='idl-definitions:handler-onpause'><c- g>onpause</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-50'><c- n>EventHandler</c-></a> <a href='#handler-onplay' id='idl-definitions:handler-onplay'><c- g>onplay</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-51'><c- n>EventHandler</c-></a> <a href='#handler-onplaying' id='idl-definitions:handler-onplaying'><c- g>onplaying</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-52'><c- n>EventHandler</c-></a> <a href='#handler-onprogress' id='idl-definitions:handler-onprogress'><c- g>onprogress</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-53'><c- n>EventHandler</c-></a> <a href='#handler-onratechange' id='idl-definitions:handler-onratechange'><c- g>onratechange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-54'><c- n>EventHandler</c-></a> <a href='#handler-onreset' id='idl-definitions:handler-onreset'><c- g>onreset</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-55'><c- n>EventHandler</c-></a> <a href='#handler-onresize' id='idl-definitions:handler-onresize'><c- g>onresize</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-56'><c- n>EventHandler</c-></a> <a href='#handler-onscroll' id='idl-definitions:handler-onscroll'><c- g>onscroll</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-57'><c- n>EventHandler</c-></a> <a href='#handler-onscrollend' id='idl-definitions:handler-onscrollend'><c- g>onscrollend</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-58'><c- n>EventHandler</c-></a> <a href='#handler-onsecuritypolicyviolation' id='idl-definitions:handler-onsecuritypolicyviolation'><c- g>onsecuritypolicyviolation</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-59'><c- n>EventHandler</c-></a> <a href='#handler-onseeked' id='idl-definitions:handler-onseeked'><c- g>onseeked</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-60'><c- n>EventHandler</c-></a> <a href='#handler-onseeking' id='idl-definitions:handler-onseeking'><c- g>onseeking</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-61'><c- n>EventHandler</c-></a> <a href='#handler-onselect' id='idl-definitions:handler-onselect'><c- g>onselect</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-62'><c- n>EventHandler</c-></a> <a href='#handler-onslotchange' id='idl-definitions:handler-onslotchange'><c- g>onslotchange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-63'><c- n>EventHandler</c-></a> <a href='#handler-onstalled' id='idl-definitions:handler-onstalled'><c- g>onstalled</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-64'><c- n>EventHandler</c-></a> <a href='#handler-onsubmit' id='idl-definitions:handler-onsubmit'><c- g>onsubmit</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-65'><c- n>EventHandler</c-></a> <a href='#handler-onsuspend' id='idl-definitions:handler-onsuspend'><c- g>onsuspend</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-66'><c- n>EventHandler</c-></a> <a href='#handler-ontimeupdate' id='idl-definitions:handler-ontimeupdate'><c- g>ontimeupdate</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-67'><c- n>EventHandler</c-></a> <a href='#handler-ontoggle' id='idl-definitions:handler-ontoggle'><c- g>ontoggle</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-68'><c- n>EventHandler</c-></a> <a href='#handler-onvolumechange' id='idl-definitions:handler-onvolumechange'><c- g>onvolumechange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-69'><c- n>EventHandler</c-></a> <a href='#handler-onwaiting' id='idl-definitions:handler-onwaiting'><c- g>onwaiting</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-70'><c- n>EventHandler</c-></a> <a href='#handler-onwebkitanimationend' id='idl-definitions:handler-onwebkitanimationend'><c- g>onwebkitanimationend</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-71'><c- n>EventHandler</c-></a> <a href='#handler-onwebkitanimationiteration' id='idl-definitions:handler-onwebkitanimationiteration'><c- g>onwebkitanimationiteration</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-72'><c- n>EventHandler</c-></a> <a href='#handler-onwebkitanimationstart' id='idl-definitions:handler-onwebkitanimationstart'><c- g>onwebkitanimationstart</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-73'><c- n>EventHandler</c-></a> <a href='#handler-onwebkittransitionend' id='idl-definitions:handler-onwebkittransitionend'><c- g>onwebkittransitionend</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-74'><c- n>EventHandler</c-></a> <a href='#handler-onwheel' id='idl-definitions:handler-onwheel'><c- g>onwheel</c-></a>; }; <c- b>interface</c-> <c- b>mixin</c-> <dfn id='windoweventhandlers' data-dfn-type='interface'><c- g>WindowEventHandlers</c-></dfn> { <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-75'><c- n>EventHandler</c-></a> <a href='#handler-window-onafterprint' id='idl-definitions:handler-window-onafterprint'><c- g>onafterprint</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-76'><c- n>EventHandler</c-></a> <a href='#handler-window-onbeforeprint' id='idl-definitions:handler-window-onbeforeprint'><c- g>onbeforeprint</c-></a>; <c- b>attribute</c-> <a href='#onbeforeunloadeventhandler' id='idl-definitions:onbeforeunloadeventhandler'><c- n>OnBeforeUnloadEventHandler</c-></a> <a href='#handler-window-onbeforeunload' id='idl-definitions:handler-window-onbeforeunload'><c- g>onbeforeunload</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-77'><c- n>EventHandler</c-></a> <a href='#handler-window-onhashchange' id='idl-definitions:handler-window-onhashchange'><c- g>onhashchange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-78'><c- n>EventHandler</c-></a> <a href='#handler-window-onlanguagechange' id='idl-definitions:handler-window-onlanguagechange'><c- g>onlanguagechange</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-79'><c- n>EventHandler</c-></a> <a href='#handler-window-onmessage' id='idl-definitions:handler-window-onmessage'><c- g>onmessage</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-80'><c- n>EventHandler</c-></a> <a href='#handler-window-onmessageerror' id='idl-definitions:handler-window-onmessageerror'><c- g>onmessageerror</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-81'><c- n>EventHandler</c-></a> <a href='#handler-window-onoffline' id='idl-definitions:handler-window-onoffline'><c- g>onoffline</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-82'><c- n>EventHandler</c-></a> <a href='#handler-window-ononline' id='idl-definitions:handler-window-ononline'><c- g>ononline</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-83'><c- n>EventHandler</c-></a> <a href='#handler-window-onpagehide' id='idl-definitions:handler-window-onpagehide'><c- g>onpagehide</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-84'><c- n>EventHandler</c-></a> <a href='#handler-window-onpagereveal' id='idl-definitions:handler-window-onpagereveal'><c- g>onpagereveal</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-85'><c- n>EventHandler</c-></a> <a href='#handler-window-onpageshow' id='idl-definitions:handler-window-onpageshow'><c- g>onpageshow</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-86'><c- n>EventHandler</c-></a> <a href='#handler-window-onpageswap' id='idl-definitions:handler-window-onpageswap'><c- g>onpageswap</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-87'><c- n>EventHandler</c-></a> <a href='#handler-window-onpopstate' id='idl-definitions:handler-window-onpopstate'><c- g>onpopstate</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-88'><c- n>EventHandler</c-></a> <a href='#handler-window-onrejectionhandled' id='idl-definitions:handler-window-onrejectionhandled'><c- g>onrejectionhandled</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-89'><c- n>EventHandler</c-></a> <a href='#handler-window-onstorage' id='idl-definitions:handler-window-onstorage'><c- g>onstorage</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-90'><c- n>EventHandler</c-></a> <a href='#handler-window-onunhandledrejection' id='idl-definitions:handler-window-onunhandledrejection'><c- g>onunhandledrejection</c-></a>; <c- b>attribute</c-> <a href='#eventhandler' id='idl-definitions:eventhandler-91'><c- n>EventHandler</c-></a> <a href='#handler-window-onunload' id='idl-definitions:handler-window-onunload'><c- g>onunload</c-></a>; };</code></pre> <h5 id=event-firing>8.1.8.3 Event firing<a href=#event-firing class=self-link></a></h5> Certain operations and methods are defined as firing events on elements. For example, the <code id=event-firing:dom-click><a href=interaction.html#dom-click>click()</a></code> method on the <code id=event-firing:htmlelement><a href=dom.html#htmlelement>HTMLElement</a></code> interface is defined as firing a <code id=event-firing:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event on the element. <a href=references.html#refsUIEVENTS>[UIEVENTS]</a> <dfn id=fire-a-synthetic-pointer-event>Firing a synthetic pointer event named <var>e</var></dfn> at <var>target</var>, with an optional <var>not trusted flag</var>, means running these steps: <ol><li>Let <var>event</var> be the result of <a id=event-firing:creating-an-event href=https://dom.spec.whatwg.org/#concept-event-create data-x-internal=creating-an-event>creating an event</a> using <code id=event-firing:pointerevent><a data-x-internal=pointerevent href=https://w3c.github.io/pointerevents/#pointerevent-interface>PointerEvent</a></code>.<li>Initialize <var>event</var>'s <code id=event-firing:dom-event-type><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> attribute to <var>e</var>.<li>Initialize <var>event</var>'s <code id=event-firing:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=event-firing:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attributes to true.<li>Set <var>event</var>'s <a id=event-firing:composed-flag href=https://dom.spec.whatwg.org/#composed-flag data-x-internal=composed-flag>composed flag</a>.<li>If the <var>not trusted flag</var> is set, initialize <var>event</var>'s <code id=event-firing:dom-event-istrusted><a data-x-internal=dom-event-istrusted href=https://dom.spec.whatwg.org/#dom-event-istrusted>isTrusted</a></code> attribute to false.<li>Initialize <var>event</var>'s <code>ctrlKey</code>, <code>shiftKey</code>, <code>altKey</code>, and <code>metaKey</code> attributes according to the current state of the key input device, if any (false for any keys that are not available).<li>Initialize <var>event</var>'s <code id=event-firing:dom-uievent-view><a data-x-internal=dom-uievent-view href=https://w3c.github.io/uievents/#dom-uievent-view>view</a></code> attribute to <var>target</var>'s <a id=event-firing:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <code id=event-firing:window><a href=nav-history-apis.html#window>Window</a></code> object, if any, and null otherwise.<li><var>event</var>'s <code>getModifierState()</code> method is to return values appropriately describing the current state of the key input device.<li>Return the result of <a href=https://dom.spec.whatwg.org/#concept-event-dispatch id=event-firing:concept-event-dispatch data-x-internal=concept-event-dispatch>dispatching</a> <var>event</var> at <var>target</var>.</ol> <dfn id=fire-a-click-event>Firing a <code>click</code> event</dfn> at <var>target</var> means <a href=#fire-a-synthetic-pointer-event id=event-firing:fire-a-synthetic-pointer-event>firing a synthetic pointer event named <code>click</code></a> at <var>target</var>. <h3 id=windoworworkerglobalscope-mixin>8.2 The <code id=windoworworkerglobalscope-mixin:windoworworkerglobalscope><a href=#windoworworkerglobalscope>WindowOrWorkerGlobalScope</a></code> mixin<a href=#windoworworkerglobalscope-mixin class=self-link></a></h3> The <code id=windoworworkerglobalscope-mixin:windoworworkerglobalscope-2><a href=#windoworworkerglobalscope>WindowOrWorkerGlobalScope</a></code> mixin is for use of APIs that are to be exposed on <code id=windoworworkerglobalscope-mixin:window><a href=nav-history-apis.html#window>Window</a></code> and <code id=windoworworkerglobalscope-mixin:workerglobalscope><a href=workers.html#workerglobalscope>WorkerGlobalScope</a></code> objects. Other standards are encouraged to further extend it using <code>partial interface mixin <a href=#windoworworkerglobalscope id=windoworworkerglobalscope-mixin:windoworworkerglobalscope-3>WindowOrWorkerGlobalScope</a> { … };</code> along with an appropriate reference. <pre><code class='idl'><c- b>typedef</c-> (<c- b>DOMString</c-> <c- b>or</c-> <a href='https://webidl.spec.whatwg.org/#common-Function' id='windoworworkerglobalscope-mixin:idl-function' data-x-internal='idl-function'><c- n>Function</c-></a> <c- b>or</c-> <a href='https://w3c.github.io/trusted-types/dist/spec/#trusted-script' id='windoworworkerglobalscope-mixin:tt-trustedscript' data-x-internal='tt-trustedscript'><c- n>TrustedScript</c-></a>) <dfn id='timerhandler' data-dfn-type='typedef'><c- g>TimerHandler</c-></dfn>; <c- b>interface</c-> <c- b>mixin</c-> <dfn id='windoworworkerglobalscope' data-dfn-type='interface'><c- g>WindowOrWorkerGlobalScope</c-></dfn> { [<c- g>Replaceable</c->] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-origin' id='windoworworkerglobalscope-mixin:dom-origin'><c- g>origin</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-issecurecontext' id='windoworworkerglobalscope-mixin:dom-issecurecontext'><c- g>isSecureContext</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-crossoriginisolated' id='windoworworkerglobalscope-mixin:dom-crossoriginisolated'><c- g>crossOriginIsolated</c-></a>; <c- b>undefined</c-> <a href='#dom-reporterror' id='windoworworkerglobalscope-mixin:dom-reporterror'><c- g>reportError</c-></a>(<c- b>any</c-> <c- g>e</c->); // base64 utility methods <c- b>DOMString</c-> <a href='#dom-btoa' id='windoworworkerglobalscope-mixin:dom-btoa'><c- g>btoa</c-></a>(<c- b>DOMString</c-> <c- g>data</c->); <c- b>ByteString</c-> <a href='#dom-atob' id='windoworworkerglobalscope-mixin:dom-atob'><c- g>atob</c-></a>(<c- b>DOMString</c-> <c- g>data</c->); // timers <c- b>long</c-> <a href='timers-and-user-prompts.html#dom-settimeout' id='windoworworkerglobalscope-mixin:dom-settimeout'><c- g>setTimeout</c-></a>(<a href='#timerhandler' id='windoworworkerglobalscope-mixin:timerhandler'><c- n>TimerHandler</c-></a> <c- g>handler</c->, <c- b>optional</c-> <c- b>long</c-> <c- g>timeout</c-> = 0, <c- b>any</c->... <c- g>arguments</c->); <c- b>undefined</c-> <a href='timers-and-user-prompts.html#dom-cleartimeout' id='windoworworkerglobalscope-mixin:dom-cleartimeout'><c- g>clearTimeout</c-></a>(<c- b>optional</c-> <c- b>long</c-> <c- g>id</c-> = 0); <c- b>long</c-> <a href='timers-and-user-prompts.html#dom-setinterval' id='windoworworkerglobalscope-mixin:dom-setinterval'><c- g>setInterval</c-></a>(<a href='#timerhandler' id='windoworworkerglobalscope-mixin:timerhandler-2'><c- n>TimerHandler</c-></a> <c- g>handler</c->, <c- b>optional</c-> <c- b>long</c-> <c- g>timeout</c-> = 0, <c- b>any</c->... <c- g>arguments</c->); <c- b>undefined</c-> <a href='timers-and-user-prompts.html#dom-clearinterval' id='windoworworkerglobalscope-mixin:dom-clearinterval'><c- g>clearInterval</c-></a>(<c- b>optional</c-> <c- b>long</c-> <c- g>id</c-> = 0); // microtask queuing <c- b>undefined</c-> <a href='timers-and-user-prompts.html#dom-queuemicrotask' id='windoworworkerglobalscope-mixin:dom-queuemicrotask'><c- g>queueMicrotask</c-></a>(<a href='https://webidl.spec.whatwg.org/#VoidFunction' id='windoworworkerglobalscope-mixin:idl-voidfunction' data-x-internal='idl-voidfunction'><c- n>VoidFunction</c-></a> <var><c- g>callback</c-></var>); // ImageBitmap <a href='https://webidl.spec.whatwg.org/#idl-promise' id='windoworworkerglobalscope-mixin:idl-promise' data-x-internal='idl-promise'><c- b>Promise</c-></a><<a id='windoworworkerglobalscope-mixin:imagebitmap' href='imagebitmap-and-animations.html#imagebitmap'><c- n>ImageBitmap</c-></a>> <a href='imagebitmap-and-animations.html#dom-createimagebitmap' id='windoworworkerglobalscope-mixin:dom-createimagebitmap'><c- g>createImageBitmap</c-></a>(<a id='windoworworkerglobalscope-mixin:imagebitmapsource' href='imagebitmap-and-animations.html#imagebitmapsource'><c- n>ImageBitmapSource</c-></a> <c- g>image</c->, <c- b>optional</c-> <a id='windoworworkerglobalscope-mixin:imagebitmapoptions' href='imagebitmap-and-animations.html#imagebitmapoptions'><c- n>ImageBitmapOptions</c-></a> <c- g>options</c-> = {}); <a href='https://webidl.spec.whatwg.org/#idl-promise' id='windoworworkerglobalscope-mixin:idl-promise-2' data-x-internal='idl-promise'><c- b>Promise</c-></a><<a id='windoworworkerglobalscope-mixin:imagebitmap-2' href='imagebitmap-and-animations.html#imagebitmap'><c- n>ImageBitmap</c-></a>> <a href='imagebitmap-and-animations.html#dom-createimagebitmap' id='windoworworkerglobalscope-mixin:dom-createimagebitmap-2'><c- g>createImageBitmap</c-></a>(<a id='windoworworkerglobalscope-mixin:imagebitmapsource-2' href='imagebitmap-and-animations.html#imagebitmapsource'><c- n>ImageBitmapSource</c-></a> <c- g>image</c->, <c- b>long</c-> <c- g>sx</c->, <c- b>long</c-> <c- g>sy</c->, <c- b>long</c-> <c- g>sw</c->, <c- b>long</c-> <c- g>sh</c->, <c- b>optional</c-> <a id='windoworworkerglobalscope-mixin:imagebitmapoptions-2' href='imagebitmap-and-animations.html#imagebitmapoptions'><c- n>ImageBitmapOptions</c-></a> <c- g>options</c-> = {}); // structured cloning <c- b>any</c-> <a href='structured-data.html#dom-structuredclone' id='windoworworkerglobalscope-mixin:dom-structuredclone'><c- g>structuredClone</c-></a>(<c- b>any</c-> <c- g>value</c->, <c- b>optional</c-> <a id='windoworworkerglobalscope-mixin:structuredserializeoptions' href='web-messaging.html#structuredserializeoptions'><c- n>StructuredSerializeOptions</c-></a> <c- g>options</c-> = {}); }; <a id='windoworworkerglobalscope-mixin:window-2' href='nav-history-apis.html#window'><c- n>Window</c-></a> <c- b>includes</c-> <a href='#windoworworkerglobalscope' id='windoworworkerglobalscope-mixin:windoworworkerglobalscope-4'><c- n>WindowOrWorkerGlobalScope</c-></a>; <a id='windoworworkerglobalscope-mixin:workerglobalscope-2' href='workers.html#workerglobalscope'><c- n>WorkerGlobalScope</c-></a> <c- b>includes</c-> <a href='#windoworworkerglobalscope' id='windoworworkerglobalscope-mixin:windoworworkerglobalscope-5'><c- n>WindowOrWorkerGlobalScope</c-></a>;</code></pre> <dl class=domintro><dt><code>self.<a href=#dom-issecurecontext id=dom-issecurecontext-dev>isSecureContext</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/isSecureContext title="The global isSecureContext read-only property returns a boolean indicating whether the current context is secure (true) or not (false).">isSecureContext</a>Support in all current engines.<div class=support>Firefox49+Safari11.1+Chrome47+<hr>Opera?Edge79+<hr>Edge (Legacy)15+Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><dd>Returns whether or not this global object represents a <a href=#secure-context id=windoworworkerglobalscope-mixin:secure-context>secure context</a>. <a href=references.html#refsSECURE-CONTEXTS>[SECURE-CONTEXTS]</a><dt><code>self.<a href=#dom-origin id=dom-origin-dev>origin</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/origin title="The global origin read-only property returns the origin of the global scope, serialized as a string.">origin</a>Support in all current engines.<div class=support>Firefox54+Safari11+Chrome59+<hr>Opera?Edge79+<hr>Edge (Legacy)18Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><dd>Returns the global object's <a id=windoworworkerglobalscope-mixin:concept-origin href=browsers.html#concept-origin>origin</a>, serialized as string.<dt><code>self.<a href=#dom-crossoriginisolated id=dom-crossoriginisolated-dev>crossOriginIsolated</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/crossOriginIsolated title="The global crossOriginIsolated read-only property returns a boolean value that indicates whether the website is in a cross-origin isolation state. That state mitigates the risk of side-channel attacks and unlocks a few capabilities:">crossOriginIsolated</a>Support in all current engines.<div class=support>Firefox72+Safari15.2+Chrome87+<hr>Opera?Edge87+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><dd>Returns whether scripts running in this global are allowed to use APIs that require cross-origin isolation. This depends on the `<code id=windoworworkerglobalscope-mixin:cross-origin-opener-policy-2><a href=browsers.html#cross-origin-opener-policy-2>Cross-Origin-Opener-Policy</a></code>` and `<code id=windoworworkerglobalscope-mixin:cross-origin-embedder-policy><a href=browsers.html#cross-origin-embedder-policy>Cross-Origin-Embedder-Policy</a></code>` HTTP response headers and the "<code id=windoworworkerglobalscope-mixin:cross-origin-isolated-feature><a href=infrastructure.html#cross-origin-isolated-feature>cross-origin-isolated</a></code>" feature.</dl> <div class=example> Developers are strongly encouraged to use <code>self.origin</code> over <code>location.origin</code>. The former returns the <a id=windoworworkerglobalscope-mixin:concept-origin-2 href=browsers.html#concept-origin>origin</a> of the environment, the latter of the URL of the environment. Imagine the following script executing in a document on <code>https://stargate.example/</code>: <pre><code class='js'><c- a>var</c-> frame <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"iframe"</c-><c- p>)</c-> frame<c- p>.</c->onload <c- o>=</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c-> <c- a>var</c-> frameWin <c- o>=</c-> frame<c- p>.</c->contentWindow console<c- p>.</c->log<c- p>(</c->frameWin<c- p>.</c->location<c- p>.</c->origin<c- p>)</c-> <c- c1>// "null"</c-> console<c- p>.</c->log<c- p>(</c->frameWin<c- p>.</c->origin<c- p>)</c-> <c- c1>// "https://stargate.example"</c-> <c- p>}</c-> document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->frame<c- p>)</c-></code></pre> <code>self.origin</code> is a more reliable security indicator. </div> The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-issecurecontext data-dfn-type=attribute><code>isSecureContext</code></dfn> getter steps are to return true if <a id=windoworworkerglobalscope-mixin:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#relevant-settings-object id=windoworworkerglobalscope-mixin:relevant-settings-object>relevant settings object</a> is a <a href=#secure-context id=windoworworkerglobalscope-mixin:secure-context-2>secure context</a>, or false otherwise. The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-origin data-dfn-type=attribute><code>origin</code></dfn> getter steps are to return <a id=windoworworkerglobalscope-mixin:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#relevant-settings-object id=windoworworkerglobalscope-mixin:relevant-settings-object-2>relevant settings object</a>'s <a href=#concept-settings-object-origin id=windoworworkerglobalscope-mixin:concept-settings-object-origin>origin</a>, <a href=browsers.html#ascii-serialisation-of-an-origin id=windoworworkerglobalscope-mixin:ascii-serialisation-of-an-origin>serialized</a>. The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-crossoriginisolated data-dfn-type=attribute><code>crossOriginIsolated</code></dfn> getter steps are to return <a id=windoworworkerglobalscope-mixin:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#relevant-settings-object id=windoworworkerglobalscope-mixin:relevant-settings-object-3>relevant settings object</a>'s <a href=#concept-settings-object-cross-origin-isolated-capability id=windoworworkerglobalscope-mixin:concept-settings-object-cross-origin-isolated-capability>cross-origin isolated capability</a>. <h3 id=atob>8.3 Base64 utility methods<a href=#atob class=self-link></a></h3> The <code id=atob:dom-atob><a href=#dom-atob>atob()</a></code> and <code id=atob:dom-btoa><a href=#dom-btoa>btoa()</a></code> methods allow developers to transform content to and from the base64 encoding. In these APIs, for mnemonic purposes, the "b" can be considered to stand for "binary", and the "a" for "ASCII". In practice, though, for primarily historical reasons, both the input and output of these functions are Unicode strings. <dl class=domintro><dt><code><var>result</var> = self.<a href=#dom-btoa id=dom-btoa-dev>btoa</a>(<var>data</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/btoa title="The btoa() method creates a Base64-encoded ASCII string from a binary string (i.e., a string in which each character in the string is treated as a byte of binary data).">btoa</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome4+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><dd> Takes the input data, in the form of a Unicode string containing only characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, and converts it to its base64 representation, which it returns. Throws an <a id=atob:invalidcharactererror href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> exception if the input string contains any out-of-range characters. <dt><code><var>result</var> = self.<a href=#dom-atob id=dom-atob-dev>atob</a>(<var>data</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/atob title="The atob() function decodes a string of data which has been encoded using Base64 encoding. You can use the btoa() method to encode and transmit data which may otherwise cause communication problems, then transmit it and use the atob() method to decode the data again. For example, you can encode, transmit, and decode control characters such as ASCII values 0 through 31.">atob</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome4+<hr>Opera10.5+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><dd> Takes the input data, in the form of a Unicode string containing base64-encoded binary data, decodes it, and returns a string consisting of characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, corresponding to that binary data. Throws an <a id=atob:invalidcharactererror-2 href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the input string is not valid base64 data. </dl> The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-btoa data-dfn-type=method><code id=dom-windowbase64-btoa>btoa(<var>data</var>)</code></dfn> method must throw an <a id=atob:invalidcharactererror-3 href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if <var>data</var> contains any character whose code point is greater than U+00FF. Otherwise, the user agent must convert <var>data</var> to a byte sequence whose <var>n</var>th byte is the eight-bit representation of the <var>n</var>th code point of <var>data</var>, and then must apply <a id=atob:forgiving-base64-encode href=https://infra.spec.whatwg.org/#forgiving-base64-encode data-x-internal=forgiving-base64-encode>forgiving-base64 encode</a> to that byte sequence and return the result. The <dfn data-dfn-for=WindowOrWorkerGlobalScope id=dom-atob data-dfn-type=method><code id=dom-windowbase64-atob>atob(<var>data</var>)</code></dfn> method steps are: <ol><li>Let <var>decodedData</var> be the result of running <a id=atob:forgiving-base64-decode href=https://infra.spec.whatwg.org/#forgiving-base64-decode data-x-internal=forgiving-base64-decode>forgiving-base64 decode</a> on <var>data</var>.<li>If <var>decodedData</var> is failure, then throw an <a id=atob:invalidcharactererror-4 href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=atob:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Return <var>decodedData</var>.</ol> <nav><a href=document-lifecycle.html>← 7.5 Document lifecycle</a> — <a href=./>Table of Contents</a> — <a href=dynamic-markup-insertion.html>8.4 Dynamic markup insertion →</a></nav>