Skip to content

how to add style element to web component #165

Open
@Lionardo

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions