HTML

Living Standard — Last Updated 1 September 2026

1. 1. 4.12 スクリプティング
      1. 4.12.1 script要素
         1. 4.12.1.1 Processing model
         2. 4.12.1.2 スクリプト言語
         3. 4.12.1.3 script要素のコンテンツの制約
         4. 4.12.1.4 外部スクリプトに対するインライン文書
         5. 4.12.1.5 Interaction of script elements and XSLT
      2. 4.12.2 noscript要素
      3. 4.12.3 template要素
         1. 4.12.3.1 Interaction of template elements with XSLT and XPath
      4. 4.12.4 slot要素

4.12 スクリプティング

スクリプトは著者が文書に双方向性を追加することを許可する。

著者は、宣言型のメカニズムがしばしばより保守しやすく、かつ多くのユーザーがスクリプトを無効としているため、可能であれば、スクリプトに宣言型の代替を使用するよう推奨される。

著者はまた、スクリプトのサポートがない状態でそれらのアプリケーションが行儀よくデグレードするよう推奨される。

4.12.1 script要素

カテゴリー：

メタデータコンテンツ。

フローコンテンツ。

フレージングコンテンツ。

スクリプトサポート要素。

この要素を使用できるコンテキスト：

メタデータコンテンツが期待される場所。

フレージングコンテンツが期待される場所。

スクリプトサポート要素が期待される場所。

コンテンツモデル：

src属性が存在しない場合、type属性の値に依存するが、スクリプトの内容制限に一致しなければならない。

src属性が存在する場合、要素は空またはスクリプト文書を含むだけでなくスクリプトの内容制限に一致するかのいずれかでなければならない。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

グローバル属性

type — スクリプトの種類

src — リソースのアドレス

nomodule — モジュールスクリプトをサポートするユーザーエージェントにおける実行を防ぐ

async — フェッチの間ブロックなしで、可能な場合にスクリプトを実行する

defer — スクリプトの実行を延期する

blocking — 要素が潜在的にレンダリングブロッキングであるかどうか

crossorigin — 要素が生成元をまたいだ要求を処理する方法

referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシー

integrity — Subresource Integrityチェックで使用される整合性メタデータ[SRI]

fetchpriority — 要素によって開始されるフェッチの優先度を設定する

アクセシビリティの考慮：

著者向け。

実装者向け。

サニタイゼーション：

安全でない。

DOMインターフェイス：

[Exposed=Window]
interface HTMLScriptElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString type;
  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute boolean noModule;
  [CEReactions] attribute boolean async;
  [CEReactions, Reflect] attribute boolean defer;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList blocking;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions] attribute DOMString referrerPolicy;
  [CEReactions, Reflect] attribute DOMString integrity;
  [CEReactions] attribute DOMString fetchPriority;

  [CEReactions] attribute DOMString text;

  static boolean supports(DOMString type);

  // also has obsolete members
};

script要素は、著者が文書に動的スクリプト、ユーザーエージェントへの命令、およびデータブロックを含めることを可能にする。この要素は、ユーザーにコンテンツを表すものでない。

script要素には、2つのコア属性がある。type属性は、表されるスクリプトの型のカスタマイズを可能にする：

• 属性を省略する、空文字列に設定する、またはJavaScript MIMEタイプエッセンスマッチに設定することは、そのスクリプトがクラシックスクリプトであり、JavaScript Scriptトップレベル制作物によって解釈されることを意味する。著者はtype属性を重複して設定するのではなく、省略すべきである。

• "module"にASCII大文字・小文字不区別で一致する属性を設定することは、スクリプトがJavaScript Moduleトップレベル制作物によって解釈されるようなJavaScriptモジュールスクリプトであることを意味する。

• "importmap"とASCII大文字・小文字不区別で一致する属性を設定することは、スクリプトがモジュール指定子解決の動作を制御するために使用されるJSONを含むインポートマップであることを意味する。

• この属性を"speculationrules"とASCII大文字・小文字不区別でマッチするように設定するということは、スクリプトがspeculation rule setを定義し、その中にspeculative loads記述するために使用されるJSONが含まれることを意味する。

• 属性を他の値に設定することは、スクリプトがデータブロックであることを意味し、ユーザーエージェントによって処理されるのではなく、著者スクリプトまたは他のツールによって処理される。著者は、データブロックを示すためにJavaScript MIMEタイプエッセンシャルマッチでない妥当なMIMEタイプ文字列を使用しなければならない。

  データブロックが妥当なMIMEタイプ文字列を使用して表記されなければならない要件は、潜在的な将来の衝突を回避するための場所である。"module"または"importmap"のようなMIMEタイプではないtype属性の値は、ユーザーエージェントで特別な動作をするスクリプトのタイプを示すために標準で使用される。現在に妥当なMIMEタイプ文字列を使用することで、将来のユーザーエージェントでさえも、データブロックが異なるスクリプトタイプとして再解釈されないことを保証する。

2つ目のコア属性はsrc属性です。これは、クラシックスクリプトおよびJavaScriptモジュールスクリプトに対してのみ指定しなければならず、要素の子テキストコンテンツをスクリプトコンテンツとして使用する代わりに、指定されたURLからスクリプトがフェッチされることを示す。srcが指定される場合、潜在的にスペースで囲まれる妥当な空でないURLでなければならない。

指定されたscript要素に指定できるその他の属性は、次の表によって決まる：

* インラインスクリプトには初期フェッチがないが、インラインスクリプトのcrossoriginおよびreferrerpolicy属性は、動的import()を含むモジュールインポートで使用されるcredentials modeおよびreferrerpolicyに影響する。

† crossoriginおよびreferrerpolicyとは異なり、fetchpriorityはモジュールのインポートに影響しない。See some discussion in issue #10276.

インラインscript要素、または外部スクリプトリソースのコンテンツは、それぞれクラシックスクリプトおよびJavaScriptモジュールスクリプトに対するJavaScript仕様のScriptまたはModule生成物の要件に適合しなければならない。[JAVASCRIPT]

インポートマップのインラインscript要素のコンテンツは、インポートマップのオーサリング要件に適合しなければならない。

投機ルールセットのインラインscript要素のコンテンツは、投機ルールセットのオーサリング要件に適合しなければならない。

データブロックを含めるために使用される場合、データは、インラインに埋め込まれなければならず、データの形式は、type属性を使用して指定しなければならず、かつscript要素のコンテンツは、使用される形式のために定義される要件に適合しなければならない。

nomodule属性は、モジュールスクリプトをサポートするユーザーエージェントでスクリプトが実行されないようにする真偽属性である。これは、下記に示すように、モダンなユーザーエージェントのモジュールスクリプトと古いユーザーエージェントのクラシックスクリプトの選択的な実行を可能にする。

asyncおよびdefer属性は、どのようにスクリプトが評価されるべきかを示す真偽属性である。スクリプトのタイプに応じて、これらの属性を使用して選択できる複数の可能なモードが存在する。

外部のクラシックスクリプトでは、async属性が存在する場合、クラシックスクリプトは解析用に並行してフェッチされ、使用可能になるとすぐに評価される（解析が完了する前に行われる可能性がある）。asyncが存在しないがdefer属性が存在する場合、クラシックスクリプトは、並行してフェッチされ、ページが解析終了したときに評価される。いずれの属性も存在しない場合、スクリプトは、両方が完了するまで解析を阻止して、すぐにフェッチされ評価される。

モジュールスクリプトについて、async属性が存在する場合、モジュールスクリプトとそのすべての依存関係は、構文解析と並行してフェッチされ、モジュールスクリプトは利用可能になるとすぐに（潜在的に構文解析が完了する前に）評価される。そうでなければ、モジュールスクリプトとその依存関係は、構文解析と並行してフェッチされ、ページが解析終了したときに評価される。（defer属性は、モジュールスクリプトに影響しない。）

これは、次の模式図にすべて要約される：

これら属性の正確な処理の詳細は、主に歴史的な理由から、いくぶん自明でない、多くのHTMLの側面を含む。したがって、実装要求は必然的に仕様のあらゆる場所に散在している。The algorithms below describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for script start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc.

document.write()メソッドを使用して挿入するとき、通常はscript要素が実行される（一般に、スクリプトの実行またはHTMLの解析をブロックする）。innerHTML属性とouterHTML属性を使用して挿入する場合、それらは一切実行されない。

たとえasync属性が指定されても、デフォルトとなるブロッキング動作の代わりにdeferの動作をフォールバックするために、deferのみをサポートする（かつasyncをサポートしない）レガシーウェブブラウザーをもたらすため、defer属性は指定されてもよい。

blocking属性はブロッキング属性である。

crossorigin属性はCORS設定属性である。外部クラシックスクリプトの場合、スクリプトが他の生成元から取得されたとき、エラー情報を表示するかどうかを制御する。外部モジュールスクリプトの場合、異なる生成元であれば、モジュールソースの初期フェッチに使用される資格モードを制御する。クラシックとモジュールスクリプトとの両方で、異なる生成元のモジュールのインポートに使用される資格情報モードを制御する。

