recursal/MDN huggingface dataset:
Notification.dir
================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`dir` は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `dir` オプションで指定されたテキストの書字方向を示します。

値
-

文字列で、書字方向を指定します。取りうる値は次の通りです。

`auto`

ブラウザーの言語設定の動作に合わせます（既定値）。

`ltr`

左書き。

`rtl`

右書き。


**メモ:** 多くのブラウザーは明示的な ltr や rtl の設定を無視し、ブラウザー全体の設定どおりに実行するようです。

例
-

次のスニペットは通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。


```js
const options = {
  body: "Do you like my body?",
  dir: "rtl",
};

const n = new Notification("Test notification", options);

console.log(n.dir); // should return 'rtl'
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-dir |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.tag
================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`tag`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `tag` オプションで指定された通知の識別タグを示します。

通知タグの考え方は、複数の通知が同じタグを共有し、それらを一緒にリンクすることです。ユーザーの画面が膨大な数の類似した通知で埋め尽くされるのを避けるために、一つの通知をプログラム的に別のものと置き換えることができます。

値
-

文字列です。

例
-

通知 API の使用の記事に、タグの使い方の良い例があります。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-tag |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.body
=================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`body`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `body` オプションで指定された通知の本文の文字列を返します。

値
-

文字列です。

例
-


```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };
  const n = new Notification(theTitle, options);

  console.log(n.body);
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-body |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
* `Notification.maxActions`
Notification: close イベント
========================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`close`** は `Notification` インターフェイスのイベントで、 `Notification` が閉じるときに発生します。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使うか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("close", (event) => {});

onclose = (event) => {};
```

イベント型
-----

一般的な `Event` です。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Notification`
* 通知 API の使用
Notification.badge
==================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`badge`** は `Notification` インターフェイスのプロパティで、通知自体を表示する空間が充分にない場合に通知を表す画像の URL を返します。

値
-

URL が入った文字列です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-badge |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Notification()
==============

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`Notification()`** コンストラクターは、ユーザー通知を表す新しい `Notification` オブジェクトのインスタンスを生成します。

構文
--


```js
new Notification(title)
new Notification(title, options)
```

### 引数

`title`

通知ウィンドウの最上部に表示される、通知のためのタイトルを定義します。

`options` 省略可

通知に適用するカスタム設定を含むオプションオブジェクトです。使用できるオプションは以下のとおりです。

`dir`

通知を表示する方向です。既定値は `auto` で、ブラウザーの言語設定の振る舞いが適用されますが、 `ltr` と `rtl` の値で振る舞いを上書きできます (ただし、ほとんどのブラウザーがこれらの設定を無視しているようですが)。

`lang`

RFC 5646: 言語を識別するタグ（BCP 47 とも）を表す文字列を使って指定される通知の言語です。簡単なリファレンスとして ISO 2 letter language codes ページを参照してください。

`badge`

文字列で、通知自体を表示する充分な空間がない場合に通知の表現に使用される画像の URL を指定します。

`body`

文字列で、タイトルの下側に表示される通知の本文を表します。

`tag`

通知のための識別タグを表す 文字列です。

`icon`

通知の一部として表示されるアイコンのURLを含む文字列です。

`image`

文字列で、通知に表示される画像の URL を指定します。

`data`

通知に関連付ける任意のデータです。これはどのデータ型でも可能です。

`vibrate`

通知が発生したときに端末のバイブレーションハードウェアに通知するバイブレーションパターンです。

`renotify`

古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定する論理値です。既定値は `false` で、通知しないことを意味します。

`requireInteraction`

通知が自動的に閉じるのではなく、ユーザーがクリックするか解除するまでアクティブな状態を維持すべきであることを示します。既定値は `false` です。

`actions`

通知で表示するアクションの配列です。配列内のそれぞれの要素は、以下のメンバーを持つオブジェクトです。

* `action`: 通知上に表示されるユーザーアクションを特定する文字列。
* `title`: ユーザーに表示するアクションテキストを含む文字列。
* `icon`: アクションとともに表示されるアイコンの URL を含む文字列。

適切なレスポンスは `event.action` を使用して `notificationclick` イベント内で構築されます。

`silent`

通知をサイレントにするかどうかを指定する論理値です。端末の設定にかかわらず、音やバイブレーションを発しないようにします。既定値は `false` で、サイレントではないことを意味します。


例
-

