Shadow DOM Style Isolation

There seems to be an oddity in isolating Shadow DOM styles from the Main DOM styles, see the below.

In essence if I am specific about the tagName then there is isolation, but if I use * as the CSS selector then the style flows into the Shadow DOM. The issue here is that the Main DOM is using a style library which appears to do this, I’m not sure if there are other cases of the main DOM styling overflowing into the Shadow DOM, but this clearly is and everything I’ve read about Shadow DOM suggests there is full isolation.

class myTest extends HTMLElement {
    constructor () {
        super(); 
    }

    connectedCallback () {
        const shadow = this.attachShadow({ mode: 'closed' });
        const h1 = document.createElement('h1')
              h1.innerHTML = 'In Shadow DOM'
              shadow.appendChild(h1)
    }
   
}

customElements.define('my-test', myTest);

h1 { color: red }
* { 
  font-family: sans-serif
}

<h1>In main DOM</h1>
<my-test></my-test>