クラシックスクリプトとは異なり、モジュールスクリプトは、生成元をまたいだフェッチのためにCORSプロトコルを使用する必要がある。

referrerpolicy属性は、リファラーポリシー属性である。これは、外部スクリプトの初期フェッチと、インポートされたモジュールスクリプトのフェッチに使用されるリファラーポリシーを設定する。[REFERRERPOLICY]

<script referrerpolicy="origin">
  fetch('/api/data');    // not fetched with <script>'s referrer policy
  import('./utils.mjs'); // is fetched with <script>'s referrer policy ("origin" in this case)
</script>

integrity属性は、外部スクリプトの初期フェッチに使用される完全性メタデータを設定する。その値はintegrity属性の要件にマッチしなければならない。[SRI]

fetchpriorityは、フェッチ優先度属性である。外部スクリプトの初期フェッチに使用される優先順位を設定する。

Changing any of these attributes dynamically has no direct effect; these attributes are only used at specific times described in the processing model.

script.text [ = value ]

要素の子テキストコンテンツを返す。

script.text = value

要素の子をvalueで指定されたテキストに置き換える。

HTMLScriptElement.supports(type)

指定されたtypeがユーザーエージェントによってサポートされるスクリプトタイプである場合、trueを返す。この仕様で可能なスクリプトタイプは"classic"、"module"および"importmap"であるが、将来的に他のタイプが追加される可能性がある。

type引数は、これらの値と正確に一致する必要がある。ASCII大文字・小文字不区別一致は実行しない。これは、typeコンテンツ属性値の処理方法、およびDOMTokenListのsupports()メソッドの動作とは異なるが、Worker()コンストラクターで使用されるWorkerType列挙体と一致する。

<script src="game-engine.js"></script>
<script type="text/x-game-map">
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
</script>

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false" onchange="calculate(this)">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul>
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>

<script type="module" src="app.mjs"></script>

<script type="module" src="app.mjs"></script>
<script nomodule defer src="classic-app-bundle.js"></script>

<script type="module">
 import { walkAllTextNodeDescendants } from "./dom-utils.mjs";

 const substitutions = new Map([
   ["witnesses", "these dudes I know"]
   ["allegedly", "kinda probably"]
   ["new study", "Tumblr post"]
   ["rebuild", "avenge"]
   ["space", "spaaace"]
   ["Google glass", "Virtual Boy"]
   ["smartphone", "Pokédex"]
   ["electric", "atomic"]
   ["Senator", "Elf-Lord"]
   ["car", "cat"]
   ["election", "eating contest"]
   ["Congressional leaders", "river spirits"]
   ["homeland security", "Homestar Runner"]
   ["could not be reached for comment", "is guilty and everyone knows it"]
 ]);

 function substitute(textNode) {
   for (const [before, after] of substitutions.entries()) {
     textNode.data = textNode.data.replace(new RegExp(`\\b${before}\\b`, "ig"), after);
   }
 }

 walkAllTextNodeDescendants(document.body, substitute);
</script>

<script type="module">
 import peopleInSpace from "http://api.open-notify.org/astros.json" with { type: "json" };

 const list = document.querySelector("#people-in-space");
 for (const { craft, name } of peopleInSpace.people) {
   const li = document.createElement("li");
   li.textContent = `${name} / ${craft}`;
   list.append(li);
 }
</script>

4.12.1.1 Processing model

A script element has several associated pieces of state.

A script element has a parser document, which is either null or a Document, initially null. It is set by the HTML parser and the XML parser on script elements they insert, and affects the processing of those elements. script elements with non-null parser documents are known as parser-inserted.

A script element has a preparation-time document, which is either null or a Document, initially null. It is used to prevent scripts that move between documents during preparation from executing.

A script element has a force async boolean, initially true. It is set to false by the HTML parser and the XML parser on script elements they insert, and when the element gets an async content attribute added.

A script element has a from an external file boolean, initially false. It is determined when the script is prepared, based on the src attribute of the element at that time.

A script element has a ready to be parser-executed boolean, initially false. This is used only used for elements that are also parser-inserted, to let the parser know when to execute the script.

A script element has an already started boolean, initially false.

A script element has a delaying the load event boolean, initially false.

A script element has a type, which is either null, "classic", "module", "importmap", or "speculationrules", initially null. It is determined when the element is prepared, based on the type attribute of the element at that time.

A script element has a result, which is either "uninitialized", null (representing an error), a script, an import map parse result, or a speculation rules parse result. It is initially "uninitialized".

<script>
const script1 = document.createElement('script');
script1.innerText = `
  document.querySelector('#script2').remove();
`;

