CSSに影響されないようなDOMのスタイル指定の方法は？

こんにちは。
DOM単位でスタイルシートのcssの影響を受けないようなcssの指定方法をご教授お願いしたいです。

私は今、GoogleChromeのアドオンを作っています。
簡単に言うと、ポップアップ内のボタンクリックなどを行った時、
表示されているページに対して、DOM要素(アイコンやスタンプ的なもの)を生成、追加するようなものです。
DOM生成までは順調でしたが、DOMのスタイル指定に躓いております。

DOM生成やそのstyle指定は以下のようにJavaScript内で行っているのですが、
表示するページに関して元々適用されているcssの影響を受けることがあります。

[content.js]

let icon_p = document.createElement("p");
icon_p.className = "hoge";
icon_p.style.display="block";
icon_p.style.color = "green";
    
let icon_img = document.createElement("img");
icon_img.src = chrome.extension.getURL("images/hoge.png");
icon_img.alt = "ほげ";
icon_p.appendChild(icon_img);

...(他にもicon_pにappendしていく感じ)   

document.body.appendChild(icon_p);

このように指定した場合、ちゃんと表示はされるのですが、表示するページのcssで<p>や<img>にcolorやfontなど指定がされていた場合、それを受け継ぐ形となってしまい、ページ毎に生成したDOMのスタイルが変わってしまいます。
かといって、予想されるcssの種類も膨大なので、これら全てをコード上で指定するのは厳しいです。

このように、生成したDOMに関して、元々のページのcssに影響されず、かつ、元々のページのcssも破壊することな、
DOM単位でスタイルを1から指定する方法などはありますでしょうか?ご教授お願いしたいです。

自分の考える策としては、
1.自作タグを作る。
2.タグに指定されているcssを読み込み、それらに応じた指定を行う形に。
などが考えられますが、実現に難航している状態です。。。