Flipdeskのボタン・ポップアップがサイトのCSSの影響を受けなくなります

FlipdeskのShadowDOM対応を行いました

• 背景
  • FlipdeskのボタンやポップアップがサイトのCSSの影響を受け、管理画面のプレビューとサイト上のボタンやポップアップの外観が一致しないという問題がありました
    • この課題を解決するためにFlipdeskのボタンやポップアップに対してShadowDOM対応を行いました

•  これまで
  • FlipdeskのボタンやポップアップがサイトのCSSの影響を受ける
  • JavaScriptでFlipdeskのボタンやポップアップのDOM操作が行える
• これから
  
  • FlipdeskのボタンやポップアップがサイトのCSSの影響を受けない
  • JavaScriptでFlipdeskのボタンやポップアップのDOM操作を行うには 独自のオブジェクトを使う

ShadowDOMとは？

• 特定のDOM要素をカプセル化し、マークアップ構造・スタイル・動作を隠蔽する技術です

• 技術的な詳細は こちらの記事 をご確認ください

flipdesk_documentの使い方

• JavaScriptでFlipdeskのボタンやポップアップのDOM操作を行うには flipdesk_document を利用してください。flipdesk_documentを介してのみFlipdeskのボタンやポップアップに対してDOM操作が行えます
• Flipdeskのボタンやポップアップに関連しないサイト上の他の要素に対してはこれまで通りdocument.querySelector等を利用してください
  • この場合はflipdesk_documentは使えません。

// ▼flipdesk_documentでFlipdeskのDOM要素を取得できます
flipdesk_document
// => <div id="flipdesk">...</div>

// ▼例：querySelector()を使用する場合
flipdesk_document.querySelector('#flipdesk-html-button-content')
// => <div id="flipdesk-html-button-content">...</div>