const script2 = document.createElement('script');
script2.id = 'script2';
script2.textContent = `console.log('script#2 running')`;

document.body.append(script1, script2);
</script>

<script id=outer-script></script>

<script>
  const outerScript = document.querySelector('#outer-script');

  const start = new Text('console.log(1);');
  const innerScript = document.createElement('script');
  innerScript.textContent = `console.log('inner script executing')`;
  const end = new Text('console.log(2);');

  outerScript.append(start, innerScript, end);

  // Logs:
  // 1
  // 2
  // inner script executing
</script>

Each Document has a pending parsing-blocking script, which is a script element or null, initially null.

Each Document has a set of scripts that will execute as soon as possible, which is a set of script elements, initially empty.

Each Document has a list of scripts that will execute in order as soon as possible, which is a list of script elements, initially empty.

Each Document has a list of scripts that will execute when the document has finished parsing, which is a list of script elements, initially empty.

If a script element that blocks a parser gets moved to another Document before it would normally have stopped blocking that parser, it nonetheless continues blocking that parser until the condition that causes it to be blocking the parser no longer applies (e.g., if the script is a pending parsing-blocking script because the original Document has a style sheet that is blocking scripts when it was parsed, but then the script is moved to another Document before the blocking style sheet(s) loaded, the script still blocks the parser until the style sheets are all loaded, at which time the script executes and the parser is unblocked).

4.12.1.2 スクリプト言語

User agents are not required to support JavaScript. This standard needs to be updated if a language other than JavaScript comes along and gets similar wide adoption by web browsers. Until such a time, implementing other languages is in conflict with this standard, given the processing model defined for the script element.

サーバーは、Updates to ECMAScript Media Typesに従って、JavaScriptリソースにtext/javascriptを使用すべきである。サーバーは、JavaScriptリソースに他のJavaScript MIMEタイプを使用すべきではなく、非JavaScript MIMEタイプを使用してはならない。[RFC9239]

For external JavaScript resources, MIME type parameters in `Content-Type` headers are generally ignored. (In some cases the `charset` parameter has an effect.) However, for the script element's type attribute they are significant; it uses the JavaScript MIME type essence match concept.

For example, scripts with their type attribute set to "text/javascript; charset=utf-8" will not be evaluated, even though that is a valid JavaScript MIME type when parsed.

Furthermore, again for external JavaScript resources, special considerations apply around `Content-Type` header processing as detailed in the prepare the script element algorithm and Fetch. [FETCH]

4.12.1.3 script要素のコンテンツの制約

この節で説明されるかなり奇妙な制約を回避する最も簡単で安全な方法は、これらのシーケンスがスクリプト内でリテラル（たとえば文字列、正規表現、またはコメントなど）に出現するとき、ASCII大文字・小文字不区別の一致で"<!--"を"<\!--"に、"<script"を"<\script"に、および"</script"を"<\/script"に常にエスケープし、式の中でそのような構造体を使用するコードを記述しないようにすることである。この節の制限がトリガーになりやすい落とし穴を回避する：すなわち、歴史的な理由のために、HTMLにおけるscriptブロックの解析は、これらのシーケンスを考えた場合に直観的でない働きをする奇妙で風変わりな慣習である。

script要素の子孫テキストコンテンツは、Unicodeの文字セットである次のABNFのscript生成物と一致しなければならない。[ABNF]

script        = outer *( comment-open inner comment-close outer )

outer         = < any string that doesn't contain a substring that matches not-in-outer >
not-in-outer  = comment-open
inner         = < any string that doesn't contain a substring that matches not-in-inner >
not-in-inner  = comment-close / script-open

comment-open  = "<!--"
comment-close = "-->"
script-open   = "<" s c r i p t tag-end

s             =  %x0053 ; U+0053 LATIN CAPITAL LETTER S
s             =/ %x0073 ; U+0073 LATIN SMALL LETTER S
c             =  %x0043 ; U+0043 LATIN CAPITAL LETTER C
c             =/ %x0063 ; U+0063 LATIN SMALL LETTER C
r             =  %x0052 ; U+0052 LATIN CAPITAL LETTER R
r             =/ %x0072 ; U+0072 LATIN SMALL LETTER R
i             =  %x0049 ; U+0049 LATIN CAPITAL LETTER I
i             =/ %x0069 ; U+0069 LATIN SMALL LETTER I
p             =  %x0050 ; U+0050 LATIN CAPITAL LETTER P
p             =/ %x0070 ; U+0070 LATIN SMALL LETTER P
t             =  %x0054 ; U+0054 LATIN CAPITAL LETTER T
t             =/ %x0074 ; U+0074 LATIN SMALL LETTER T