`Emogotchi demo`（ソースコードを見る）では、私たちが通知を発生させたいときに、 `spawnNotification()` 関数を実行しています。関数は必要な本文、アイコン、タイトルを指定する引数を受け取り、必要な `options` オブジェクトを生成して、 `Notification()` コンストラクターを用いて通知を発生させます。


```js
function spawnNotification(body, icon, title) {
  const notification = new Notification(title, { body, icon });
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-notification |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Chrome の注意事項

Chrome 49 以降では、 incognito モードでは通知が動作しません。

Android 版 Chrome は `Notification` コンストラクターを呼び出すと `TypeError` を発生させます。サービスワーカーからの通知の作成にのみ対応しています。詳しくは Chromium issue tracker をご覧ください。

### Internet Explorer の注意事項

バージョン 38.14352 以降の MS Edge は通知 API に対応しています。 Wikipedia - MS Edge

IE 11 以前では対応していません。

関連情報
----

* 通知 API の使用
Notification.title
==================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`title`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `title` 引数で指定された通知のタイトルを示します。

値
-

文字列です。

例
-


```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };

  const n = new Notification(theTitle, options);

  console.log(n.title);
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-title |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.lang
=================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`lang`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `lang` オプションで指定された通知の言語を示します。

言語自体は文字列でRFC 5646: 言語識別タグ (BCP 47) を表します。簡単なリファレンスとしては、 Sitepoint の ISO 2 letter language codes ページを見てください。

値
-

文字列で、言語タグを指定します。

例
-

次のスニペットは通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。


```js
const options = {
  body: "Do you like my body?",
  lang: "en-US",
};

const n = new Notification("Test notification", options);

console.log(n.lang); // should return 'en-US'
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-lang |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.maxActions
=======================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`maxActions`** は `Notification` インターフェイスの属性で、端末とユーザーエージェントが対応するアクションの最大数を返します。実質的には、これはユーザーエージェントが尊重する `Notification.actions` 配列の最大数です。

値
-

整数で、ユーザ－エージェントと端末がユーザーに提示することができるできる通知アクションの最大数を示します。

例
-

以下のスニペットは、対応するアクションの最大数をログ出力します。


```js
const maxActions = Notification.maxActions;
console.log(
  `This device can display at most ${maxActions} actions on each notification.`,
);
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-maxactions |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.close()
====================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`close()` は `Notification` インターフェイスのメソッドで、表示された通知を閉じたり削除したりするために使用されます。

**メモ:** この API は、一定時間経過後に通知を画面から消去するだけのために使用すべきではありません。通知が最初に表示された後にユーザーがそれとやりとりすることを防ぐため、このメソッドは通知トレイからも通知を削除するためです。この API の正しい使用方法は、ユーザーに関係がなくなった通知を除去することです（例えば、メッセージアプリなどで、ユーザーが既にウェブページ上の通知を読んだ場合や、音楽アプリですでに次の曲が始まっているため、曲の変更を行うための通知を閉じるなど）。

構文
--


```js
close()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

以下のスニペットは、呼び出されたときに `options` オブジェクトと、それから新しい通知を生成します。を生成し、関数の末尾で、 `close()` を `addEventListener()` 関数の中で呼び出し、関連するコンテンツがウェブページで既読になったときに通知を除去します。


```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };

  const n = new Notification(theTitle, options);
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      // The tab has become visible so clear the now-stale Notification.
      n.close();
    }
  });
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-close |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.silent
===================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`silent`** は `Notification` インターフェイスの読み取り専用プロパティで、通知が静かに行われるべきかどうか、すなわち、端末の設定に関わらず、音やバイブレーションを発生させないようにするかを指定します。これは `Notification()` コンストラクターの `silent` オプションで指定されます。

値
-

論理値です。 `false` が既定値です。 `true` で通知を静かに行います。

例
-

次のスニペットは静かな通知を発行するためのものです。単純な `options` オブジェクトが生成され、通知が `Notification()` コンストラクターを使用して発行されます。


```js
const options = {
  body: "Do you like my body?",
  silent: true,
};

const n = new Notification("Test notification", options);

console.log(n.silent); // should log true
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-silent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.icon
=================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`icon`** は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `icon` オプションで指定された、通知の一部として表示されるアイコンの URL を含みます。

値
-

文字列です。

例
-

To-do リストアプリ（ライブ実行のアプリを表示）では、 `Notification()` コンストラクターを使用して通知を発行し、希望する本文、アイコン、タイトルを指定するために引数を渡します。


```js
const notification = new Notification("To do list", {
  body: text,
  icon: img,
});
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-icon |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.image
==================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`image` は `Notification` インターフェイスの読み取り専用プロパティで、 `Notification()` コンストラクターの `image` オプションで指定された、通知の一部として表示される画像の URL を含みます。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # image-resource |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API の使用
Notification.permission
=======================

