Tuesday, December 21, 2021

Using the Shadow DOM to Isolate Styles on a DOM You Don't Own

There have been many times in my career of building web apps and frontend experiences that I have needed to embed a widget in a DOM that I did not build or have access to —  for example, embedding e-commerce widgets in a CMS or building Chrome extensions to augment a given website. One of the biggest frustrations I've had is the "style collision." In my development environment, all the widgets look great, but the second I add the widget to a customer’s page… everything is broken! 

Why Does This Happen?

The difficulty with embedding widgets in a DOM that you don't own is every DOM is going to reference different default fonts and colors. It’s normal for a CSS stylesheet to look like:



from DZone.com Feed https://ift.tt/31YC2zn

No comments:

Post a Comment