tag-end       =  %x0009 ; U+0009 CHARACTER TABULATION (tab)
tag-end       =/ %x000A ; U+000A LINE FEED (LF)
tag-end       =/ %x000C ; U+000C FORM FEED (FF)
tag-end       =/ %x0020 ; U+0020 SPACE
tag-end       =/ %x002F ; U+002F SOLIDUS (/)
tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (>)

script要素がスクリプト文書を含む場合、下記の節で記述されるように、要素のコンテンツのさらなる制約がある。

const example = 'Consider this string: <!-- <script>';
console.log(example);

<script>
  const example = 'Consider this string: <!-- <script>';
  console.log(example);
</script>

<script>
  const example = 'Consider this string: <!-- <script>';
  console.log(example);
</script>
<!-- despite appearances, this is actually part of the script still! -->
<script>
 ... // this is the same script block still...
</script>

<script>
  // Note: `\x3C` is an escape sequence for `<`.
  const example = 'Consider this string: \x3C!-- \x3Cscript>';
  console.log(example);
</script>
<!-- this is just a comment between script blocks -->
<script>
 ... // this is a new script block
</script>

if (x<!--y) { ... }
if ( player<script ) { ... }

if (x < !--y) { ... }
if (!--y > x) { ... }
if (!(--y) > x) { ... }
if (player < script) { ... }
if (script > player) { ... }

4.12.1.4 外部スクリプトに対するインライン文書

script要素のsrc属性が指定される場合、もしあれば、script要素のコンテンツは、要素のコンテンツから分割されるようなtext IDL属性値でなければならず、文字セットがUnicodeである下記のABNFでdocumentation生成物と一致しなければならない。[ABNF]

documentation = *( *( space / tab / comment ) [ line-comment ] newline )
comment       = slash star *( not-star / star not-slash ) 1*star slash
line-comment  = slash slash *not-newline

; characters
tab           = %x0009 ; U+0009 CHARACTER TABULATION (tab)
newline       = %x000A ; U+000A LINE FEED (LF)
space         = %x0020 ; U+0020 SPACE
star          = %x002A ; U+002A ASTERISK (*)
slash         = %x002F ; U+002F SOLIDUS (/)
not-newline   = %x0000-0009 / %x000B-10FFFF
                ; a scalar value other than U+000A LINE FEED (LF)
not-star      = %x0000-0029 / %x002B-10FFFF
                ; a scalar value other than U+002A ASTERISK (*)
not-slash     = %x0000-002E / %x0030-10FFFF
                ; a scalar value other than U+002F SOLIDUS (/)

これは、JavaScriptのコメントで要素のコンテンツを設置するものと一致する。

この要求は、script要素のコンテンツの構文上に先の制約に加えて存在する。

<script src="cool-effects.js">
 // create new instances using:
 //    var e = new Effect();
 // start the effect using .play, stop using .stop:
 //    e.play();
 //    e.stop();
</script>

4.12.1.5 Interaction of script elements and XSLT

Avoid using client-side XSLT in browsers. The browser implementations of XSLT are highly susceptible to memory safety vulnerabilities, and the web platform has evolved toward JavaScript as the safe replacement. For these reasons, this feature is in the process of being removed from the web platform. （これは何年もかかる長いプロセスである。）

この節は非規範的である。

This specification does not define how XSLT interacts with the script element. However, in the absence of another specification actually defining this, here are some guidelines for implementers, based on existing implementations:

• When an XSLT transformation program is triggered by an <?xml-stylesheet?> processing instruction and the browser implements a direct-to-DOM transformation, script elements created by the XSLT processor need to have its parser document set correctly, and run in document order (modulo scripts marked defer or async), immediately, as the transformation is occurring.

• The XSLTProcessor transformToDocument() method adds elements to a Document object with a null browsing context, and, accordingly, any script elements they create need to have their already started set to true in the prepare the script element algorithm and never get executed (scripting is disabled). Such script elements still need to have their parser document set, though, such that their async IDL attribute will return false in the absence of an async content attribute.

• The XSLTProcessor transformToFragment() method needs to create a fragment that is equivalent to one built manually by creating the elements using document.createElementNS(). For instance, it needs to create script elements with null parser document and with their already started set to false, so that they will execute when the fragment is inserted into a document.

The main distinction between the first two cases and the last case is that the first two operate on Documents and the last operates on a fragment.

4.12.2 noscript要素

カテゴリー：

メタデータコンテンツ。

フローコンテンツ。

フレージングコンテンツ。

この要素を使用できるコンテキスト：

