Our team was tasked to create an embeddable script (widget) that displays functionality from our web application. When released to the public however, we found that the interface was not looking right in some cases. It turned out that some pages that embedded our script was able to affect the styles of our widget with its own CSS declarations.
Our resident front-end guru recommended that we use the Shadow DOM for the widget implementation. This will essentially shield our widget’s styles from being overridden by the page that embedded it. I have not used Shadow DOM previously so this piqued my curiosity. Back in the day, we would use iframes to implement something like this.
