コンポーネントが自分で作るshadow root
カスタム要素がコンストラクタの中でshadow rootを作ります。ページを直接開いたときはSDKの起動前から存在し、アプリ内遷移で開いたときはSDKの起動後に作られます。
ブロック要素の中の文章と、入れ子のコンポーネント
shadow rootの中のブロック要素にある文章です。内側のコンポーネントは外側のshadow rootの中にあり、外側とは別に見つけて監視する必要があります。
外側のコンポーネントの文章です
内側のコンポーネントの文章です
shadow rootの直下に置かれた文章
要素に包まれず、shadow rootの直下に置かれた文章です。ボタンを押すと、その文章を書き換えます。
shadow rootの直下に並ぶ複数の文章
shadow rootの直下に、ブロック要素を挟んで文章が2つ置かれています。どちらもhostに属する別々の文章で、ライブ編集ではクリックした位置にある方が開きます。
インライン要素だけのshadow root
ブロック要素が無く、インライン要素だけが入ったshadow rootです。ボタンを押すと、インライン要素の中の文章を書き換えます。
自分のstylesheetを持つコンポーネント
shadow rootを作った直後に、自分のstylesheetで中身を丸ごと置き換えます（Litと同じ動き）。SDKのstyleはその後で加わり、コンポーネントのstyle（紫の太字）は変わりません。非表示や文字サイズの確認に使います。
入力欄のplaceholderとボタンのラベル
shadow rootの中にある入力欄のplaceholderと、ボタンのラベル（value属性）です。文章ではなく属性の翻訳を確認します。ボタンを押すと、placeholderを書き換えます。
shadow rootの中のリンク
shadow rootの中の文章にリンクが含まれています。ライブ編集の編集モードでは、クリックしてもページ遷移せず、文章の編集画面が開きます。
コンポーネントの中の基本シナリオへのリンクです
リンクに包まれたコンポーネント
リンクは通常のDOMにあり、その中にコンポーネントが置かれています。shadow rootの中の文章から見ると、リンクはshadow rootの外側にあります。
hostの子を包むリンク（オープン）
リンクはshadow rootの中にあり、文章はhostの子として通常のDOMにあります。文章はslotを通してリンクの中に表示されるので、クリックするとこのリンクで遷移します。リンク用のコンポーネントでよくある形です。
hostの子を包むリンク（クローズド）
上と同じ形で、shadow rootがクローズドです。SDKの起動後に作られた場合（アプリ内遷移でこのページを開いたとき）だけ、SDKはこのリンクを扱えます。
画像とSVG
shadow rootの中にある画像とインラインSVGです。ライブ編集でクリックして置き換え、訪問者として表示を確認します。
画像
shadow rootの中にあるimg要素です。
レスポンシブ画像（pictureとsrcset）
shadow rootの中にあるpicture要素です。sourceのsrcsetと、imgのsrcsetの両方を持ちます。
リンクの中の画像
shadow rootの中で、画像がリンクに包まれています。画像の編集画面にリンクタブが出ます。
hostの子の画像を包むリンク
リンクはshadow rootの中にあり、画像はhostの子として通常のDOMにあります。画像はslotを通してリンクの中に表示されます。
インラインSVG
shadow rootの中にあるインラインのsvg要素です。
背景画像
shadow rootの中で、コンポーネント自身のstyleによって指定される背景画像です。ライブ編集でクリックして置き換え、訪問者として表示を確認します。
要素の背景画像
shadow rootの中の要素に、shadow rootの中のstyleで背景画像が指定されています。
!important付きの背景画像
コンポーネント自身のstyleが、背景画像を!important付きで指定しています。置き換えた画像がそれより優先される必要があります。
::beforeの背景画像
shadow rootの中の要素の::before擬似要素に、背景画像が指定されています。
host自身の背景画像
shadow rootの中のstyle（:host）が、host要素そのものに背景画像を指定しています。その上にshadow rootの中の文章が表示されます。文章をクリックすると文章の編集画面が開きます。文章の下にある空の要素（shadow rootの中にあり、自分の背景は持たない）をクリックすると、その後ろに見えているhostの背景画像の編集画面が開きます。
背景の上にある文章です
hostの子の後ろにある背景画像
背景画像を持つ要素はshadow rootの中にあり、hostの子（通常のDOMにある文章と空の要素）がslotを通してその上に表示されます。文章をクリックすると文章の編集画面が開きます。文章の下にある空の要素（hostの子で、自分の背景は持たない）をクリックすると、その後ろに見えている背景画像の編集画面が開きます。
背景の上に表示されるhostの子の文章です
背景の上に表示されるhostの子の文章です
描画後に付けられるshadow root
Reactが要素を描画した後で、その要素にshadow rootを付けます。
オープンなshadow root
既にページ上にある要素に、描画後に attachShadow で付けられます。このときブラウザは何も通知しないので、attachShadow の呼び出しそのものから見つける必要があります。
クローズドなshadow root
クローズドなshadow rootは、要素から後で取得できません。SDKの起動後に作られたものだけが、作成時に受け取った参照で翻訳されます。
slotを持つshadow root
shadow rootの中の文章と、slotを通して表示される通常のDOMの文章が並びます。slotに表示される文章は通常のDOMにあるので、ほかの文章と同じように翻訳されます。
slotに表示される通常のDOMの文章です
内容の入れ替え
上の3つの内容を入れ替えます。オープンなものとslotを持つものはshadow rootの中身を丸ごと置き換え、クローズドなものはhostごと作り直します。
Reactが後から描画するコンポーネント
ボタンを押すと、Reactがコンポーネントを追加で描画します。Reactはコンポーネントを作ってからページに入れるので、作られた時点ではまだページ上にありません。
通常の更新
コンポーネントは、作られたのと同じ処理の中でページに入ります。
transitionでの更新
Reactはtransitionの描画を複数の処理に分け、最後にまとめてページに入れます。最初に作られたコンポーネントは、ページに入るまでに間が空きます。
独自ウィジェット
お客さんが自分で置く言語切替（.al-languages と .al-switch）がshadow rootの中にある場合です。押すと言語が切り替わり、選択中の言語に active が付きます。
ボタン形式
言語切替の全体がshadow rootの中にあります。
select形式
selectで言語を選ぶ形です。change はshadow rootの外へ伝わりません。
翻訳対象外のコンポーネント
翻訳対象外の指定は、shadow rootの中にも効きます。どちらも翻訳されないのが正しい結果です。
翻訳対象外の要素の中にあるコンポーネント
al-ignoreクラスが付いた要素の中に置かれたコンポーネントです。
コンストラクタで作成されたコンポーネントです
翻訳対象外の属性が付いたコンポーネント
コンポーネントの要素そのものにx-al-ignore属性が付いています。