先祖noscript要素が存在しない場合、HTML文書のhead要素内。

先祖noscript要素が存在しない場合、HTML文書でフレージングコンテンツが期待される場所。

先祖noscript要素がない場合、select要素またはoptgroup要素の子孫として。

コンテンツモデル：

スクリプトが無効の場合、head要素内で：任意の順で、0個以上のlink要素、0個以上のstyle要素、0個以上のmeta要素。

スクリプトが無効の場合、head要素外で：透過的。ただし、noscript要素の子孫を持ってはならない。

そうでなければ：文で与えられる要件に適合するテキスト。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

グローバル属性

アクセシビリティの考慮：

著者向け。

実装者向け。

サニタイゼーション：

未分類。

DOMインターフェイス：

HTMLElementを使用する。

noscript要素は、スクリプトが有効である場合は何も表さず、スクリプトが無効である場合は要素の子を表す。これは、文書が解析される方法に影響を与えることによって、スクリプトをサポートするユーザーエージェントとサポートしないユーザーエージェントに異なるマークアップを提示するために使用される。

HTML文書で使用する場合、許可されるコンテンツモデルは次のとおり：

スクリプトが無効である場合、head要素内のnoscript要素に対して

noscript要素は、link、style、およびmeta要素のみを含まなければならない。

スクリプトが有効である場合、head要素内のnoscript要素に対して

noscript要素は、テキストのみを含まなければならない。ただし、context要素としてnoscript要素をもつHTML断片解析アルゴリズムを呼び出し、かつinputとしてテキストコンテンツを呼び出すと、noscript要素の子であった場合に適合するだろう、link、style、meta要素のみからなるノードのリストをもたらさなければならず、かつ解析エラーでない場合を除く。

スクリプトが無効である場合、head要素外のnoscript要素に対して

noscript要素のコンテンツモデルは透過的であり、同時にnoscript要素がnoscript要素を持ってはならない（noscript要素を入れ子にできない）追加制限がある。

スクリプトが有効である場合、head要素外のnoscript要素に対して

noscript要素はテキストのみを含まなければならない。ただしテキストは、次のアルゴリズムがnoscript要素およびscript要素をもたない適合文書をもたらすものでなければならず、アルゴリズムでステップは例外を投げるまたはHTMLパーサーに解析エラーを起こさないようにしなければならない：

1. 文書からすべてのscript要素を取り除く。
2. 文書においてすべてのnoscript要素のリストを作る。そのリストの各noscript要素に対して、次のステップを実行する：
   1. sをnoscript要素要素の子テキストコンテンツとする。
   2. noscript要素のouterHTML属性をsの値に設定する。（これは、副作用としてnoscript要素を文書から除去させる。）

歴史的な理由により、パーサーが呼び出されたときにスクリプトモードが無効かどうかに基づくHTMLパーサーによってnoscript要素が異なる方法で処理されるので、これらのすべてのこじつけが必要とされる。

noscriptはXML文書で使用してはならない。

noscript要素はHTML構文でのみ有効だが、XML構文では効果がない。スクリプトが有効である場合、この要素が動作する方法は、基本的にパーサーを"オフ"にすることであり、要素の内容は、実際の要素としてではなく純粋にテキストとして扱われているのである。XMLは、これを実行するためのメカニズムを定義しない。

The noscript element has no other requirements. In particular, children of the noscript element are not exempt from form submission, scripting, and so forth, even when scripting is enabled for the element.

<form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
 </script>
 <noscript>
  <input type=submit value="Calculate Square">
 </noscript>
</form>

<form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <input id="submit" type=submit value="Calculate Square">
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
  var submit = document.getElementById('submit');
  submit.parentNode.removeChild(submit);
 </script>
</form>

4.12.3 template要素

カテゴリー：

メタデータコンテンツ。

フローコンテンツ。

フレージングコンテンツ。

スクリプトサポート要素。

この要素を使用できるコンテキスト：

メタデータコンテンツが期待される場所。

フレージングコンテンツが期待される場所。

スクリプトサポート要素が期待される場所。

span属性を持たないcolgroup要素の子として。

コンテンツモデル：

Nothing（明確化のために、例を参照）。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

グローバル属性

for — 既存のコンテンツを更新する

shadowrootmode — 宣言的なシャドウルートのストリーミングを有効にする

shadowrootdelegatesfocus — 宣言的なシャドウルートに代理フォーカスを設定する

shadowrootserializable — 宣言的なシャドウルートにシリアライズ可能を設定する

shadowrootslotassignment — 宣言的なシャドウルートにスロット割り当てを設定する