**注:** この機能は Web Worker 内で利用可能です

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`permission` は `Notification` インターフェイスの読み取り専用プロパティで、ユーザーが現在のオリジンに対してウェブ通知を表示することを許可したかどうか、現在の許可状態を表します。

値
-

文字列で、現在の許可の状態を表します。以下の値が可能です。

`granted`

現在のオリジンがシステム通知を表示することについて、ユーザーが明示的な許可を与えている。

`denied`

現在のオリジンがシステム通知を表示することについて、ユーザーが明示的に拒否している。

`default`

ユーザーの決定は分からない。この場合、アプリケーションは許可が `denied` であるかのように動作する。

例
-

以下のスニペットは、まず通知に対応しているかどうかをチェックし、現在のオリジンで通知を送信するための許可が付与されているかどうかをチェックし、必要であれば許可を要求してから通知を送信したい場合に使用することができます。


```js
function notifyMe() {
  if (!("Notification" in window)) {
    // ブラウザーが通知に対応しているかどうかをチェックする
    alert("このブラウザーはデスクトップ通知に対応していません。");
  } else if (Notification.permission === "granted") {
    // 通知の許可が既に得られているかどうかをチェックする
    // それならば、通知を作成する
    const notification = new Notification("こんにちは！");
    // …
  } else if (Notification.permission !== "denied") {
    // そうでなければ、ユーザーに許可を求める必要がある
    Notification.requestPermission().then((permission) => {
      // ユーザーが許可したら、通知を作成する
      if (permission === "granted") {
        const notification = new Notification("こんにちは！");
        // …
      }
    });
  }

  // 最後に、ユーザーが通知を拒否していて、あなたが敬意を
  // 払いたい場合は、これ以上相手を煩わせることはありません。
}
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-notification-permission |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 通知 API
* 通知 API の使用
* 許可 API
* 許可 API の使用
HTMLSlotElement: assignedElements() メソッド
========================================

**`assignedElements()`** は `HTMLSlotElement` インターフェイスのメソッドで、このスロットに割り当てられた一連の要素を返します (そしてそれ以外の要素を除きます)。

`flatten` オプションが `true` に設定されていた場合、このスロットに代入された要素と、このスロットの子孫である他のスロットに代入された要素の両方を配列で返します。代入された要素が見つからなかった場合は、スロットの代替コンテンツを返します。

構文
--


```js
assignedElements()
assignedElements(options)
```

### 引数

`options` 省略可

返されるノードのためのオプションを設定したオブジェクトです。利用可能なオプションは以下のとおりです。

`flatten`

論理値で、利用可能な子の `<slot>` 要素すべてに割り当てられた要素を返すか (`true`)、返さないか (`false`) を示します。既定値は `false` です。


### 返値

要素の配列です。

例
-


```js
let slots = this.shadowRoot.querySelector("slot");
let elements = slots.assignedElements({ flatten: true });
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-assignedelements-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSlotElement: assignedNodes() メソッド
=====================================

`assignedNodes()` は `HTMLSlotElement` インターフェイスのプロパティで、このスロットに割り当てられた一連のノードを返します。

`flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

構文
--


```js
assignedNodes()
assignedNodes(options)
```

### 引数

`options` 省略可

返されるノードのためのオプションを設定したオブジェクトです。利用可能な値は以下のとおりです。

`flatten`

論理値で、利用可能な子の `<slot>` 要素すべてに割り当てられたノードを返すか (`true`)、返さないか (`false`) を示します。既定値は `false` です。


### 返値

ノードの配列。

例
-

以下のスニペットは、 slotchange
の例 (ライブでも確認) からとりました。


```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```


ここではすべてのスロットの参照を取得し、テンプレート内の 2 番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。

スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-assignednodes-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSlotElement: slotchange イベント
================================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`slotchange`** イベントは、 `HTMLSlotElement` インスタンス(`<slot>` 要素) において、そのスロットに含まれるノードが変更された場合に発行されます。

**メモ:** スロットに入っているノードの子ノードが変更された場合、 `slotchange` イベントは発生しません。実際のノード自体を変更（例えば、追加または削除）した場合に限ります。

**slotchange** イベントを発行させるには、 `slot` 属性を設定または削除しなければなりません。

このイベントはキャンセルできません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティに設定するかしてください。


```js
addEventListener("slotchange", (event) => {});

