Jak sprawić by widget z innej strony (na innym serwerze) przejął style CSS docelowej strony?

Question

Mam widgety na stronie A do osadzania na innych stronach. Mam stronę B gdzie osadzam widget ze strony A. Jak sprawić by przejął on style CSS ze strony B?

Przy okazji jakie są metody (i używane tagi) do osadzania widgetów z innych lokalizacji? Kiedyś był iframe, ale to już historia.

Answer 1

Jak sprawić by przejął on style CSS ze strony B?

To zależy, jak ten widget jest osadzany. Tradycyjny iframe blokuje style z zewnętrznej strony, ale jeśli widget byłby np. divem, który jest dynamicznie wypełniany treścią, to style powinny zostać normalnie odziedziczone. No chyba że strona nie ma żadnych stylów globalnych, wtedy pewnie trzeba byłoby kombinować z możliwością dodawania klas do widgeta.

Ogólnie IMO lepiej dać możliwość skonfigurowania wyglądu, niż automatycznie coś dziedziczyć. Ja bym taki widget widział tak:

1. Sam widget jest eksportowany jako Custom Element. Jeśli dodamy do tego Shadow DOM, to dostaniemy podobny poziom enkapsulacji jak iframe, ale równocześnie ominie się problemy związane z brakiem automatycznego dostosowywania się rozmiarów widgetu. Aczkolwiek raczej bym spróbował najpierw bez Shadow DOM, bo może się okazać, że wgl go nie potrzebujemy.
2. Całe stylowanie odbywa się przy pomocy zmiennych CSS. Wówczas integrator będzie mógł sobie dowolnie zmieniać wygląd przy ich pomocy.

Przy okazji jakie są metody (i używane tagi) do osadzania widgetów z innych lokalizacji? Kiedyś był iframe, ale to już historia.

Nie wiem, skąd przekonanie, że iframe to historia, bo to obecnie najpopularniejszy sposób na osadzanie takich widgetów. 

Comments

Dzięki!

Nie wiem, skąd przekonanie, że iframe to historia, bo to obecnie najpopularniejszy sposób na osadzanie takich widgetów. 

To mnie zaskoczyłeś, bo czytałem, ze iframe co prawda nie jest deprecated, ale już nie jest polecany (nie pamiętam z jakich powodów).

---

Well, jest sporo powodów, dla których warto unikać iframe (słabo się integruje z otoczeniem, wprowadza dziwne problemy z bezpieczeństwem, wpływa na historię przeglądania…), ale dla widgetów, które mają być gdzieś osadzone, jest dobrym wyborem. Choćby dlatego, że jednak w dużym stopniu izoluje taki widget od strony (np. nie da się do zawartości ramki dobrać JS-em). Na ten moment nie istnieje nic, co by dostarczało taką samą izolację. W teorii jest Shadow DOM, ale on ma z kolei swoje problemy.

---

Dzięki! Widzę, że jesteś w temacie. To się ceni.

Jeszcze zapytam o RWD, jakbym chciał wrzucić stosunkowo duży widget, zajmujący sporą przestrzeń, to jak sobie poradzić z responsywnością strony z osadzonym widgetem? Czy ten iframe będzie pomniejszany / powiększany zgodnie z RWD, a jego zawartość (widget) skalowana?

---

No właśnie iframe się średnio skalują. Obecnie da się ten problem obejść przy pomocy aspect-ratio, które pozwala narzucić takiemu iframe odpowiednie proporcje. Dzięki temu powinna się skalować, zachowując te proporcje → https://codepen.io/Comandeer/pen/QWeMPVy