◆ shadowroot 属性付きの template タグが親要素の ShadowDOM 定義になって ShadowRoot を作成してくれる
◆ HTML で書けるので SSR に対応できる
◆ getInnerHTML() メソッドが追加されて ShadowDOM 部分含めて innerHTML を取得できる

これまで JavaScript で 「element.attachShadow({ mode: "open" })」 のようにして ShadowRoot を作っていたのが HTML だけでできるようになるみたいです
https://web.dev/declarative-shadow-dom/

<host-element>
<template shadowroot="open">
<slot></slot>
</template>
<h2>Light content</h2>
</host-element>

これを使って SSR も対応できるようです
SSR はしなくていいけど ShadowDOM 内の HTML を HTML ファイル中に書けて ShadowRoot を attach する処理も書かなくて済むのは便利かなと思いました
……がよく考えると同じコンポーネントがいくつも並ぶところだと全部に同じテンプレートを書くことになるのでダメでした
ルートコンポーネントみたいな 1 つしか使わないところなら使えますが 限定的ですし複数使う必要ができたときに困るので SSR しないならこれまでどおり JavaScript 側でやったほうが良さそうです

また ShadowDOM の定義を HTML に書けるようになったことで innerHTML の取得時に ShadowDOM 内の HTML も取得できるようになるようです
innerHTML プロパティは互換性のためにそのままで getInnerHTML というメソッドが追加されるそうです
引数のオプションで includeShadowRoots を true に指定すると ShadowDOM の部分も含んで取得します
ShadowDOM も含めて innerHTML を使ってお手軽コピーできるのは良さそうです