[SOLVED] How can I contain the styles of a Chrome Extension content script?

I'm working on a Chrome extension that injects some UI react components into a page.

The UI components come from react-mdl. Using them requires me to include a css file in the top of my project.

Unfortunately, once the css is injected into the page, the entire page's font is changed.

Is there a way to limit the scope of the css used by react-mdl such that it doesn't affect the page into which I'm injecting?

I think you should use the Shadow DOM API. It is good practice for those cases when you just need to append your UI component to a webpage.