shadowrootclonable — 宣言的なシャドウルートにクローン可能を設定する

shadowrootcustomelementregistry — 宣言的なシャドウルートを有効にして、カスタム要素レジストリを使用することを示す

アクセシビリティの考慮：

著者向け。

実装者向け。

サニタイゼーション：

未分類。

DOMインターフェイス：

[Exposed=Window]
interface HTMLTemplateElement : HTMLElement {
  [HTMLConstructor] constructor();

  readonly attribute DocumentFragment content;
  [CEReactions, Reflect="for"] attribute DOMString htmlFor;
  [CEReactions] attribute DOMString shadowRootMode;
  [CEReactions, Reflect] attribute boolean shadowRootDelegatesFocus;
  [CEReactions, Reflect] attribute boolean shadowRootSerializable;
  [CEReactions] attribute DOMString shadowRootSlotAssignment;
  [CEReactions, Reflect] attribute boolean shadowRootClonable;
  [CEReactions, Reflect] attribute DOMString shadowRootCustomElementRegistry;
};

template要素は、複製され、スクリプトによって文書に挿入できるHTMLの断片を宣言するために使用される。

レンダリングにおいて、template要素は何も表さない。

forコンテンツ属性は、コンテンツを挿入する位置（<?marker>）、または置き換える範囲の開始位置（<?start>）を示すProcessingInstructionを識別する。この属性が指定されている場合、この属性の値は、template要素と同じツリー内にある<?marker>または<?start> ProcessingInstructionのname属性の値と同じでなければならない。

shadowrootmodeコンテンツ属性は、次のキーワードおよび状態をもつ列挙属性である：

shadowrootmode属性の無効値のデフォルトおよび欠損値のデフォルトは、両方ともnone状態である。

shadowrootdelegatesfocusコンテンツ属性は、真偽属性である。

shadowrootserializableコンテンツ属性は、真偽属性である。

shadowrootslotassignmentコンテンツ属性は、次のキーワードおよび状態をもつ列挙属性である：

shadowrootslotassignment属性の不正値のデフォルトと欠損値のデフォルトの両方は、Named状態である。

shadowrootclonableコンテンツ属性は、真偽属性である。

shadowrootcustomelementregistryコンテンツ属性は、真偽属性である。

template要素のテンプレートコンテンツは、要素自体の子ではない。

DOM操作の結果として、template要素がTextノードと要素ノードを含むことも可能である。しかし、この要素のコンテンツモデルはnothingとして定義されるため、すべてのものはtemplate要素のコンテンツモデルに違反する。

<!doctype html>
<html lang="en">
 <head>
  <title>Homework</title>
 <body>
  <template id="template"><p>Smile!</p></template>
  <script>
   let num = 3;
   const fragment = document.getElementById('template').content.cloneNode(true);
   while (num-- > 1) {
     fragment.firstChild.before(fragment.firstChild.cloneNode(true));
     fragment.firstChild.textContent += fragment.lastChild.textContent;
   }
   document.body.appendChild(fragment);
  </script>
</html>

template.content

✔MDN

HTMLTemplateElement/content

Support in all current engines.

Firefox22+Safari8+Chrome26+

---

Opera?Edge79+

---

Edge (Legacy)13+Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

テンプレートコンテンツ（DocumentFragment）を返す。

Each template element has an associated Element-or-DocumentFragment-or-null insertion target, which is initially null.

Each template element has an associated ProcessingInstruction-or-null insertion start marker and insertion end marker, which are initially null.

The shadowRootCustomElementRegistry IDL attribute intentionally does not have a boolean type so it can be extended.

