Mantine and shadow dom

[dexter4life]

I am trying to setup a shadow dom and render a mantine component within this shadow dom. After loading core css into the shadow dom, using <style>...</style> it appears all the variables except those in the :root isn't working.

[rtivital]

You can change css variables selector with https://mantine.dev/theming/mantine-provider/#cssvariablesselector

[dexter4life]

I was able to have those css variables but mostly those in class variables still didn't take effect

[dexter4life]

what can i do to make those accessible too?. Please help

[dexter4life]

Is currently displaying like this. which is different from what i expected

[rtivital]

I do not know, I do not have any experience with shadow DOM. You are welcome to research the issue and share your findings with the community.

[dave-dashbio]

I think I got this working. In addition to setting cssVariableSelector you also need to tell Mantine where the root element is with getRootElement. You also need to make sure it injects the portal components inside if the root as well if you want styling for things like tooltips to work.

class MyWebComponent extends HTMLElement {
  private readonly root: HTMLElement;

  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: "open" });

    const cssUrl = new URL('./styles.css', import.meta.url).href;
    const cssLink = document.createElement('link');
    cssLink.setAttribute('rel', 'stylesheet');
    cssLink.setAttribute('href', cssUrl);
    shadowRoot.appendChild(cssLink);

    this.root = document.createElement('div');
    this.root.setAttribute('id', 'root');
    shadowRoot.appendChild(this.root);
  }

  connectedCallback() {
    const theme = createTheme({
      components: {
        Portal: {
          defaultProps: {
            target: this.root
          },
        }
      }
    });

    ReactDOM.createRoot(this.root).render(
      <MantineProvider
        cssVariablesSelector="#root"
        getRootElement={() => this.root}
        theme={theme}
      >
        <ModalsProvider>
          <App />
        </ModalsProvider>
      </MantineProvider>,
    );
  }
}

customElements.define("my-component", MyWebComponent);