Shadow Dom inheriting parent page CSS [Chrome]
Inherited properties will be inherited as usual. It's better to think of the shadow boundary as affecting the cascade, namely the scope of selectors and the importance of rules.
To isolate shadow content from the page, consider the all property.
document.getElementById("example_control").attachShadow({mode:'open'}).innerHTML=`
<h1>shadow dom header</h1>
<div>shadow dom div</div>`;
document.getElementById("example_initial").attachShadow({mode:'open'}).innerHTML=`
<style>*{all:initial}</style>
<h1>shadow dom header</h1>
<div>shadow dom div</div>`;
document.getElementById("example_unset").attachShadow({mode:'open'}).innerHTML=`
<style>*{all:unset}</style>
<h1>shadow dom header</h1>
<div>shadow dom div</div>`;div{color:purple}
div{border:1px solid}<p>control:
<div id=example_control></div>
<p>initial:
<div id=example_initial></div>
<p>unset
<div id=example_unset></div>For me, adding :host { all: initial } as the first CSS rule within the ShadowDOM styles prevented inheritance without affecting other CSS defined within the ShadowDOM.
Using * { all: initial } proved to be too broad and overrode most of my CSS defined within the ShadowDOM.
Ref: Section marked #reset in WebFundamentals project ShadowDOM document.