how to add style element to web component

I have a use case in which I need to pass a style element to the web component like this:
But it doesn't work. If shadow option is set to open or closed it doesn't matter.
I need to **encapsulate styles** during runtime that will be loaded over a request.
If this doesn't work what could be the alternative?

```javascript
const ChatWebComponent = r2wc(Chat, {
props: {
Id: "string",
},
} as any);

customElements.define("my-chat", ChatWebComponent);
```

```javascript
const chat = document.createElement("my-chat");
chat.Id = "5896045a";
const style = document.createElement('style');

style.textContent = `
#my-chat {
font-family: "Roboto" !important;
// some more styles...
}
`;

// Append the style element to the shadow root.
chat.shadowRoot.appendChild(style);`
document.body.appendChild(chat);
```