host css styles applied to component?

Am I doing something wrong? as i understand global styles should no apply to shadow root elements but for some reason it does. My code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <title>Vite + Preact</title>
    <style>
      body {
        color: green;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

index.tsx

import { render } from 'preact';

import register from 'preact-custom-element';
// import './style.css';

const Greeting = ({ name = 'World' }) => <p>Hello, {name}!</p>;
register(Greeting, 'x-greeting', ['name'], { shadow: true, mode: 'closed' });

export function App() {
  return (
    <div>
      <x-greeting name="Billy Jo"></x-greeting>
    </div>
  );
}

render(<App />, document.getElementById('app'));

and result is text is green

preactjs / preact-custom-element

host css styles applied to component? #87