how to add style element to web component

[Lionardo]

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?

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

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

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);