onslotchange = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-


```js
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null
```


次のスニペットは、 slotchange の例から取りました (ライブでも確認できます)。


```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```


ここではすべての `<slot>` への参照を取得し、テンプレートの 2 番目のスロットに `slotchange` イベントリスナーを追加します。この例ではコンテンツが変更されているスロットです。

スロットに挿入された要素が変更されるたびに、どのスロットが変更されたか、スロット内の新しいノードが何であるかを示すレポートがコンソールに記録されます。

仕様書
---

| Specification |
| --- |
| DOM Standard # eventdef-htmlslotelement-slotchange |
| HTML Standard # handler-onslotchange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

`HTMLSlotElement`
HTMLSlotElement: name プロパティ
===========================

**`name`** は `HTMLSlotElement` インターフェイスのプロパティで、スロットの名前を返したり、設定したりします。スロットはウェブコンポーネント内のプレイスホルダーで、ユーザーが独自のマークアップで埋めることができます。

値
-

文字列です。

例
-

以下のスニペットは、 slotchange
の例から取ったものです (ライブでも確認してください).


```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```


ここでは、すべてのスロットの参照を取得し、テンプレートの 2 番目のスロット（この例では内容が変更され続けるスロット）に slotchange イベントリスナーを追加しています。

スロットに挿入された要素が変更されるたびに、どのスロットが変更され、スロット内の新しいノードが何であるかというレポートをコンソールに記録しています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-name-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSlotElement: assign() メソッド
==============================

**`assign()`** は `HTMLSlotElement` インターフェイスのメソッドで、このスロットの手動で割り当てられたノードをスロットテーブルの順序付きリストに設定します。手動で割り当てられたノードは初期状態では、ノードに `assign()` を使用して割り当てられるまで空です。

**メモ:** 手動の（命令的な）スロットと名前付き（宣言的、自動的な）スロットの割り当てを混在させることはできません。したがって、このメソッドを動作させるには、シャドウツリーを作成するのに `slotAssignment: "manual"` オプションを使用する必要があります。

構文
--


```js
assign(node1)
assign(node1, node2)
assign(node1, node2, /\* … ,\*/ nodeN)
```

### 引数

`node1`, …, `nodeN`

一連の `Element` または `Text` ノードです。

### 返値

なし (`undefined`)。

### 例外

* `NotAllowedError` `DOMException`
 -: 自動的に割り当てられるスロットでこのメソッドを呼び出すと発生します。
例
-

以下の例では、タブ型アプリケーションで正しいタブを表示するために `assign()` メソッドを使用しています。この関数が呼び出され、表示するパネルが渡され、それがスロットに代入されます。


```js
function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;
  const slot = shadow.querySelector("slot");
  const panels = elem.querySelectorAll("tab-panel");
  if (panels.length && tabIdx && tabIdx <= panels.length) {
    slot.assign(panels[tabIdx - 1]);
  } else {
    slot.assign();
  }
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-slot-assign |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Element.attachShadow()`
SubmitEvent.submitter
=====================

**`submitter`** は `SubmitEvent` インターフェイスにある読み取り専用プロパティで、フォームを送信させるために呼び出された送信ボタンや他の要素を指定します。

値
-

要素で、フォームに送信した `submit` イベントを送った要素を表します。これは、 `<input>` 要素で `type` が `submit` であるものや、 `<button>` 要素で `type` が `submit` であるものが多いのですが、送信処理を開始した要素は他のものである可能性があります。

送信が何らかのボタンによって発生したものでない場合、 `submitter` の値は `null` になります。

例
-

コード例は `SubmitEvent`を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-submitevent-interface:dom-submitevent-submitter-2 |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SubmitEvent()
=============

**`SubmitEvent()`** コンストラクターは、新しい `SubmitEvent` オブジェクトを作成して返します。これは HTML フォームで発行された `submit` イベントを表現するために使用されます。

構文
--


```js
new SubmitEvent(type)
new SubmitEvent(type, options)
```

### 引数

`type`

 イベントの名前を表す文字列。
 大文字と小文字は区別され、ブラウザーは常に `submit` に設定します。


`options` 省略可

