Q. サイト内のCSS・jsがFlipdeskのシナリオに反映されません

A. Flipdeskではサイト内のCSSを受けない仕様となっております

1. ShadowDOM対応を行いました

背景

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

これまで

• FlipdeskのバナーやポップアップがサイトのCSSの影響を受ける
• JavaScriptでFlipdeskのバナーやポップアップのDOM操作が行える

これから

• FlipdeskのバナーやポップアップがサイトのCSSの影響を受けない
• JavaScriptでFlipdeskのバナーやポップアップのDOM操作を行うには独自のオブジェクトを使用する必要があるため、「3. flipdesk_documentの使い方」をご確認ください。

2. ShadowDOMとは

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

• 技術的な詳細は こちらの記事（外部サイト）をご確認ください。

3. flipdesk_documentの使い方

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

// ▼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>

具体例

• 例）HTMLバナー内でFlipdeskのDOM要素に対してjavascriptを書きたい時