<!DOCTYPE html>
<html lang='en'>
<title>Cat data</title>
<script>
 // Data is hard-coded here, but could come from the server
 var data = [
   { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
   { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
 ];
</script>
<table>
 <thead>
  <tr>
   <th>Name <th>Color <th>Sex <th>Legs
 <tbody>
  <template id="row">
   <tr><td><td><td><td>
  </template>
</table>
<script>
 var template = document.querySelector('#row');
 for (var i = 0; i < data.length; i += 1) {
   var cat = data[i];
   var clone = template.content.cloneNode(true);
   var cells = clone.querySelectorAll('td');
   cells[0].textContent = cat.name;
   cells[1].textContent = cat.color;
   cells[2].textContent = cat.sex;
   cells[3].textContent = cat.legs;
   template.parentNode.appendChild(clone);
 }
</script>

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Out-of-order countries</title>
  <style>
   #countries:empty {
    opacity: 0;
   }
  </style>
 </head>
 <body>
  <select id=countries><?marker name="country-options"?></select>
  ...
  <template for="country-options"><option>Antigua</option>...</template>
 </body>
</html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Async recommendation engine</title>
  <style>
   aside {
    /* position the aside where it can grow without causing layout shift or obscuring other content */
   }
   aside:has(.placeholder) {
    /* style the placeholder content */
   }
  </style>
 </head>
 <body>
  <h1>How to train your cat</h1>
  <p>Set realistic goals and don't expect your cat to make a perfect cup of tea
  on the first try.</p>
  <aside>
    <p>Recommended reading:</p>
    <?start name="recommended">
    <ul class="placeholder">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
    <?end>
  </aside>
  <p>...</p>
  <p>Now sit back and enjoy your tea with your cat.</p>

  <!-- The server has a potentially long delay at this point. -->

  <template for="recommended">
    <ul>
      <li>Cat or butler, which is right for you?</li>
      <li>Rewarding good cat behavior</li>
      <li>Kettles considered harmful</li>
    </ul>
  </template>
 </body>
</html>

4.12.3.1 Interaction of template elements with XSLT and XPath

Avoid using client-side XSLT in browsers. The browser implementations of XSLT are highly susceptible to memory safety vulnerabilities, and the web platform has evolved toward JavaScript as the safe replacement. For these reasons, this feature is in the process of being removed from the web platform. （これは何年もかかる長いプロセスである。）

この節は非規範的である。

This specification does not define how XSLT and XPath interact with the template element. However, in the absence of another specification actually defining this, here are some guidelines for implementers, which are intended to be consistent with other processing described in this specification:

• An XSLT processor based on an XML parser that acts as described in this specification needs to act as if template elements contain as descendants their template contents for the purposes of the transform.

• An XSLT processor that outputs a DOM needs to ensure that nodes that would go into a template element are instead placed into the element's template contents.

• XPath evaluation using the XPath DOM API when applied to a Document parsed using the HTML parser or the XML parser described in this specification needs to ignore template contents.

4.12.4 slot要素

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

透過的

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

グローバル属性

name — シャドウツリースロットの名前

アクセシビリティの考慮：

著者向け。

実装者向け。

サニタイゼーション：

未分類。

DOMインターフェイス：

[Exposed=Window]
interface HTMLSlotElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString name;
  sequence<Node> assignedNodes(optional AssignedNodesOptions options = {});
  sequence<Element> assignedElements(optional AssignedNodesOptions options = {});
  undefined assign((Element or Text)... nodes);
};

dictionary AssignedNodesOptions {
  boolean flatten = false;
};

slot要素は、スロットを定義する。典型的にシャドウツリーに使用される。もしあれば、slot要素はその割り当てられるノードを表し、そうでなければそのコンテンツを表す。

nameコンテンツ属性は、任意の文字列値を含んでもよい。これはスロットの名前を表す。

slot属性は、別の要素にスロットを割り当てるために使用される：name属性をもつslot要素は、その要素がそのname属性の値と一致する値を持つslot属性を持ち、かつslot要素がその対応するslot属性値を持つルートのホストを持つシャドウツリーの子である場合、任意の要素が割り当てられる名前付きスロットを作成する。

slot.name

✔MDN

HTMLSlotElement/name

Support in all current engines.

Firefox63+Safari10+Chrome53+

---

Opera?Edge79+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

slotの名前を取得し設定することが可能である。

slot.assignedNodes()

✔MDN

HTMLSlotElement/assignedNodes

Support in all current engines.

Firefox63+Safari10+Chrome53+

---

Opera?Edge79+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

slotの割り当てられるノードを返す。

slot.assignedNodes({ flatten: true })

もしあれば、slotの割り当てられるノードを返し、そうでなければslotの子を返し、かつslot要素が存在しなくなるまで、再帰的に、slot要素に遭遇するのと同じものを返す。

slot.assignedElements()

✔MDN

HTMLSlotElement/assignedElements

Support in all current engines.

Firefox66+Safari12.1+Chrome65+

---

Opera?Edge79+

---

Edge (Legacy)?Internet ExplorerNo

---

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

要素に限定された、slotの割り当てられたノードを返す。

slot.assignedElements({ flatten: true })

要素に限定されたassignedNodes({ flatten: true })と同じものを返す。

slot.assign(...nodes)

slotの手動で割り当てられたノードを、指定されたnodesに設定する。

slot要素は、manually assigned nodesを持ち、これは、 assign()によって設定されたslottablesの順序付きセットである。このセットは、最初は空である。

manually assigned nodesセットは、スクリプトから直接アクセスできないため、slottablesへの弱い参照を使用して実装することができる。