オブジェクトで、 *`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`submitter` 省略可

フォームを送信するきっかけとなった送信ボタンである `HTMLElement` オブジェクトです。


### 返値

指定された入力コントロールを使用して構成された `SubmitEvent` オブジェクト。

例
-

 このコードでは、現在の文書内のフォームを探し、そのフォームに `submit` クラスを持つ HTML `<button>` 探します。
 次に、新しい `SubmitEvent` を作成し、その `submitter` には、特定したボタン（またはボタンが見つからなかった場合は `null` ）を設定します。そして、イベントをフォームに送信し、ボタンによって送信されたことをフォームに指示します。


```js
const form = document.querySelector("form");
const formTrigger = form.querySelector("button.submit");
const submitEvent = new SubmitEvent("submit", { submitter: formTrigger });

form.dispatchEvent(submitEvent);
```


この例はやや作為的なもので、ほぼすべての処理をもっと簡単に行うことができますが、これによって処理を深く制御することができ、それが有用となる場合があります。

仕様書
---

| Specification |
| --- |
| HTML Standard # submitevent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement: accessKey プロパティ
============================

**`HTMLElement.accessKey`** プロパティは、ユーザーが押すとこの要素へジャンプすることができるキーストロークを設定します。

**メモ:** `HTMLElement.accessKey` プロパティは、ブラウザーにすでに存在するキーバインドとよく衝突するため、めったに使われることはありません。これを回避するために、ブラウザーは accesskey の動作を他の「修飾」キー（`Alt` + accesskey など）と一緒に押された場合に動作するよう実装しています。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML グローバル属性: accesskey
HTMLElement: style プロパティ
========================

**`style`** は `HTMLElement` の読み取り専用プロパティで、要素のインラインスタイルを `CSSStyleDeclaration` オブジェクトの形で返します。このオブジェクトには、その要素のインラインの `style` 属性で定義されている属性に値が割り当てられている、その要素のすべてのスタイルプロパティのリストが入っています。

一括指定プロパティは展開されます。`style="border-top: 1px solid black"` と設定すると、個別指定プロパティ (`border-top-color`, `border-top-style`, `border-top-width`) が代わりに設定されます。

このプロパティは読み取り専用であり、`CSSStyleDeclaration` オブジェクトを割り当てることはできないことを意味しています。それでも、文字列を直接 `style` プロパティに代入することで、インラインスタイルを設定することは可能です。この場合、文字列は `CSSStyleDeclaration.cssText` に転送されます。この方法で `style` を使用すると、その要素のすべてのインラインスタイルが完全に上書きされます。

したがって、他のスタイル値を変えずに要素に固有のスタイルを追加するには、一般に `CSSStyleDeclaration` オブジェクトに個々のプロパティを設定することをお勧めします。例えば、`element.style.backgroundColor = "red"` と書くことができます。

スタイル宣言は、`elt.style.color = null` のように、`null` または空文字列を設定することでリセットされます。

**メモ:** CSS プロパティ名は以下のルールで JavaScript の識別子に変換されます。

* プロパティが 1 語で構成されている場合は、そのままの形になります。`height` はそのまま（小文字で）残ります。
* プロパティがダッシュ区切りで複数の単語から構成されている場合は、ダッシュが削除されて *キャメルケース* へと変換されます。`background-attachment` は `backgroundAttachment` となります。
* プロパティ `float` は JavaScript の予約語なので、 `cssFloat` に変換されます。

`style` プロパティは、CSS カスケードにおいて、`style` 属性で設定されたインラインスタイル宣言と同じ優先順位を持ちます。

値
-

動的な `CSSStyleDeclaration` オブジェクトです。

例
-

### スタイル情報の取得

次のコードスニペットは、要素の `style` プロパティで取得した値と、HTML 属性で設定された一連のスタイルの関係を示します。


```html
<!doctype html>
<html lang="en-US">
  <body style="font-weight:bold">
    <div style="border-top: 1px solid blue; color:red" id="elt">
      An example div
    </div>
    <pre id="out"></pre>
  </body>
</html>
```



```js
const element = document.getElementById("elt");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all styles (for…of doesn't work with CSStyleDeclaration)
for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out.textContent += `${
 elementStyle[prop]
 } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}
```


なお、`font-weight` は `elementStyle` の値として載っていませんが、これは要素自体の `style` 属性の中で定義されていないからです。また、`style` 属性で定義されている一括指定の `border-top` プロパティは、直接載っていないことに注意してください。代わりに、対応する 3 つの個別指定プロパティ (`border-top-color`, `border-top-style`, `border-top-width`) に置き換えられています。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 動的なスタイル情報の利用
* `SVGElement.style` (en-US)