Embed API 以外の CSS が邪魔されないように仕組みを考える

[keichan34]

埋め込み先サイトのCSSにより表示が崩れるケースが有る #224

• web components で対応できる？ Add experimental web components #216 ?
• shadow DOM で対応できる？mapbox-gl-js はデフォルトで対応していないだが、CSSがうまく読み込まれていないだけみたいなので、微調整でshadow DOMで実装できるかな？

[keichan34]

https://codepen.io/keichan34/pen/ZEKqeEj?editors=1111

stylesheetをshadow DOM内に読み込めば行けそう

[kochizufan]

突然すみません、購読してるので流れてきましたので...

ご参考ですが、Maplatでは、使ってるcssを全部lessで読み込んで.maplatクラスの下に編成して、
Maplatを構成するdivにmaplatクラスを加えることで、外部から内部にも、内部から外部にもcssの影響を与えないようにしています。

https://github.com/code4history/Maplat/blob/master/less/ui.less

[keichan34]

@kochizufan コメントありがとうございました！

実は現在クラスは全部一応プレフィックスされているが、エンベッド先のサイトに div や div > :first-child などのクラスを指定しないCSSが読み込まれているの場合、レイアウトが崩れてしまいます。。

[ShinichiNishikawa]

ユーザーさんのこちらでも、同様の現象かな。

[miya0001]

これもしShadow DOMで対処するならたとえばWordPressのプラグイン内でやるとかにして、Embed API内での対処は避けたいです。
危惧しているのは万が一MapLibre側でこれに対する対処が入るなどのケースで、互換性とかの心配事が増えすぎるなと。

見ればすぐに分かることなので、とりあえず今はサポートとかドキュメンテーションとかで対処しましょう。
もしどうしても対処するならMapLibreにプルリクを送りましょう。

[keichan34]

そうですね。embed API 内で shadow DOM で対応するにしても最初からデフォルトにする（わざわざCSSで内部までスタイリングしているケースがあると思いまして）想定でなく、少なくとも data-shadow-dom="on" 的なスイッチの裏で実装しようと思っていました。

WordPressのプラグインに入れるのはいいかもね。