Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
その他 Limited support

element()

DOMの任意のHTML要素のライブレンダリングを画像として使用できる実験的な関数です。要素の変更がリアルタイムに反映されるライブプレビュー機能を実現できます。ただし、現在どのブラウザでも標準サポートされておらず、仕様策定段階の機能です。

ライブ画像実験的機能

概要

DOMの任意のHTML要素のライブレンダリングを画像として使用できる実験的な関数です。要素の変更がリアルタイムに反映されるライブプレビュー機能を実現できます。ただし、現在どのブラウザでも標準サポートされておらず、仕様策定段階の機能です。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応

基本構文

CSS 
/* Firefoxのみ（-moz-プレフィックス付き） */
.preview {
  background: -moz-element(#source);
  background-size: contain;
}

実務での使いどころ

  • ミニマップ・プレビュー表示

    ドキュメントの特定セクションのライブプレビューをサイドバーのミニマップとして表示します。

注意点

  • ブラウザネイティブサポートがほぼなく、実用的な使用は現時点では推奨されません。

アクセシビリティ

  • element()で生成される画像には代替テキストを設定できないため、重要な情報の伝達に使用しないでください。

参考リンク