Chrome 151 がリリースされた。Capability 要素の <usermedia>、declarative shadow DOM の shadowrootslotassignment、SPA 向けの soft-navigation と interaction-contentful-paint が含まれる。

#Capability 要素 <usermedia>

<usermedia> はカメラとマイクのストリーム取得を、ブラウザ制御の宣言的コントロールで扱う。ユーザー操作を契機に権限プロンプトを出し、同意後は MediaStream を要素経由で渡す。別途の getUserMedia() 呼び出しを抱え込まずに済み、以前拒否したユーザー向けの回復もページ上で再提示できる。

html
<usermedia id="media-ctrl">
  Enable camera and microphone
</usermedia>
js
const el = document.getElementById("media-ctrl");

el.setConstraints({
  video: { width: 1280, height: 720 },
  audio: { echoCancellation: true },
});

el.addEventListener("stream", () => {
  videoPreview.srcObject = el.stream;
});

#Declarative shadow DOM: shadowrootslotassignment

<template> に shadowrootslotassignment 属性が入り、declarative shadow root でも manual slot assignment を HTML だけで指定できる。値は named（既定）と manual。HTMLTemplateElement.shadowRootSlotAssignment に反映される。Firefox と Safari 27 beta でも利用でき、まもなく Baseline Newly available になる見込み。

html
<template shadowrootmode="open" shadowrootslotassignment="manual">
  <slot></slot>
</template>

#Soft Navigations と interaction performance metrics

Performance timeline に soft-navigation と interaction-contentful-paint が追加された。前者はユーザー操作起因の同一ドキュメント内の履歴変更を捉え、新しい時間原点を立てて後続メトリクスを現在ルートへ紐づける。後者は操作で変わった DOM 領域内の contentful paint を測り、fetch() 待ちの遅延も含めて可視化する。

js
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

#参考文献